Getting Started

react-native-encore-mock runs in mock mode with no native build and no API key. You can wire the whole offer flow into any React Native app in minutes.

Prerequisites

Node.js ≥ 18.
A React Native app — bare RN or Expo with a dev build (not Expo Go, since going live later needs a native module). Peer deps: react >= 18, react-native >= 0.70.

Install

npm install react-native-encore-mock

Wire it up

1. Config — your key, the mock switch, and your placement IDs in one place:

src/lib/encoreConfig.js

export const ENCORE_API_KEY = 'pk_your_api_key_here'; // inert in mock mode
export const USE_MOCK = true;
export const Placements = { CancellationFlow: 'cancellation_flow' };

2. The indirection — one client, used everywhere:

src/lib/encore.js

import { createMockEncore, MockEncoreProvider, isGranted } from 'react-native-encore-mock';
// import realEncore, { EncoreProvider as RealProvider } from '@tryencorekit/react-native';
import { USE_MOCK } from './encoreConfig';
 
const mockClient = createMockEncore(); // or createMockEncore({ offers })
 
const Encore = USE_MOCK ? mockClient : realEncore;
export { isGranted };
export { mockClient as encoreClient };
export default Encore;

3. Wrap + register callbacks at the root:

App.js

import { MockEncoreProvider, useEncoreCallbacks } from 'react-native-encore-mock';
import Encore, { encoreClient } from './src/lib/encore';
import { billing } from './src/lib/billing';
 
function Root() {
  useEncoreCallbacks(Encore, {
    purchase: (productId) => billing.purchase(productId), // YOUR billing
    onResume: (placementId) => {/* resume the user's action */},
  });
  return <YourApp />;
}
 
export default () => (
  <MockEncoreProvider client={encoreClient} apiKey="pk_your_api_key_here">
    <Root />
  </MockEncoreProvider>
);

4. Present an offer anywhere:

const result = await Encore.placement('cancellation_flow').show();
if (isGranted(result)) entitleUser();

Mock mode bundles with zero native deps. If your encore.js imports the real @tryencorekit/react-native in a dormant branch, alias it to a stub in metro.config.js so Metro can resolve it while it isn’t installed. See Mock vs Live Mode.

Try the example app

Hotspot Havoc wires all of the above into its menu (Pro paywall → sponsored win-back). In that project:

npm install
npm run ios     # Expo dev build; mock mode needs no extra native module

Tap Go Pro → Maybe later to see the brand-sponsored partner carousel.

Video Walkthrough Architecture