Muta allows you to collect user inputs during the placement flow, including text inputs and multiple choice selections. These inputs are automatically collected and made available when the flow completes.

​
Example Usage

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

function Onboarding() {
  useEffect(() => {
    // Listen for user input events
    const subscription = Muta.on('user_input_final', (event) => {
      // Access text input values
      event.userInputs.textInputs.forEach(input => {
        console.log(`Input from screen ${input.screenName}:`, input.value);
      });

      // Access multiple choice selections
      event.userInputs.multipleChoices.forEach(choice => {
        console.log(`Choices from screen ${choice.screenName}:`,
          choice.selections.map(s => s.choiceText)
        );
      });
    });

    // Show the placement
    Muta.displayPlacement({
      placementId: 'your-placement-id',
      bgColor: '#000000' // Should match your first placement screen's background color
    });

    return () => subscription.remove();
  }, []);

  return <View style={{ flex: 1 }} />;
}

​
Input Types

​
Text Inputs

{
  screenIndex: number,
  screenName: string,
  value: string,
  placeholder: string,
  isRequired: boolean
}

​
Multiple Choice

{
  screenIndex: number,
  screenName: string,
  isRequired: boolean,
  selections: {
    choiceText: string,
    choiceIndex: number
  }[]
}

​
Event Structure

The user_input_final event provides a comprehensive structure of all collected inputs:

{
  type: 'user_input_final',
  timestamp: number,
  placementId: string,
  flowName?: string,
  userInputs: {
    multipleChoices: {
      screenIndex: number,
      screenName: string,
      isRequired: boolean,
      selections: { choiceText: string, choiceIndex: number }[]
    }[],
    textInputs: {
      screenIndex: number,
      screenName: string,
      value: string,
      placeholder: string,
      isRequired: boolean
    }[]
  }
}

​
Best Practices

  1. Input Validation: Always check the isRequired flag for both text inputs and multiple choices to ensure you have all necessary data.

  2. Error Handling: Implement proper error handling for cases where required inputs are missing.

  3. Data Processing: Process the collected inputs as soon as possible after receiving the user_input_final event to ensure a smooth user experience.

  4. Type Safety: Use TypeScript interfaces to ensure type safety when working with the input data.