Skip to main content

React Native Components

The Resync React Native SDK provides powerful components for rendering dynamic content.

ResyncCampaignView​

Component for rendering campaign variants automatically.

Basic Usage​

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

export default function CheckoutScreen() {
  return (
    <ResyncCampaignView name="checkout_flow_test" />
  );
}

Props​

PropTypeRequiredDescription
namestring✅Name of the campaign
loadingComponentReact.ReactNode❌Custom loading component
errorComponentReact.ReactNode❌Custom error component
emptyComponentReact.ReactNode❌Custom empty state component
functionRegistryFunctionRegistry❌Custom functions for element interactions
navigationRegistryNavigationRegistry❌Navigation functions for click actions
logAnalyticsLogAnalytics❌Analytics logging function

How It Works​

ResyncCampaignView automatically:

  1. Calls getVariant() to get the user's assigned variant
  2. Tracks an impression
  3. Fetches the content view for that variant
  4. Renders it natively

No manual variant logic needed!

With Conversion Tracking​

import Resync from 'resync-react-native';

export default function CheckoutScreen() {
  const handlePurchase = async (orderId) => {
    // Track conversion
    await Resync.logEvent({
      // If this is a campaign goal event, it will be registered as a conversion to the campaign
      eventId: 'evt_purchase_completed', // campaign goal event created on the dashboard
      metadata: {
        orderId,
        amount: 1000,
        // any other data
      }
    });
  };

  return (
    <Button title="Purchase" onPress={handlePurchase} />
  );
}

ResyncContentBlock​

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

Basic Usage​

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

export default function HomeScreen() {
  return (
    <ResyncContentBlock name="WelcomeCard" />
  );
}

Props​

PropTypeRequiredDescription
namestring✅Name of the content view to render
loadingComponentReact.ReactNode❌Custom loading component
errorComponentReact.ReactNode❌Custom error component
emptyComponentReact.ReactNode❌Custom empty state component
functionRegistryFunctionRegistry❌Custom functions for element interactions
navigationRegistryNavigationRegistry❌Navigation functions for click actions
logAnalyticsLogAnalytics❌Analytics logging function

With Custom Loading​

import { ResyncContentBlock } from 'resync-react-native';
import { ActivityIndicator, View } from 'react-native';

export default function HomeScreen() {
  return (
    <ResyncContentBlock 
      name="WelcomeCard"
      loadingComponent={
        <View style={{ flex: 1, justifyContent: 'center' }}>
          <ActivityIndicator size="large" />
        </View>
      }
    />
  );
}

With Navigation​

import { ResyncContentBlock } from 'resync-react-native';
import { useNavigation } from '@react-navigation/native';

export default function HomeScreen() {
  const navigation = useNavigation();

  const navigationRegistry = {
    navigate: (routeName, params) => navigation.navigate(routeName, params),
    push: (routeName, params) => navigation.push(routeName, params),
    goBack: () => navigation.goBack(),
  };

  return (
    <ResyncContentBlock
      name="WelcomeCard"
      navigationRegistry={navigationRegistry}
    />
  );
}

With Custom Functions​

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

export default function FormScreen() {
  const functionRegistry = {
    handleFormSubmit: async (formData) => {
      console.log('Form submitted:', formData);
      await sendToAPI(formData);
    },
    handleButtonClick: (data) => {
      console.log('Button clicked:', data);
    },
  };

  return (
    <ResyncContentBlock
      name="ContactForm"
      functionRegistry={functionRegistry}
    />
  );
}

With Analytics​

import { ResyncContentBlock } from 'resync-react-native';
import analytics from '@react-native-firebase/analytics';

export default function HomeScreen() {
  const logAnalytics = (logId, event) => {
    analytics().logEvent(event.type, {
      logId,
      ...event,
    });
  };

  return (
    <ResyncContentBlock
      name="WelcomeCard"
      logAnalytics={logAnalytics}
    />
  );
}

Content Types​

Sections​

Container components that hold other elements with flexible layouts.

Lists​

Dynamic lists that can display data from static arrays or API endpoints.

Forms​

Complete form rendering with validation, custom styling, and submission handling.

Elements​

Individual UI components available:

  • Text - Display text content
  • Buttons - Interactive buttons with click actions
  • Images - Display images from URLs
  • Icons - SVG icons from Lucide
  • Divider - Visual separators
  • Inputs - Text, email, numeric, phone, password
  • Select - Dropdown selections
  • Checkboxes - Multiple selection inputs
  • Radio Buttons - Single selection inputs
  • Textareas - Multi-line text inputs

Complete Example​

import React from 'react';
import { SafeAreaView, StyleSheet } from 'react-native';
import { ResyncContentBlock } from 'resync-react-native';
import { useNavigation } from '@react-navigation/native';
import analytics from '@react-native-firebase/analytics';

export default function OnboardingScreen() {
  const navigation = useNavigation();

  const navigationRegistry = {
    navigate: (routeName, params) => navigation.navigate(routeName, params),
    push: (routeName, params) => navigation.push(routeName, params),
    goBack: () => navigation.goBack(),
  };

  const functionRegistry = {
    handleOnboardingComplete: async (userData) => {
      await saveUserData(userData);
      navigation.navigate('Home');
    },
  };

  const logAnalytics = (logId, event) => {
    analytics().logEvent(event.type, {
      logId,
      screen: 'Onboarding',
      ...event,
    });
  };

  return (
    <SafeAreaView style={styles.container}>
      <ResyncContentBlock
        name="OnboardingFlow"
        navigationRegistry={navigationRegistry}
        functionRegistry={functionRegistry}
        logAnalytics={logAnalytics}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

Next Steps​