​
Components

​
MutaRoot

The root component that initializes the SDK and manages placements. 
<MutaRoot apiKey={string} />

​
Props

PropTypeRequiredDescription
apiKeystringYesYour Muta API key

​
Methods

​
Muta.displayPlacement()

Displays a placement in a modal overlay. 
interface DisplayPlacementOptions {
  placementId: string
  loadingScreen?: React.ReactNode
  bgColor: string // Should match your first placement screen's background color
  presentationType?: 'slide' | 'fade' | 'none'
}

Muta.displayPlacement(options: DisplayPlacementOptions)

​
Options

OptionTypeRequiredDescription
placementIdstringYesThe ID of the placement to display
loadingScreenReact.ReactNodeNoA custom React component to show while the placement is loading
bgColorstringYesBackground color that matches your first placement screen. This creates a seamless transition between your app and the placement.
presentationType'slide' | 'fade' | 'none'NoAnimation style when showing the placement. Defaults to ‘slide’.

​
Muta.on()

Subscribe to Muta events. 
type MutaEventType = 
  | 'flow_started'
  | 'screen_viewed'
  | 'flow_completed'
  | 'flow_abandoned'
  | 'error'
  | string  // Any custom event name
  | '*'    // Listen to all events

type MutaEventCallback = (event: MutaEvent) => void

function on(eventType: MutaEventType, callback: MutaEventCallback): { remove: () => void }

​
Parameters

ParameterTypeRequiredDescription
eventTypeMutaEventTypeYesThe type of event to listen for. Use ’*’ to listen to all events.
callbackMutaEventCallbackYesThe callback function to be called when the event occurs.

​
Returns

An object with a remove method to unsubscribe from the event.

​
Types

​
MutaEvent

Base interface for all Muta events. 
interface MutaEvent {
  type: MutaEventType
  timestamp: number
  placementId: string
  flowName?: string
}

​
FlowStartedEvent

interface FlowStartedEvent extends MutaEvent {
  type: 'flow_started'
  totalScreens: number
}

​
ScreenViewedEvent

interface ScreenViewedEvent extends MutaEvent {
  type: 'screen_viewed'
  screenIndex: number
  totalScreens: number
  screenName?: string
}

​
FlowCompletedEvent

interface FlowCompletedEvent extends MutaEvent {
  type: 'flow_completed'
  screenIndex: number
  totalScreens: number
  screenName?: string
}

​
FlowAbandonedEvent

interface FlowAbandonedEvent extends MutaEvent {
  type: 'flow_abandoned'
  screenIndex: number
  totalScreens: number
  lastScreenIndex: number
  screenName?: string
}

​
CustomEvent

interface CustomEvent extends MutaEvent {
  type: string         // Your custom event name
  timestamp: number    // Unix timestamp in ms
  placementId: string  // ID of the placement
  flowName?: string    // Name of the flow (if configured)
  screenIndex?: number // Current screen index
  eventData?: any      // Custom data configured in the editor
}
Custom events are configured in the Muta web editor using the “Emit Event” behavior and can have any name you choose (e.g., 'signup_clicked', 'plan_selected', 'survey_completed').

​
ErrorEvent

interface ErrorEvent extends MutaEvent {
  type: 'error'
  message: string
  code?: string
}

​
Example Usage

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

function App() {
  useEffect(() => {
    // Show placement when needed
    Muta.displayPlacement({
      placementId: 'your-placement-id',
      bgColor: '#1a1a1a', // Should match your first placement screen's background color
      presentationType: 'fade' // Optional: customize the animation
    });
  }, []);

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