Istanbul Paywall

The Istanbul Paywall component is designed to provide a sleek and modern user interface for subscription-based paywalls. This component is fully customizable, allowing you to tailor the design and behavior to suit your app's branding and user needs.

---

Features

• Customizable Appearance
  Change colors, text, and dimensions to match your app's style.

• Flexible Layout
  Includes options for header text, description, pricing, and additional links.

• Responsive Design
  Adapts to various screen sizes for a seamless user experience.

---

Props

Here are the available props for the Istanbul Paywall component:

Prop	Type	Default	Description
visible	boolean	false	Controls the visibility of the paywall.
onContinue	(index: number)	Required	Callback triggered when the user presses the continue button.
onClose	() => void	Required	Callback triggered when the close button is pressed.
headerText	string	''	The main title of the paywall.
descriptionText	string	''	The subtitle or description of the paywall.
priceText	string	''	The pricing information displayed to the user.
imageComponent	React.ReactNode	Required	A custom image component to display at the top of the paywall.
textButtons	Array	[]	Additional buttons with custom actions (e.g., Privacy, Terms, Restore).
backgroundColor	string	'#FFFFFF'	Background color of the paywall.
closeButtonBgColor	string	'rgba(0, 0, 0, 0.5)'	Background color of the close button.
closeButtonTextColor	string	'#FFFFFF'	Text color of the close button.
closeButtonDelay	number	0	Delay in milliseconds before the close button appears.
displayCloseButton	boolean	true	Controls whether the close button is displayed.
buttonText	string	'Continue'	Text displayed on the main button.
buttonBgColor	string	'#4CAF50'	Background color of the main button.
buttonTextColor	string	'#FFFFFF'	Text color of the main button.
buttonRadius	number	55	Corner radius of the main button.
buttonWidthPercentage	number	80	Width of the button as a percentage of the screen width.
textButtonColor	string	'#666666'	Text color for additional link buttons.
textButtonUnderline	boolean	true	Controls whether additional link buttons are underlined.

---

Example Usage

Here’s an example of how to use the Istanbul Paywall component:

import React from 'react';
import { View, Button } from 'react-native';
import { usePaywall } from 'react-native-paywall';

const App = () => {
  // Initialize the usePaywall hook
  const { showPaywall, hidePaywall, PaywallComponent } = usePaywall();

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      {/* Button to trigger the paywall */}
      <Button title="Show Paywall" onPress={() => showPaywall('istanbul')} />

      {/* Render the paywall component */}
      <PaywallComponent
        onContinue={(selectedIndex) => {
          console.log(`User continued with plan index: ${selectedIndex}`);
          hidePaywall(); // Hide the paywall after selection
        }}
        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',
            },
          },
        ]}
        backgroundColor="#f0f0f0"
        buttonBgColor="#008CBA"
        buttonTextColor="#FFFFFF"
      />
    </View>
  );
};

export default App;

---

Styling the Component

The Istanbul Paywall provides a default style, but you can customize it through the following props:

• Button Styling: Adjust colors, text, and dimensions with buttonBgColor, buttonTextColor, buttonRadius, and buttonWidthPercentage.
• Close Button Styling: Change its appearance with closeButtonBgColor and closeButtonTextColor.
• Background: Use the backgroundColor prop for a custom background.

---