The easiest way to add Poool Access to your React Native app ✨

• React Native >= 0.78 (not tested on older versions)
• React Native Permissions >= 5.3.0 (not tested on older versions) (see react-native-permissions' setup for more details)

yarn add @poool/react-native-access react-native-permissions

⚠ Important: This package is a wrapper that requires native Poool SDKs to be linked to your project. React Native does it automatically for you, but if you encounter any issues, please refer to the React Native documentation about linking native libraries.

After installing dependencies, add the necessary ReactNativePermission config to your Podfile and request the AppTrackingTransparency permission:

setup_permissions([
  'AppTrackingTransparency',
])

And reinstall pods:

cd ios && pod install

import { useCallback, useEffect } from 'react';
import { SafeAreaView, Text } from 'react-native';
import { PERMISSIONS, request } from 'react-native-permissions';
import {
  AccessContext,
  Snippet,
  RestrictedContent,
  Paywall,
} from '@poool/react-native-access';

export default () => {
  const init = useCallback(async () => {
    if (Platform.OS === 'ios') {
      await request(PERMISSIONS.IOS.APP_TRACKING_TRANSPARENCY);
    }
  }, []);

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

  return (
    <SafeAreaView>
      { /*
        Wrap everything with our AccessContext component
      */ }
      <AccessContext
        appId="insert_your_app_id"
        config={{ cookiesEnabled: true }}
      >
        { /*
          Place your snippet & restricted content where you want them to be
          */ }
        <Snippet>
          <Text>Synopsis</Text>
        </Snippet>
        <RestrictedContent>
          <Text>Full content</Text>
        </RestrictedContent>

        { /*
          Place our <Paywall /> component where you want your paywall to be
          displayed
        */ }
        <Paywall />
      </AccessContext>
    </SafeAreaView>
  );
};

• appId {String} Your Poool App ID
• config {Object} (optional) Default paywall config (see the configuration documentation).
• styles {Object} (optional) Default paywall styles (see the styles documentation).
• texts {Object} (optional) Default paywall texts (see the texts documentation).
• variables {Object} (optional) Paywall variables (see the variables documentation).

• id {String} (optional, default: null) Paywall id

• id {String} (optional, default: null) Paywall id

• id {String} (optional, default: null) Paywall id: used to link the paywall release event to the corresponding snippet/restricted content
• pageType {String} (optional, default: 'premium') Current page type (supported types: page, premium, free)
• config {Object} (optional) Paywall config (see the configuration documentation).
• styles {Object} (optional) Paywall styles (see the styles documentation).
• texts {Object} (optional) Paywall texts (see the texts documentation).
• variables {Object} (optional) Paywall variables (see the variables documentation).
• on* {Function} (optional) Event listeners (see the events documentation).

Can be used to retrieve some properties from the current access context, as well as the Access SDK itself.

• appId {String} Current app ID
• config {Object} Current access context config
• texts {Object} Current access context texts
• styles {Object} Current access context styles
• variables {Object} Current access context variables

const { appId } = useAccess();

Please check the CONTRIBUTING.md doc for contribution guidelines.

Install dependencies:

yarn install

(Optional-iOS Only) Install pods:

yarn example ios:install

Run examples:

yarn example ios

or

yarn example android

• Stop all gradlew daemons: cd example/android && ./gradlew --stop
• Ensure the right node version is selected nvm use
• Run yarn example android again

• Stop all gradlew daemons: cd example/android && ./gradlew --stop
• Retry

This software is licensed under MIT.