> ## Documentation Index
> Fetch the complete documentation index at: https://docs.mutalabs.com/llms.txt
> Use this file to discover all available pages before exploring further.

# React Native SDK

> Create dynamic, remotely configurable onboarding experiences in your React Native mobile app

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
* 🔧 **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

Choose your package manager:

```bash theme={null}
# Using npm
npm install @mutalabs/react-native-muta react-native-webview
```

```bash theme={null}
# Using yarn
yarn add @mutalabs/react-native-muta react-native-webview
```

For React Native CLI projects, install iOS dependencies:

```bash theme={null}
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](https://docs.expo.dev/develop/development-builds/create-a-build/)

## Quick Start

1. Add the MutaRoot component to your app:

```tsx theme={null}
import { MutaRoot, Muta } from '@mutalabs/react-native-muta';

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

2. Display a placement:

```tsx theme={null}
// 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](/sdk/react-native/code-screens) for native component injection
* Learn about [User Input Collection](/sdk/react-native/user-input)
* Explore [Analytics Integration](/sdk/react-native/analytics)
* Understand [Error Handling](/sdk/react-native/error-handling)
* View the [API Reference](/sdk/react-native/api-reference)