Components
MutaRoot
The root component that initializes the SDK and manages placements.
<MutaRoot apiKey={string} />
Props
| Prop | Type | Required | Description |
|---|
apiKey | string | Yes | Your 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
| Option | Type | Required | Description |
|---|
placementId | string | Yes | The ID of the placement to display |
loadingScreen | React.ReactNode | No | A custom React component to show while the placement is loading |
bgColor | string | Yes | Background color that matches your first placement screen. This creates a seamless transition between your app and the placement. |
presentationType | 'slide' | 'fade' | 'none' | No | Animation 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
| Parameter | Type | Required | Description |
|---|
eventType | MutaEventType | Yes | The type of event to listen for. Use ’*’ to listen to all events. |
callback | MutaEventCallback | Yes | The 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
}
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 */}
</>
);
}
