React Native Purchasely

Purchasely is a solution to ease the integration and boost your In-App Purchase & Subscriptions on the App Store, Google Play Store, and Huawei App Gallery.

🚀 Installation

npm install react-native-purchasely

🔧 Setup

Add the following code in the root of your project (typically App.tsx in a React Native project):

import Purchasely, { LogLevels, RunningMode } from 'react-native-purchasely'

Purchasely.startWithAPIKey(
    'afa96c76-1d8e-4e3c-a48f-204a3cd93a15',
    ['Google'], // List of stores for Android, accepted values: Google, Huawei, and Amazon
    null, // Your user ID
    LogLevels.DEBUG, // Log level, should be warning or error in production
    RunningMode.FULL // Running mode
).then(
    (configured) => {
        if (!configured) {
            console.log('Purchasely SDK not properly initialized')
            return
        }

        console.log('Purchasely SDK is initialized')
        setupPurchasely()
    },
    (error) => {
        console.log('Purchasely SDK initialization error', error)
    }
)

🎬 Usage

1️⃣ Full Screen Paywall

import Purchasely, {
    PLYPresentationType,
    ProductResult,
} from 'react-native-purchasely'

try {
    const result = await Purchasely.presentPresentationForPlacement({
        placementVendorId: 'composer',
        loadingBackgroundColor: '#FFFFFFFF',
    })

    console.log('Result is ' + result.result)

    switch (result.result) {
        case ProductResult.PRODUCT_RESULT_PURCHASED:
        case ProductResult.PRODUCT_RESULT_RESTORED:
            if (result.plan != null) {
                console.log('User purchased ' + result.plan.name)
            }
            break
        case ProductResult.PRODUCT_RESULT_CANCELLED:
            break
    }
} catch (e) {
    console.error(e)
}

2️⃣ Nested View Paywall

import { Text, View } from 'react-native';
import { NativeStackScreenProps } from '@react-navigation/native-stack';
import { Header } from 'react-native/Libraries/NewAppScreen';
import { Section } from './Section.tsx';
import Purchasely, {
  PLYPresentationView,
  PresentPresentationResult,
  ProductResult,
  PurchaselyPresentation,
} from 'react-native-purchasely';
import { useEffect, useState } from 'react';

export const PaywallScreen: React.FC<NativeStackScreenProps<any>> = ({ navigation }) => {
  const [purchaselyPresentation, setPurchaselyPresentation] = useState<PurchaselyPresentation>();

  useEffect(() => {
    fetchPresentation();
  }, []);

  const fetchPresentation = async () => {
    try {
      setPurchaselyPresentation(
        await Purchasely.fetchPresentation({
          placementId: 'ONBOARDING',
          contentId: null,
        })
      );
    } catch (e) {
      console.error(e);
    }
  };

  const callback = (result: PresentPresentationResult) => {
    console.log('### Paywall closed');
    console.log('### Result is ' + result.result);
    switch (result.result) {
      case ProductResult.PRODUCT_RESULT_PURCHASED:
      case ProductResult.PRODUCT_RESULT_RESTORED:
        if (result.plan != null) {
          console.log('User purchased ' + result.plan.name);
        }
        break;
      case ProductResult.PRODUCT_RESULT_CANCELLED:
        console.log('User cancelled');
        break;
    }
    navigation.goBack();
  };

  if (purchaselyPresentation == null) {
    return (
      <View>
        <Text>Loading ...</Text>
      </View>
    );
  }

  return (
    <View style={{ flex: 1 }}>
      <Header />
      <PLYPresentationView
        placementId="ACCOUNT"
        flex={7}
        presentation={purchaselyPresentation}
        onPresentationClosed={(res: PresentPresentationResult) => callback(res)}
      />
      <View style={{ flex: 3, justifyContent: 'center', alignItems: 'center' }}>
        <Section>
          <Text>Your own React Native content</Text>
        </Section>
      </View>
    </View>
  );
};

📖 Documentation

A complete documentation is available on our website: Purchasely Docs.

🛠️ Developer Guide

1️⃣ Clone the Repository

git clone https://github.com/Purchasely/Purchasely-ReactNative.git
cd repo

2️⃣ Install Dependencies

yarn install

3️⃣ Prepare all the packages

yarn all:prepare

4️⃣ Run the Example App

yarn example:android

# after example:android is done building run:
yarn example:start

Troubleshooting

If you encounter issues with the example app, ensure that you have the latest version of Android Studio and that your Android SDK is up to date. You may also need to run yarn android:clean to clear any cached builds.

If it's about Hermes engine and node, check if you have a file .xcode.env.local in example/ios If you do, remove it:

rm -rf example/ios/.xcode.env.local

You can also check the node link in /user/local/bin to ensure it points to the correct version of your node installation:

ls -l /usr/local/bin/node

If not, do the following:

rm -rf /usr/local/bin/node
ln -s $(which node) /usr/local/bin/node