React Native SDK

​

Features

• 🎨 No-code editor - Design and update flows with a drag-and-drop interface
• 🚀 Remote updates - Modify onboarding flows instantly without app releases
• ✨ Rich components - Buttons, text, images, shapes, and icons
• 🔄 Smooth transitions - Fade and slide animations
• 🔧 Code Screens - Inject native components into remotely configured flows
• 📊 Analytics integration - Track user behavior with any analytics provider
• 📝 User input collection - Gather text and multiple choice responses
• 💪 Full TypeScript support
• 🪶 Extremely lightweight

​

Installation

# Using npm
npm install @mutalabs/react-native-muta react-native-webview

# Using yarn
yarn add @mutalabs/react-native-muta react-native-webview

cd ios && pod install

Note: If you’re using Expo:

• The pod install step is not required
• You cannot use Expo Go - you must create a fresh development build
• Follow the official Expo guide to create a development build: Creating Development Builds

​

Quick Start

1. Add the MutaRoot component to your app:

import { MutaRoot, Muta } from '@mutalabs/react-native-muta';

function App() {
  return (
    <>
      <MutaRoot apiKey="your-api-key" />
      {/* Your app content */}
    </>
  );
}

2. Display a placement:

// Basic usage
Muta.displayPlacement({
  placementId: 'your-placement-id',
  bgColor: '#000000' // Should match your first placement screen's background color
})

// With custom loading screen and presentation type
Muta.displayPlacement({
  placementId: 'your-placement-id',
  bgColor: '#000000', // Should match your first placement screen's background color
  loadingScreen: <YourCustomLoadingScreen />,
  presentationType: 'fade' // 'slide' | 'fade' | 'none'
})

​

Next Steps

• Learn about Code Screens for native component injection
• Learn about User Input Collection
• Explore Analytics Integration
• Understand Error Handling
• View the API Reference