Resync React Native

A powerful React Native library for dynamic content management and rendering. Resync allows you to create, manage, and display dynamic content blocks in your React Native applications with support for forms, lists, sections, and interactive elements.

Features

• 🎨 Dynamic Content Rendering - Render content blocks defined in your Resync dashboard
• 📱 React Native Components - Native components for text, buttons, images, inputs, and more
• Icon - Render Icons with React Native SVG and Lucide.
• 📋 Form Support - Complete form rendering with validation and submission handling
• 📊 List Components - Dynamic lists with static data, API integration, or database sources
• 🎯 Interactive Elements - Click actions, navigation, and custom function handling
• 🔧 Customizable Styling - Full control over component appearance and layout
• 📈 Analytics Integration - Built-in event tracking and analytics support
• 🚀 TypeScript Support - Full TypeScript definitions for better development experience

Installation

npm install resync-react-native
# or
yarn add resync-react-native

Peer Dependencies

This library requires React Native SVG and Lucide as peer dependencies for Icons:

npm react-native-svg, lucide-react-native

For storage, you can use React Native Async Storage

Quick Start

1. Initialize Resync

import Resync from 'resync-react-native';

// Initialize Resync with your API credentials as early as possible
Resync.init({
  key: 'your-api-key',
  appId: 7,
  callback: async () => {
    console.log('Resync initialized');
  },
  storage: AsyncStorage, // or storage library with similar api
  environment: 'sandbox'
});

// Cache TTL is set automatically:
// - Development: 0ms (no caching, always fresh)
// - Production: 6 hours (21600000ms)

2. Render Campaigns or Content Blocks

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

// Campaign
export default function App() {
  return (
    <ResyncCampaignView
      name="Summer Sales"
    />
  );
}

// Content
export default function App() {
  return (
    <ResyncContentBlock
      name="HomeWelcomeCard"
    />
  );
}

3. Remote Config

For dynamic content & configuration

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

export default function App() {

  const { getConfig } = useResync();

  // In this way, you can dynamically render different views on the fly, without ever coming back to manually update the view
  const HOME_VIEW = getConfig('HOME_VIEW');

  return (
    <ResyncContentBlock
      name={HOME_VIEW}
    />
  );
}

4. Event Logging

You can log custom events in any part of your application

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

export default function App() {

// log custom event you created on the dashboard
useEffect(() => {
    Resync.logEvent({
      eventId: 'evt_app_loaded'
    });
  }, [])

  return (
    <View>
      <Text>Hello World</Text>
    </View>
  );
}

API Reference

ResyncContentBlock

The main component for rendering dynamic content blocks.

Props

Prop	Type	Required	Description
name	string	✅	Name of the content view to render
loadingComponent	React.ReactNode	❌	Custom loading component
errorComponent	React.ReactNode	❌	Custom error component
emptyComponent	React.ReactNode	❌	Custom empty state component
functionRegistry	FunctionRegistry	❌	Custom functions for element interactions
navigationRegistry	NavigationRegistry	❌	Navigation functions for click actions
logAnalytics	LogAnalytics	❌	Analytics logging function

Advanced Usage

Custom Function Registry

const functionRegistry = {
  // names of functions passed to a specifc content item in visual editor
  handleButtonClick: (data) => {
    console.log('Button clicked with data:', data);
  },
  handleFormSubmit: (formData) => {
    console.log('Form submitted:', formData);
  },
};

<ResyncContentBlock
  name="MyContentView"
  functionRegistry={functionRegistry}
/>

Navigation Integration

It is advised to use deep linking. This can easily be configured on the dashboard

Manual Navigation

If you wish to manually handle navigation, you can use any navigation library, so long as they provide the following methods: navigate, push and goBack.

// with React Navigation
import { useNavigation } from '@react-navigation/native';

const navigation = useNavigation();

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

<ResyncContentBlock
  name="MyContentView"
  navigationRegistry={navigationRegistry}
/>

Analytics Integration

You can create custom events on the dashoard. Events are automatically logged, e.g when a content block is viewed or when a form is submitted. You can also configure events to any content block on the dashboard. Then they will be automatically logged.

For custom analytics like Firebase, Adjust etc

Add the custom log id from Firebase, Adjust etc to the content on the dashboard.

For manual logging

If you wish to manually log events, you can pass a custom logAnalytics function handler:

const logAnalytics = (logId, event) => {
  // Send to your analytics service
  analytics.track(event.type, {
    logId,
    ...event,
  });
};

<ResyncContentBlock
  name="MyContentView"
  logAnalytics={logAnalytics}
/>

Content Types

Sections

Container components that can hold other elements with flexible layouts.

Lists

Dynamic lists that can display data from:

• Static data arrays
• API endpoints

Forms

Complete form rendering with:

• Input validation
• Custom styling
• Submission handling
• Success/error actions

Elements

Individual UI components:

• Text
• Buttons
• Images
• Icons
• Divider
• Inputs (text, email, numeric, etc.)
• Select dropdowns
• Checkboxes
• Radio buttons
• Textareas

Styling

All components support extensive styling options through the Resync dashboard or programmatically:

// Example of styled content
const customStyle = {
  container: {
    backgroundColor: '#f5f5f5',
    padding: 16,
    borderRadius: 8,
  },
  text: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#333',
  },
};

TypeScript Support

The library includes comprehensive TypeScript definitions:

import type {
  ContentView,
  ContentItem,
  FunctionRegistry,
  NavigationRegistry,
  LogAnalytics,
} from 'resync-react-native';

License

MIT

---

Made with create-react-native-library