A React Native SDK for creating dynamic, remotely configurable onboarding experiences in your mobile app. Muta allows you to create, update, and A/B test your onboarding flows without deploying app updates or writing a single line of code.

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
  • πŸ“Š Analytics integration - Track user behavior with any analytics provider
  • πŸ“ User input collection - Gather text and multiple choice responses
  • πŸ’ͺ Full TypeScript support
  • πŸͺΆ Extremely lightweight

Installation

Choose your package manager:

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

For React Native CLI projects, install iOS dependencies:

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 */}
    </>
  );
}
  1. 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