Need help with react-native-apple-card-views?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

WrathChaos
222 Stars 21 Forks MIT License 79 Commits 1 Opened issues

Description

Customizable and perfect clone of Apple, App Store Card Views for React Native.

Services available

!
?

Need anything else?

Contributors list

# 47,503
React N...
google-...
Objecti...
TypeScr...
43 commits

React Native Apple Card Views

Battle Tested ✅

Fully customizable and perfect clone of Apple, App Store Card Views for React Native

npm version npm Platform - Android and iOS License: MIT styled with prettier

React Native Apple Card Views React Native Apple Card Views

React Native Apple Card Views

Installation

Add the dependency:

Pure React Native

npm i react-native-apple-card-views

Expo Version

npm i react-native-apple-card-views#expo

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"

Expo Peer Dependencies

IMPORTANT! You need install them
"expo-linear-gradient": ">= 9.2.0"
"@freakycoder/react-native-bounceable": ">= 0.1.1"

Options

Usage

AppleCard Usage

 {}}
/>

AppOfTheDayCard Usage

 {}}
  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.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.