​
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'
  | 'user_input_final'
  | 'error'
  | '*'

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
}

​
UserInputFinalEvent

interface UserInputFinalEvent extends MutaEvent {
  type: 'user_input_final'
  userInputs: {
    multipleChoices: {
      screenIndex: number
      screenName: string
      isRequired: boolean
      selections: { choiceText: string; choiceIndex: number }[]
    }[]
    textInputs: {
      screenIndex: number
      screenName: string
      value: string
      placeholder: string
      isRequired: boolean
    }[]
  }
}

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

​
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'
  | 'user_input_final'
  | 'error'
  | '*'

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
}

​
UserInputFinalEvent

interface UserInputFinalEvent extends MutaEvent {
  type: 'user_input_final'
  userInputs: {
    multipleChoices: {
      screenIndex: number
      screenName: string
      isRequired: boolean
      selections: { choiceText: string; choiceIndex: number }[]
    }[]
    textInputs: {
      screenIndex: number
      screenName: string
      value: string
      placeholder: string
      isRequired: boolean
    }[]
  }
}

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