Poool Access - React Native Webview SDK

Poool Access, but for React Native, but in a Webview ✨

Installation

yarn add @poool/react-native-access-webview react-native-webview @react-native-async-storage/async-storage

Usage

import { Text } from 'react-native';
import {
  AccessContext,
  RestrictedContent,
  Paywall,
  Snippet,
} from '@poool/react-native-access-webview';

export default () => {
  return (
    <>
      { /*
        Wrap everything with our AccessContext component
      */ }
      <AccessContext
        appId="insert_your_app_id"
        config={{ cookies_enabled: true }}
      >
        { /* Wrap your snippet with our Snippet component */ }
        <Snippet>
          <Text>This is a snippet</Text>
        </Snippet>

        { /* Wrap your full content with our RestrictedContent component */ }
        <RestrictedContent>
          <Text>Your article content</Text>
        </RestrictedContent>

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

Documentation

<AccessContext />

Props

• appId {string} Your Poool App ID
• scriptUrl {string} (optional, default: 'https://assets.poool.fr/access.min.js') Default Poool Access SDK url
• loadTimeout {number} (optional, default: 2000) Timeout for the webview to load
• config {Record<string, any>} (optional) Default paywall config (see the configuration documentation).
• styles {Record<string, any>} (optional) Default paywall styles (see the styles documentation).
• texts {Record<string, string>} (optional) Default paywall texts (see the texts documentation).
• variables {Record<string, any>} (optional) Paywall variables (see the variables documentation).
• on* {(event: Event, paywallRef: PaywallRef) => any} (optional) Event listeners (see the events documentation).

<RestrictedContent />

Props

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

<Snippet />

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

<Paywall />

Props

• 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)
• scriptUrl {string} (optional, default: 'https://assets.poool.fr/access.min.js') Default Poool Access SDK url
• loadTimeout {number} (optional, default: 2000) Timeout for the webview to load
• wrapperProps {ViewProps} (optional) Props to pass to the wrapper view around the webview component. Useful for styling or customization purposes.
• config {Record<string, any>} (optional) Paywall config (see the configuration documentation).
• styles {Record<string, any>} (optional) Paywall styles (see the styles documentation).
• texts {Record<string, string>} (optional) Paywall texts (see the texts documentation).
• variables {Record<string, any>} (optional) Paywall variables (see the variables documentation).
• on* {(event: Event, paywallRef: PaywallRef) => any} (optional) Event listeners (see the events documentation).

useAccess()

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

Returns

• appId {string} Current app ID
• config {Record<string, any>} Current access context config
• styles {Record<string, any>} Current access context styles
• texts {Record<string, string>} Current access context texts
• variables {Record<string, any>} Current access context variables
• on* {(event: Event, paywallRef: PaywallRef) => any} Current access context event listeners

Example

const { appId } = useAccess();

Contributing

Please check the CONTRIBUTING.md doc for contribution guidelines.

Development

Install dependencies:

yarn install

Run examples:

yarn example ios

or

yarn example android

License

This software is licensed under MIT.