API Reference

<MutaRoot apiKey={string} />

interface DisplayPlacementOptions {
  placementId: string
  loadingScreen?: React.ReactNode
  bgColor: string // Should match your first placement screen's background color
  presentationType?: 'slide' | 'fade' | 'none'
  injectedScreens?: Array<{
    screenName: string
    component: React.ComponentType<CodeScreenProps>
  }>
}

interface CodeScreenProps {
  onContinue: () => void
  onBack: () => void
  variables: any[]
  screenId: string
  screenIndex: number
}

Muta.displayPlacement(options: DisplayPlacementOptions)

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 }

interface MutaEvent {
  type: MutaEventType
  timestamp: number
  placementId: string
  flowName?: string
}

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

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

interface FlowCompletedEvent extends MutaEvent {
  type: 'flow_completed'
  screenIndex: number
  totalScreens: number
  screenName?: string
  eventData?: {           // Optional: Contains collected variables
    variables: Record<string, any>  // Variable IDs mapped to their values
  }
}

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

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
}

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

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