​
User Input Collection

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.