wrathchaos / react-native-subscribe-card

Beautifully designed & fully customizable subscribe card for React Native

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

• 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.