DOCSEARCHbyAlgolia
Submit Docs

Adapty React Native SDK

repository·master·Indexed 41 days ago

https://github.com/adaptyteam/adaptysdk-react-native

An open-source framework for simplifying in-app subscription integration in React Native applications. Version 4.1.0 provides features including no-code flow building, A/B testing for paywalls, and server-side receipt validation. It supports custom UI, modal, and component-based paywall implementations, and includes a web mock mechanism for Expo Go and Web environments.

Tokens
14.6K
Snippets
57
Records
76
Agent score
52%

What's inside Adapty

  1. Understand the Adapty SDK Mock Mechanism for Web and Expo Go

    master
    The Adapty SDK includes a web mock implementation designed for platforms where native modules are unavailable, such as Web and Expo Go. When running on these platforms, the SDK automatically uses mock data instead of attempting to access actual native in-app purchase functionality. This allows developers to test paywall logic and integration flows in environments that do not support native mobile modules.

  2. Configure Adapty credentials for the React Native SDK

    master

    Before running the application, you must configure your Adapty credentials. The project uses a .adapty-credentials.json file to manage configuration.

    To set up credentials:

    1. Run yarn install to install dependencies.
    2. The yarn credentials command (triggered via a prestart hook) will automatically create the .adapty-credentials.json file and configure native project settings like bundle IDs and application IDs.
    3. If you need to overwrite existing configuration, run yarn credentials-force.

    The .adapty-credentials.json file must contain the following keys:

    • token: Your Adapty public SDK key.
    • placement_id: The Placement ID for the paywall from the Adapty dashboard.
    • ios_bundle: The iOS bundle identifier (must match App Store Connect).
    • android_application_id: The Android application ID (must match Google Play Console).

    ⚠️ Important: Bundle IDs must match your app configuration in App Store Connect (iOS) and Google Play Console (Android) to enable test purchases.

    yarn install
# or to force update credentials
yarn credentials-force

  3. Run the ExpoGoWebMock Example

    master

    Depending on your target platform and environment, use the following commands to run the example app:

    • Expo Go (iOS/Android): Run npm start and scan the QR code with the Expo Go app.
    • Web: Run npm run web.
    • Development Client: Run npm run local-build-client.
    • iOS Local Build: Run npm run ios.
    • Android Local Build: Run npm run android.
    npm start
npm run web
npm run local-build-client
npm run ios
npm run android

  4. Install and run the AdaptyDevtools example

    master

    Follow these steps to install and run the example application from your terminal:

    1. Install Dependencies

    Navigate to the example directory and install the node modules:

    cd examples/AdaptyDevtools
yarn install

    2. Install iOS Dependencies (iOS only)

    cd ios
pod install
cd ..

    3. Start Metro Bundler

    Running this command will trigger the credential setup prompt if credentials haven't been configured yet:

    yarn start

    4. Run the Application

    In a new terminal window, run the command for your target platform:

    For Android:

    yarn android

    For iOS:

    yarn ios
    cd examples/AdaptyDevtools
yarn install
cd ios && pod install && cd ..
yarn start
yarn android
# or
yarn ios

  5. Setup the ExpoGoWebMock Example

    master

    To set up this example project, install the dependencies and configure your Adapty credentials. You must provide your own API keys in the helper configuration file to enable the mock mechanism.

    1. Install dependencies using npm:
      npm install
    2. Configure Adapty credentials in src/helpers.ts:
      • Replace MOCK_TOKEN with your actual Adapty API key.
      • Replace MOCK_PLACEMENT_ID with your placement ID.
    npm install

  6. Configure iOS requirements for Adapty (since 4.0.0)

    master

    Since version 4.0.0, the native iOS SDK is pulled via Swift Package Manager through a spm_dependency podspec helper. This requires specific configurations in your iOS environment:

    1. React Native Version: Must be $\ge$ 0.75 to support the spm_dependency helper.
    2. Dynamic Frameworks: Your ios/Podfile must use dynamic linkage. Add the following line to your Podfile:
      use_frameworks! :linkage => :dynamic
      Note: Switching to dynamic linkage may conflict with libraries that do not support modular headers and is incompatible with Flipper.
    3. Optional (React Native $\ge$ 0.87): You can use React Native's experimental SwiftPM integration and drop CocoaPods entirely, as the SDK ships a Package.swift.
    use_frameworks! :linkage => :dynamic

  8. Enable or Disable Kids Mode (COPPA)

    master

    Kids Mode (for COPPA / App Store Kids Category) is opt-in. When enabled, the AdaptyReactNativeKidsMode trait forwards to the iOS SDK, which compiles out all IDFA, AdSupport, and AppTrackingTransparency code.

    Use the following commands to toggle this mode. These commands use the SDK's CLI to edit the installed copy in node_modules:

    yarn kids-mode:enable     # opt in
yarn kids-mode:disable    # back to the default
    yarn kids-mode:enable
yarn kids-mode:disable

  9. Prerequisites for running Focus Journal Expo

    master

    Because the Adapty SDK includes native dependencies, Expo Go will not work. You must use a custom development build.

    Requirements

    • Node.js: Version 20 or higher.
    • Adapty Account: A valid account with an SDK key.
    • Store Configuration: At least one in-app purchase configured in App Store Connect (iOS) or Google Play Console (Android) and synced to your Adapty dashboard.
    • Hardware: A physical device is highly recommended for testing in-app purchases.

    Environment Setup

    • For Local Builds: Requires Xcode (iOS) and Android Studio (Android).
    • For EAS Cloud Builds: Requires EAS CLI and an Expo account.

  10. Manage JS Sources via Syncing

    master

    The src/ directory in this project is a mirror of examples/AdaptyDevtools/src. It is not committed to version control (except for .gitkeep).

    Workflow:

    1. Do not edit src/ directly in this project. Any changes will be wiped during the next sync.
    2. Edit the source of truth: Make changes in examples/AdaptyDevtools/src.
    3. Sync changes: Run the sync command to mirror the files into this project.
    yarn sync-src

    Note: yarn sync-src runs automatically during postinstall and prestart hooks.

  11. Build and run Focus Journal using EAS Build

    master

    If you prefer using EAS Cloud builds instead of local native builds, follow these steps:

    1. Configure EAS: Follow the official Expo EAS setup guide to install EAS CLI and register your devices.
    2. Build the Development Client: Run the following commands to create a build for your platform:
      • iOS: eas build --profile development --platform ios
      • Android: eas build --profile development --platform android
    3. Install and Start: Once the build is complete, install the resulting artifact on your device and start the development server:
      npx expo start --dev-client
    # Build for iOS
eas build --profile development --platform ios

# Build for Android
eas build --profile development --platform android

# Start the dev client
npx expo start --dev-client

  12. Configure Adapty credentials in the example app

    master

    The AdaptyDevtools example uses an automated credential setup system. When you run yarn start, the app will prompt you to enter the following values:

    • Adapty API token
    • Placement ID (from your Adapty dashboard)
    • iOS Bundle ID
    • Android Application ID

    These credentials are saved in a .adapty-credentials.json file.

    To force the interactive credential setup to run again, use the yarn credentials-force command.

    yarn credentials-force