Skip to main content

React Native API Reference

Complete API reference for the Resync React Native SDK.

For the complete documentation including all methods and examples, see the React Native SDK Overview.

Core Methods​

All core Resync methods are available in React Native, identical to the JavaScript SDK:

Initialization​

Remote Config​

Campaigns​

Events​

User Management​

Content​

Forms​

React Native Specific Components​

ResyncCampaignView​

Main component for rendering campaign variants.

Props:

interface ResyncCampaignViewProps {
  name: string;  // Campaign name
  loadingComponent?: React.ReactNode;
  errorComponent?: React.ReactNode;
  emptyComponent?: React.ReactNode;
  functionRegistry?: FunctionRegistry;
  navigationRegistry?: NavigationRegistry;
  logAnalytics?: LogAnalytics;
}

Example:

import { ResyncCampaignView } from 'resync-react-native';

<ResyncCampaignView 
  name="checkout_test"
  functionRegistry={functionRegistry}
  navigationRegistry={navigationRegistry}
/>

How it works:

  • Automatically calls getVariant() and tracks impression
  • Fetches the assigned variant's content view
  • Renders it natively
  • No manual variant logic needed!

ResyncContentBlock​

Component for rendering regular content blocks (non-campaign).

Props:

interface ResyncContentBlockProps {
  name: string;  // Content view name
  loadingComponent?: React.ReactNode;
  errorComponent?: React.ReactNode;
  emptyComponent?: React.ReactNode;
  functionRegistry?: FunctionRegistry;
  navigationRegistry?: NavigationRegistry;
  logAnalytics?: LogAnalytics;
}

Example:

import { ResyncContentBlock } from 'resync-react-native';

<ResyncContentBlock 
  name="WelcomeCard"
  navigationRegistry={navigationRegistry}
  functionRegistry={functionRegistry}
  logAnalytics={logAnalytics}
/>

Type Definitions​

FunctionRegistry​

type FunctionRegistry = {
  [key: string]: (data: any) => void | Promise<void>;
};
interface NavigationRegistry {
  navigate: (routeName: string, params?: any) => void;
  push: (routeName: string, params?: any) => void;
  goBack: () => void;
}

LogAnalytics​

type LogAnalytics = (logId: string, event: any) => void;

Storage​

For React Native, use AsyncStorage:

import AsyncStorage from '@react-native-async-storage/async-storage';

Resync.init({
  // ...
  storage: AsyncStorage,
});

Platform Compatibility​

The SDK works on:

  • ✅ iOS 12.0+
  • ✅ Android 5.0+
  • ✅ Expo (managed and bare workflows)
  • ✅ React Native v0.64+

Important Notes​

Campaign Rendering​

❌ Don't do this:

// Manual variant handling (unnecessarily complex)
const variant = await Resync.getVariant('campaign_name');
if (variant === 101) {
  return <VariantA />;
} else {
  return <VariantB />;
}

✅ Do this instead:

// Automatic variant handling
<ResyncCampaignView name="campaign_name" />

When to Use getVariant()​

Only use getVariant() manually if you need the variant ID for:

  • Custom analytics
  • Non-rendering logic
  • JavaScript/web applications (no ResyncCampaignView available)

For React Native rendering, always use ResyncCampaignView.

More Information​

For detailed method documentation, see the JavaScript SDK API Reference as all core methods are identical.

For component usage, see Components Documentation.

For practical examples, see Examples.