React Native Zephyr SDK

A React Native SDK for managing remote app versions and updates using the Zephyr platform. This SDK provides version checking, remote app resolution, and storage management for micro-frontends in React Native applications.

Info: To use this SDK, you must use zephyr-repack-plugin in your host application. This SDK is designed to work with Zephyr Cloud's deployment plugin, which injects necessary configuration at build time.

Installation

npm install react-native-zephyr-sdk@latest

Dependencies

This SDK requires the following peer dependencies:

npm install react-native-mmkv@>=3.1.0
npm install react@>=19.0.0
npm install react-native@>=0.78.0

Quick Start

⚙️ Configuration (Custom Storage)

Use this approach when you need to share storage with Repack or customize storage settings:

import {
  ReactNativeZephyrSDK,
  createMmkvInstance,
} from 'react-native-zephyr-sdk';

// For sharing storage with Repack
const sdk = new ReactNativeZephyrSDK({
  storageInstanceName: 'shared-with-repack',
});

// Or with custom MMKV instance
const customStorage = createMmkvInstance('my-custom-storage');
const sdk = new ReactNativeZephyrSDK({
  storage: customStorage,
});

API Reference

Remote App Management

import { zephyrSDK as zeSDK } from '../zephyr.ts';
s;

// Get single remote app information
const result = await zeSDK.getRemoteApp('RemoteAppName');

// Check all remote apps for updates
const allUpdates = await checkAllRemoteUpdates();
if (allUpdates.isUpdated) {
  console.log('Updates available for:', allUpdates.results);
}

// Get current remote URL
const currentUrl = await getCurrentRemoteUrl('RemoteAppName');

Polling Control

// Configure polling interval
zeSDK.setUpdateConfig({ pollingInterval: 30000 });

// Start polling
zeSDK.startPolling(30000); // or startPolling() if interval already set

// Check polling status
if (zeSDK.isPolling()) {
  console.log('Polling is active');
}

// Stop polling
zeSDK.stopPolling();

Information & Debugging

// Get specific remote app info
const remoteInfo = zeSDK.getCurrentRemoteInfo('MyRemoteApp');
console.log(remoteInfo);

// Debug configuration
const values = zeSDK.verifyValues();

🔧 Class API (Advanced Usage)

For advanced scenarios like custom storage or Repack integration:

import { ReactNativeZephyrSDK } from 'react-native-zephyr-sdk';

const sdk = new ReactNativeZephyrSDK({
  storageInstanceName: 'custom-storage', // Optional
  enableDebug: true, // Optional
});

// All the same methods available
const result = await sdk.getRemoteApp('RemoteAppName');
sdk.setPollingInterval(30000);
sdk.startPolling();

📱 React Component Examples

Simple Update Check Component

import React, { useEffect, useState } from 'react';
import { View, Text, Button, Alert } from 'react-native';
import { getRemoteApp, startPolling, stopPolling } from 'react-native-zephyr-sdk';

const UpdateChecker = ({ remoteName = 'MyRemoteApp' }) => {
  const [updateAvailable, setUpdateAvailable] = useState(false);
  const [isPolling, setIsPolling] = useState(false);

  const checkForUpdates = async () => {
    try {
      const result = await getRemoteApp(remoteName);
      setUpdateAvailable(result.isUpdated);

      if (result.isUpdated) {
        Alert.alert(
          'Update Available',
          `New version available for ${remoteName}`,
          [
            { text: 'Later', style: 'cancel' },
            { text: 'Update', onPress: handleUpdate }
          ]
        );
      }
    } catch (error) {
      console.error('Update check failed:', error);
    }
  };

  const handleUpdate = () => {
    // Implement your update logic here
    console.log('Applying update...');
     init({
        name: hostAppName,
        remotes: [{name: remoteAppName, entry: results.availableRemoteUrl}],
      });
  };

  const togglePolling = () => {
    if (isPolling) {
      stopPolling();
    } else {
      startPolling(30000); // Poll every 30 seconds
    }
    setIsPolling(!isPolling);
  };

  useEffect(() => {
    checkForUpdates();
  }, []);

  return (
    <View style={{ padding: 20 }}>
      <Text>Remote App: {remoteName}</Text>
      <Text>Update Available: {updateAvailable ? 'Yes' : 'No'}</Text>

      <Button title="Check for Updates" onPress={checkForUpdates} />
      <Button
        title={isPolling ? 'Stop Auto-Check' : 'Start Auto-Check'}
        onPress={togglePolling}
      />

      {updateAvailable && (
        <Button title="Apply Update" onPress={handleUpdate} />
      )}
    </View>
  );
};

📋 Version Resolution

The SDK supports various version resolution formats in your zephyr:dependencies:

{
  "zephyr:dependencies": {
    "remoteApp1": "^1.0.0",
    "remoteApp2": "workspace:*",
    "remoteApp3": "zephyr:remote_app_uid@latest",
    "remoteApp4": "@app-zephyr/[email protected]"
  }
}

• Semver: "^1.0.0" - Standard semantic versioning
• Workspace: "workspace:*" - Same repository/branch/user conditions
• Zephyr Registry: "zephyr:app_uid@tag" - Specific app UID with tag
• Scoped: "@org/app@version" - Scoped package naming