React Native

Welcome to the React Native Otomo Widget installation guide. This document outlines the steps necessary to integrate the Otomo Widget into your React Native project efficiently.

1. Adding the package

   Depending on your preference of either npm or yarn, open your terminal or console and execute one of the following commands:

• npm

  npm install @otomo.ai/react-native-otomo-widget

• yarn

  yarn add @otomo.ai/react-native-otomo-widget

2. Adding dependencies

   To your package.json file, add the following dependencies used within the Otomo widget

   dependencies: {
      ...
      "mixpanel-react-native": "^2.4.0",
      "react-native-svg": "^14.1.0",
   }

3. Installing dependencies

• For Android, no additional configuration is needed.

• For iOS, under your application's iOS directory, run:

  pod install

4. Integrating the widget

   With the package installed, the final step involves importing and integrating the Otomo Widget into your application. Import the OtomoWidget into the components where you wish to utilize it like this:

   
   import { OtomoWidget } from 'react-native-otomo-widget'; // Mandatory import
   
   export default function App() {
     return (
       <View style={styles.container}>
         <SafeAreaView>
           {/* Widget Integration */}
           <OtomoWidget apiKey={'YOUR_API_KEY'} userId={'OPTIONAL_END_USER_ID'} title={'OPTIONAL_TITLE'}/>
         </SafeAreaView>
       </View>
     );
   }

• Understanding Optional Parameters:

  • apiKey: Required. Reach out to [email protected] if you need one generated.

    userId: Optional, but recommended. Include this parameter if you wish to enable personalization features for your end users. It can be omitted if personalization is not required.

    title: Optional. This parameter allows you to set a custom title for the widget. It can be excluded if you prefer to use the default widget title.

    Note: To omit optional parameters, simply remove them from the <OtomoWidget /> component's properties. For example, if you do not require personalization, your widget integration might look like this:

    <OtomoWidget apiKey={'YOUR_API_KEY'} title={'OPTIONAL_TITLE'}/>

Final Notes

Congratulations! You have successfully integrated the React Native Otomo Widget into your project. This widget is designed to enhance your application's functionality by providing a seamless integration of our personal wellness recommendation engine. Should you encounter any issues or require further assistance, please contact [email protected].