WrathChaos / React Native Apple Card Views
Licence: mit
Customizable and perfect clone of Apple, App Store Card Views for React Native.
Stars: ✭ 166
Programming Languages
typescript
32286 projects
Installation
Add the dependency:
Pure React Native
npm i react-native-apple-card-views
Peer Dependencies
IMPORTANT! You need install them
"react-native-androw": ">= 0.0.33",
"react-native-linear-gradient": ">= 2.5.6",
"@freakycoder/react-native-bounceable": ">= 0.1.1"
Options
- AppleCard
- AppOfTheDayCard
Usage
AppleCard Usage
<AppleCard
smallTitle=""
largeTitle=""
footnoteText=""
resizeMode="cover"
source={require("./assets/hero_bg_brawlstars_.jpg")}
backgroundStyle={{
height: 200,
}}
onPress={() => {}}
/>
AppOfTheDayCard Usage
<AppOfTheDayCard
iconSource={require("./assets/Colorfy.jpg")}
backgroundSource={require("./assets/ColorfyBG.jpg")}
onPress={() => {}}
buttonOnPress={() => {}}
/>
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 |
shadowColor | color | #000 | change the main card's shadow color |
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 |
gradientColors | Array | ["#de9c7c", "#ef9f81", "#efa192"] | change the gradient colors |
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
- [ ]
AppleCard
Rewritten and Code Cleaning - [ ]
AppleCard
More 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.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].