React-native-subscribe-card NPM

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