Encore React Native SDK

A cross-platform React Native SDK for integrating Encore offers into your mobile apps. This SDK provides the same functionality as the native Encore Swift SDK, with full support for both iOS and Android platforms.

Features

• 🎯 Present offers to users with beautiful, native UI
• 📊 Track entitlements (free trials, discounts, credits)
• 🔄 Automatic state management and caching
• 🎨 Customizable UI configuration
• 📱 Native iOS (Swift Package) and Android (AAR) builds
• ⚡ TypeScript support with full type definitions

Installation

React Native

# Using npm
npm install @encore-sdk/react-native

# Using yarn
yarn add @encore-sdk/react-native

iOS (CocoaPods)

Add to your Podfile:

pod 'encore-react-sdk', :path => '../node_modules/@encore-sdk/react-native'

Then run:

cd ios && pod install

Android

The package auto-links with React Native 0.60+. If you need manual linking:

// android/settings.gradle
include ':encore-react-sdk'
project(':encore-react-sdk').projectDir = new File(rootProject.projectDir, '../node_modules/@encore-sdk/react-native/android')

// android/app/build.gradle
dependencies {
    implementation project(':encore-react-sdk')
}

Quick Start

1. Configure the SDK

import { EncoreProvider } from '@encore-sdk/react-native';

function App() {
  return (
    <EncoreProvider
      config={{
        apiKey: 'your-api-key',
        logLevel: 'debug', // Optional: 'none' | 'debug'
      }}
    >
      <YourApp />
    </EncoreProvider>
  );
}

2. Identify Users

import { useEncoreContext } from '@encore-sdk/react-native';

function ProfileScreen() {
  const { identify } = useEncoreContext();

  useEffect(() => {
    identify('user-123', {
      email: '[email protected]',
      firstName: 'John',
    });
  }, []);
}

3. Present Offers

import { useEncoreContext } from '@encore-sdk/react-native';

function SubscriptionScreen() {
  const { presentOffers } = useEncoreContext();

  const handleShowOffers = async () => {
    const result = await presentOffers();
    
    if (result?.type === 'granted') {
      console.log('User accepted offer:', result.entitlement);
      // Update UI or grant access
    } else {
      console.log('User declined:', result?.reason);
    }
  };

  return (
    <Button title="View Special Offers" onPress={handleShowOffers} />
  );
}

4. Check Entitlements

import { useIsActive } from '@encore-sdk/react-native';

function PremiumFeature() {
  const { isActive, isLoading } = useIsActive(
    { type: 'freeTrial' },
    'verified'
  );

  if (isLoading) return <LoadingSpinner />;
  
  if (isActive) {
    return <PremiumContent />;
  }

  return <UpgradePrompt />;
}

API Reference

EncoreProvider

The root provider component that configures the SDK.

<EncoreProvider
  config={{
    apiKey: string;
    uiConfiguration?: EncoreUIConfiguration;
    logLevel?: 'none' | 'debug';
  }}
>

useEncoreContext

Hook to access all Encore SDK functionality.

const {
  isConfigured,
  currentUserId,
  identify,
  setUserAttributes,
  reset,
  isActive,
  refreshEntitlements,
  presentOffers,
} = useEncoreContext();

useIsActive

Hook to check if an entitlement is active.

const { isActive, isLoading, refresh } = useIsActive(
  entitlement: Entitlement,
  scope?: EntitlementScope
);

Placement API

import { Encore } from '@encore-sdk/react-native';

// Using the placement API for specific flows
Encore.placement('cancellation_flow')
  .onGranted((entitlement) => {
    console.log('User accepted offer');
  })
  .onNotGranted((reason) => {
    console.log('User declined');
  });

UI Customization

const uiConfig: EncoreUIConfiguration = {
  titleText: 'Special Offer Just for You!',
  subtitleText: 'Claim your exclusive deal below',
  offerDescriptionText: 'Get 3 months premium access',
  creditClaimedTitleText: 'Credit claimed!',
  applyCreditsButtonText: 'Apply credits',
};

<EncoreProvider config={{ apiKey, uiConfiguration: uiConfig }}>

Building Native Packages

iOS Swift Package

npm run build:ios

This creates a Swift Package at dist/ios/EncoreSDK/.

Android AAR

npm run build:android

This creates an AAR file at dist/android/encore-react-sdk.aar.

Build All

npm run build:all

Types

interface Entitlement {
  type: 'freeTrial' | 'discount' | 'credit';
  value?: number;
  unit?: 'months' | 'days' | 'percent' | 'dollars';
}

type EntitlementScope = 'verified' | 'all';

interface EncoreAttributes {
  email?: string;
  firstName?: string;
  lastName?: string;
  // ... additional fields
  custom?: Record<string, string>;
}

type EncorePresentationResult = 
  | { type: 'granted'; entitlement: Entitlement }
  | { type: 'notGranted'; reason: NotGrantedReason };

Requirements

• React Native 0.60+
• iOS 14.0+
• Android API 21+

Support

• Email: [email protected]
• Documentation: https://docs.encore-sdk.com

License

MIT License - see LICENSE file for details.