Version 3
- Only one dependency is required
ποΈ - Other dependencies are removed/extracted
- Expo Compatible
πͺ - Code cleaning
π§Ή
Installation & Expo Compatible
Add the dependency:
npm i react-native-apple-card-viewsPeer Dependencies
IMPORTANT! You need install them
"@freakycoder/react-native-bounceable": ">= 1.0.3"Options
Usage
AppleCard Usage
<AppleCard
source={require("./assets/hero_bg_brawlstars_.jpg")}
onPress={() => {}}
smallTitle={"NEW GAME"}
largeTitle={"The Brilliance of Brawl Starts"}
footnote={
"The next game from the markers of Clash Royale is here. Tap to learn more."
}
/>AppOfTheDayCard Usage
<AppOfTheDayCard
title={"Colorfy: Coloring Art Games"}
subtitle={"Drawing & painting for everyone"}
largeTitle={"APP" + "\n" + "OF THE" + "\n" + "DAY"}
buttonText={"GET"}
iconSource={require("./assets/Colorfy.jpg")}
backgroundSource={require("./assets/ColorfyBG.jpg")}
buttonSubtitle={"In-App Purchases"}
onPress={() => {}}
onButtonPress={() => {}}
/>Configuration - Props
AppleCard Props
| Property | Type | Default | Description |
|---|---|---|---|
| source | image | default image | set the image background |
| style | style | default | change the style of the card |
| smallTitle | string | NEW GAME | change the small title |
| largeTitle | string | The Brilliance of Brawl Stars | change the main large title |
| footnoteText | string | The next game from the markers of Clash Royale is here. Tap to learn more. | change the footnote text |
| backgroundStyle | style | default | set custom style for background image |
| smallTitleTextStyle | style | default | set custom style for small title |
| largeTitleTextStyle | style | default | set custom style for large title |
| footnoteTextStyle | style | default | set custom style for footnote |
| onPress | function | null | use this to set onPress functionality |
AppOfTheDayCard Props
| Property | Type | Default | Description |
|---|---|---|---|
| style | style | default | change the style of the card and image background |
| shadowStyle | style | default | change the style of the card's shadow |
| backgroundSource | image | default image | set the image background for main card |
| iconSource | image | default image | set the logo image |
| largeTitle | string | "APP OF THE DAY" | change the main large title |
| title | string | "Colorfy: Coloring Art Games" | change the title text |
| subtitle | string | "Drawing & painting for everyone" | change the subtitle text |
| buttonText | string | "GET" | change the button's text |
| buttonSubtitle | string | "In-App Purchases" | change the button's bottom subtitle |
| largeTitleTextStyle | style | default | set the custom style for large title |
| subtitleTextStyle | style | default | set the custom style for subtitle text |
| titleTextStyle | style | default | set the custom style for title text |
| iconStyle | style | default | set the custom style for icon |
| buttonOnPress | function | null | set a function for button's onPress |
| onPress | function | null | set a function for main card's onPress |
Roadmap
-
AppleCardRewritten and Code Cleaning -
AppleCardMore Customization Options
Author
FreakyCoder, [email protected]
License
React Native Apple Card Views Library is available under the MIT license. See the LICENSE file for more info.