below70
react-native-paywall
A customizable paywall component for React Native applications, supporting multiple paywalls and dynamic product selection.
Installation
Install the package using npm or yarn:
npm install react-native-paywall
# or
yarn add react-native-paywallAdditionally, the package depends on react-native-safe-area-context for handling safe area insets:
npm install react-native-safe-area-context
# or
yarn add react-native-safe-area-contextYou will need to link this dependency if you haven't already done so.
Screenshots
Istanbul Paywall
The Istanbul paywall showcases a sleek design optimized for clear pricing and user engagement.
London Paywall
The London paywall focuses on subscription options with visually distinct plans for better user understanding.
Usage
Import the usePaywall hook and Paywall component into your project and use them to display paywall screens in your React Native application.
Example
import React from 'react';
import { View, Button, Image } from 'react-native';
import { usePaywall } from 'react-native-paywall';
const App = () => {
const { showPaywall, hidePaywall, PaywallComponent } = usePaywall();
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
{/* Button to trigger paywall */}
<Button title="Show Paywall" onPress={() => showPaywall('istanbul')} />
{/* Render the paywall component */}
<PaywallComponent
onContinue={(selectedIndex) => {
console.log(`User continued with plan index: ${selectedIndex}`);
hidePaywall();
}}
headerText="Ignite your child's curiosity"
descriptionText="Get access to all our educational content trusted by thousands of parents"
buttonText="Subscribe Now"
products={[
{
identifier: '$rc_monthly',
product: {
title: 'Monthly Plan',
priceString: '$4.99',
},
},
{
identifier: '$rc_annual',
product: {
title: 'Annual Plan',
priceString: '$39.99',
},
},
]}
imageComponent={
<Image
source={{
uri: 'https://example.com/image.jpg',
}}
/>
}
textButtons={[
{
title: 'Privacy',
onPress: () => console.log('Privacy button pressed'),
},
{
title: 'Terms',
onPress: () => console.log('Terms button pressed'),
},
{
title: 'Restore',
onPress: () => console.log('Restore button pressed'),
},
]}
backgroundColor="#f0f0f0"
closeButtonBgColor="#FF6347"
closeButtonTextColor="#FFFFFF"
closeButtonDelay={3000}
displayCloseButton={true}
buttonBgColor="#008CBA"
buttonTextColor="#FFFFFF"
buttonRadius={0}
buttonWidthPercentage={90}
textButtonColor="#FF4500"
textButtonUnderline={false}
/>
</View>
);
};
export default App;Props
The Paywall component accepts the following props:
visible:boolean
Controls whether the paywall is visible.onContinue:(selectedIndex: number) => void
Callback function that triggers when the user presses the "Continue" button. Receives the index of the selected product.onClose:() => void
Callback function that triggers when the user presses the "Close" button.headerText:string
Text to display as the paywall header.descriptionText:string
Text to display as the paywall description.buttonText:string
Text for the continue button (e.g., "Subscribe Now").products:{ identifier: string; product: { title: string; priceString: string } }[]
Array of product plans to display, each with a unique identifier and pricing information. Allows for dynamic selection between multiple plans.imageComponent:React.ReactElement
A custom image component to display on the paywall.textButtons:{ title: string; onPress: () => void; }[]
Array of buttons to display at the bottom of the paywall.backgroundColor:string
Background color of the paywall.closeButtonBgColor:string
Background color of the close button.closeButtonTextColor:string
Text color of the close button.closeButtonDelay:number
Delay in milliseconds before the close button is displayed.displayCloseButton:boolean
Controls whether the close button is displayed.buttonBgColor:string
Background color of the continue button.buttonTextColor:string
Text color of the continue button.buttonRadius:number
Corner radius of the continue button.buttonWidthPercentage:number
Width of the continue button as a percentage of the screen width.textButtonColor:string
Color of the link text buttons.textButtonUnderline:boolean
Controls whether the link text buttons are underlined.
Managing Multiple Paywalls
To manage multiple paywalls, you can differentiate each paywall by passing a unique type value (e.g., istanbul or london). In the PaywallComponent, use the type to specify which paywall to show.
Example for Multiple Paywalls
import React from 'react';
import { usePaywall } from 'react-native-paywall';
const App = () => {
const { showPaywall, hidePaywall, PaywallComponent } = usePaywall();
return (
<>
{/* Button to show Istanbul paywall */}
<Button
title="Show Istanbul Paywall"
onPress={() => showPaywall('istanbul')}
/>
{/* Button to show London paywall */}
<Button
title="Show London Paywall"
onPress={() => showPaywall('london')}
/>
{/* Istanbul Paywall Component */}
<PaywallComponent
type="istanbul"
headerText="Unlock Istanbul Premium"
descriptionText="Get access to exclusive content in Istanbul!"
products={istanbulProducts}
onContinue={(selectedIndex) => {
handlePurchase(selectedIndex);
hidePaywall();
}}
/>
{/* London Paywall Component */}
<PaywallComponent
type="london"
headerText="Unlock London Premium"
descriptionText="Access London premium content and features!"
products={londonProducts}
onContinue={(selectedIndex) => {
handlePurchase(selectedIndex);
hidePaywall();
}}
/>
</>
);
};Styling
The Paywall component comes with a basic design, but you can easily customize it by editing the component’s styles or wrapping it in custom components. You can also pass styling props to customize the look and feel of the paywall without editing the component directly.
License
MIT License. See LICENSE for more details.