React Native Examples

Practical examples for using Resync in React Native applications.

Basic App Setup

import React, { useEffect } from 'react';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import Resync from 'resync-react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';

const Stack = createNativeStackNavigator();

export default function App() {
  useEffect(() => {
    initializeResync();
  }, []);

  const initializeResync = async () => {
    try {
      await Resync.init({
        key: process.env.RESYNC_API_KEY,
        appId: 7,
        storage: AsyncStorage,
        callback: () => {
          console.log('Resync initialized');
        },
        environment: 'production',
      });
    } catch (error) {
      console.error('Failed to initialize Resync:', error);
    }
  };

  return (
    <SafeAreaProvider>
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen name="Home" component={HomeScreen} />
          <Stack.Screen name="Profile" component={ProfileScreen} />
        </Stack.Navigator>
      </NavigationContainer>
    </SafeAreaProvider>
  );
}

Render Campaign

import React from 'react';
import { SafeAreaView, StyleSheet } from 'react-native';
import { ResyncCampaignView, useResync } from 'resync-react-native';

export default function HomeScreen() {
  return (
    <SafeAreaView style={styles.container}>
      <ResyncCampaignView name="July Promo" />
    </SafeAreaView>
  );
}

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

Dynamic Content Screen

import React from 'react';
import { SafeAreaView, StyleSheet } from 'react-native';
import { ResyncContentView, useResync } from 'resync-react-native';

export default function HomeScreen() {
  const {getConfig} = useResync();
  const HOME_VIEW = getConfig('HOME_VIEW');
  return (
    <SafeAreaView style={styles.container}>
      <ResyncContentView name={HOME_VIEW} />
    </SafeAreaView>
  );
}

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

With Custom Navigation Integration (Optional)

import React from 'react';
import { SafeAreaView } from 'react-native';
import { ResyncContentView } from 'resync-react-native';
import { useNavigation } from '@react-navigation/native';

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(),
  };

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <ResyncContentView
        name="OnboardingFlow"
        navigationRegistry={navigationRegistry}
      />
    </SafeAreaView>
  );
}

Form with Custom Submit Handler (Optional)

import React from 'react';
import { SafeAreaView, Alert } from 'react-native';
import { ResyncContentView } from 'resync-react-native';
import { useNavigation } from '@react-navigation/native';

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

  const functionRegistry = {
    handleFormSubmit: async (formData) => {
      try {
        // Send to your API
        const response = await fetch('https://api.example.com/contact', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(formData),
        });

        if (response.ok) {
          Alert.alert('Success', 'Form submitted successfully');
          navigation.goBack();
        } else {
          throw new Error('Submission failed');
        }
      } catch (error) {
        Alert.alert('Error', 'Failed to submit form');
      }
    },
  };

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <ResyncContentView
        name="ContactForm"
        functionRegistry={functionRegistry}
      />
    </SafeAreaView>
  );
}

With Manual Analytics Tracking (Optional)

import React from 'react';
import { SafeAreaView } from 'react-native';
import { ResyncContentView } from 'resync-react-native';
import analytics from '@react-native-firebase/analytics';

export default function ProductScreen() {
  const logAnalytics = async (logId, event) => {
    await analytics().logEvent(event.type, {
      logId,
      screen: 'Product',
      ...event.metadata,
    });
  };

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <ResyncContentView
        name="ProductDetails"
        logAnalytics={logAnalytics}
      />
    </SafeAreaView>
  );
}

Remote Config with Hooks

import React, { useState, useEffect } from 'react';
import { View, Text } from 'react-native';
import Resync from 'resync-react-native';

export default function FeatureScreen() {
  const { getConfig } = useResync()

  const featureEnabled = getConfig('ENABLE_NEW_FEATURE')

  return (
    <View>
      {featureEnabled ? <NewFeature /> : <OldFeature />}
    </View>
  );
}

A/B Testing Campaign

import React from 'react';
import { View } from 'react-native';
import { ResyncCampaignView } from 'resync-react-native';
import Resync from 'resync-react-native';

export default function HomeScreen() {
  return (
    <View style={{ flex: 1 }}>
      <ResyncCampaignView
        name="homepage_test"
      />
    </View>
  );
}

// Log Conversion event
// Somewhere in app
await Resync.logEvent({
  eventId: 'evt_signup_completed',
});

How it works:

• ResyncCampaignView automatically assigns a variant
• Tracks impressions automatically
• Renders the correct variant content
• You just track conversions!

User Identification & Attributes

import React, { useEffect } from 'react';
import { View } from 'react-native';
import Resync from 'resync-react-native';

export default function App({ user }) {
  useEffect(() => {
    if (user) {
      setupUser(user);
    }
  }, [user]);

  const setupUser = async (user) => {
    // Set user ID
    await Resync.loginUser(user.id, {
      email: user.email,
      name: user.name,
    });
  };

  return <YourApp />;
}

// Set additional attributes
await Resync.setUserAttributes({
  attributes: {
    subscriptionTier: user.subscription,
    country: user.country,
  },
});

Event Tracking

import React from 'react';
import { TouchableOpacity, Text } from 'react-native';
import Resync from 'resync-react-native';

export default function PurchaseButton({ product }) {
  const handlePurchase = async () => {
    // Track purchase event
    Resync.logEvent({
      eventId: 'evt_purchase_completed',
      metadata: {
        productId: product.id,
        amount: product.price,
        currency: 'USD',
      },
    });

    // Process purchase...
  };

  return (
    <TouchableOpacity onPress={handlePurchase}>
      <Text>Buy Now</Text>
    </TouchableOpacity>
  );
}

More Examples

• Form Tutorial →
• A/B Testing Tutorial →