Beautifully designed & fully customizable subscribe card for React Native
Add the dependency:
npm i react-native-subscribe-card
Zero Dependency
import SubscribeCard from "react-native-subscribe-card";
<SubscribeCard
title="1 year plan"
descriptionPrice="$224"
description=" billed every year"
currency="$"
price={12}
timePostfix="/mo"
onPress={() => {}}
/>
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={() => {}}
/>
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={() => {}}
/>
You can checkout the example project 🥰
Simply run
npm i
react-native run-ios/android
should work of the example project.
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 |
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 |
Big thanks to Maxim Sirotyuk. Heavily inspired by Maxim Sirotyuk's Amazing Design
FreakyCoder, [email protected]
React Native Subsribe Card is available under the MIT license. See the LICENSE file for more info.