Skip to content

README.md

Latest commit

 

History

History
166 lines (115 loc) · 5.24 KB

README.md

File metadata and controls

166 lines (115 loc) · 5.24 KB

Contentful Logo

Contentful Personalization & Analytics

React Native Reference Implementation

Warning

The Optimization SDK Suite is pre-release (alpha). Breaking changes can be published at any time.

This is a reference implementation for the Optimization React Native SDK and is part of the Contentful Optimization SDK Suite.

CDA locale handling

The app defines one locale in env.config.ts, passes it to the React Native SDK as top-level locale, and passes it directly to Contentful CDA entry fetches. Do not use contentful.js withAllLocales or raw CDA locale=* for entries passed to OptimizedEntry; SDK entry resolution expects direct single-locale fields such as fields.nt_experiences and fields.nt_variants. See Locale handling in the Optimization SDK Suite for the broader locale model and Entry personalization and variant resolution for the entry contract.

What this demonstrates

Use this implementation when you need an end-to-end React Native example for Android and iOS app targets. It demonstrates SDK initialization, optimized entry rendering, interaction tracking, navigation/screen tracking, offline behavior, preview-panel scenarios, and Detox E2E coverage.

Prerequisites

  • Node.js >= 20.19.0 (24.13.0 recommended to match .nvmrc)
  • pnpm 10.x
  • An Android emulator available and running for Android Detox flows
  • Xcode with an iOS Simulator available for iOS Detox flows

Setup

Run all steps from the monorepo root.

  1. Install pnpm packages:

    pnpm install

  2. Build and package SDK tarballs used by this implementation:

    pnpm build:pkgs

  3. Install implementation dependencies:

    pnpm implementation:run -- react-native-sdk implementation:install

See implementations/react-native-sdk/package.json for more commands.

Running E2E tests

Android E2E tests use Detox. Run these commands from the monorepo root.

  1. Run the full Android E2E flow:

    pnpm implementation:run -- react-native-sdk test:e2e:android:full

  2. Build Android Detox binaries:

    pnpm implementation:run -- react-native-sdk test:e2e:android:build

  3. Run Android Detox tests only:

    pnpm implementation:run -- react-native-sdk test:e2e:android:run

  4. Pass script arguments through to the one-shot runner:

    pnpm implementation:run -- react-native-sdk test:e2e:android:full -- --test-file e2e/offline-behavior.test.js

    The one-shot Android command:

    • creates .env from .env.example for E2E
    • starts the mock server and Metro
    • configures adb reverse
    • builds the Android app (unless skipped)
    • runs Detox tests
    • cleans up background processes

  5. Useful one-shot variants:

    Skip rebuild if the app is already built:

    SKIP_BUILD=true pnpm implementation:run -- react-native-sdk test:e2e:android:full

    Run one test file:

    pnpm implementation:run -- react-native-sdk test:e2e:android:full -- --test-file e2e/offline-behavior.test.js

    Run tests matching a name pattern:

    pnpm implementation:run -- react-native-sdk test:e2e:android:full -- -t "should recover gracefully when network is restored"

  6. Run iOS Detox commands when needed:

    pnpm implementation:run -- react-native-sdk test:e2e:ios:build
pnpm implementation:run -- react-native-sdk test:e2e:ios:run

Increasing E2E logging

Local Android E2E logging is intentionally minimal by default.

  1. Enable script/service logs (Metro, mock server, and adb logcat stream):

    STREAM_BACKGROUND_LOGS=true ENABLE_DEVICE_LOGCAT=true METRO_VERBOSE=true pnpm implementation:run -- react-native-sdk test:e2e:android:full

  2. Increase Detox runner logging and artifacts:

    pnpm --dir implementations/react-native-sdk --ignore-workspace exec detox test --configuration android.emu.debug --loglevel trace --record-logs all --take-screenshots failing --record-videos failing

  3. Read generated logs:

    • implementations/react-native-sdk/logs/mock-server.log
    • implementations/react-native-sdk/logs/metro.log
    • implementations/react-native-sdk/logs/device.log
    • implementations/react-native-sdk/logs/test-results.log

Related