Installation

Add the dependency:

npm i react-native-subscribe-card

Peer Dependencies

Zero Dependency

Usage

Import

import SubscribeCard from "react-native-subscribe-card";

Fundamental Usage

<SubscribeCard
  title="1 year plan"
  descriptionPrice="$224"
  description=" billed every year"
  currency="$"
  price={12}
  timePostfix="/mo"
  onPress={() => {}}
/>

Selected Customization Usage

isSelected prop makes the whole subscribe card changes to a new selected one.

<SubscribeCard
  isSelected
  title="Unlimited plan"
  descriptionPrice="$124"
  description=" billed Unlimited plan"
  currency="$"
  price={8}
  timePostfix="/mo"
  onPress={() => {}}
/>

Discount / Save Optional Usage

discountText prop makes the available for the discount/save optional component.

<SubscribeCard
  discountText="Save 90%"
  title="Unlimited plan"
  descriptionPrice="$124"
  description=" billed Unlimited plan"
  currency="$"
  price={8}
  timePostfix="/mo"
  isSelected
  onPress={() => {}}
/>

Example Project 😍

You can checkout the example project 🥰

Simply run

• npm i
• react-native run-ios/android

should work of the example project.

Configuration - Props

Fundamentals

| Property | Type | Required | Default | Description | | ---------------- | :-------------: | :------: | :-------: | ------------------------------------------------------------------ | | title | string |   ✅   | undefined | change the title | | description | string | ❌ | undefined | change the descrition | | descriptionPrice | string / number | ❌ | undefined | change the descrition price | | price | string / number | ✅ | undefined | change the price | | currency | string | ✅ | undefined | change the currency icon such as $ | | timePostfix | string | ✅ | undefined | change the time postfix | | isSelected | boolean | ❌ | false | enable the selected styling | | discountText | string | ❌ | undefined | change the discount text | | onPress | function | ✅ | undefined | set your own logic for the button functionality when it is pressed |

Customization (Optionals)

| Property | Type | Default | Description | | --------------------------------- | :--------------: | :-----: | ----------------------------------------------------------------------------------------------------------------------- | | style | ViewStyle | default | set or override the style object for the styling | | containerStyle | ViewStyle | default | set or override the style object for the container style | | selectedContainerStyle | ViewStyle | default | set or override the style object for the selected container style (when the isSelected prop is enable) | | discountContainerStyle | ViewStyle | default | set or override the style object for the discount container style | | outerContainerStyle | ViewStyle | default | set or override the style object for the outer container style | | selectedOuterContainerStyle | ViewStyle | default | set or override the style object for the selected outer container style (when the isSelected prop is enable) | | titleTextStyle | TextStyle | default | set or override the style object for the title text style | | descriptionTextStyle | TextStyle | default | set or override the style object for the description text style | | descriptionPriceTextStyle | TextStyle | default | set or override the style object for the description price text style | | selectedDescriptionPriceTextStyle | TextStyle | default | set or override the style object for the selected description price text style (when the isSelected prop is enable) | | currencyTextStyle | TextStyle | default | set or override the style object for the currency text style | | selectedCurrencyTextStyle | TextStyle | default | set or override the style object for the selected currency text style (when the isSelected prop is enable) | | priceTextStyle | TextStyle | default | set or override the style object for the price text style | | selectedPriceTextStyle | TextStyle | default | set or override the style object for the selected price text style (when the isSelected prop is enable) | | timeTextStyle | TextStyle | default | set or override the style object for the time text style | | discountTextStyle | TextStyle | default | set or override the style object for the discount text style | | TextComponent | Text | default | set your own component instead of default React Native's Text component | | TouchableComponent | TouchableOpacity | default | set your own component instead of default React Native's TouchableOpacity component |

Future Plans

• [x] ~~LICENSE~~
• [ ] Write an article about the lib on Medium

Credits

Big thanks to Maxim Sirotyuk. Heavily inspired by Maxim Sirotyuk's Amazing Design

Author

FreakyCoder, [email protected]

License

React Native Subsribe Card is available under the MIT license. See the LICENSE file for more info.