React Native Voicebot Integration Guide for Expo (Bare/Ejected) 🤖

This guide provides a streamlined walkthrough for integrating the voicebot-react-native-expo package into your bare minimum or ejected Expo managed React Native project. This guide will not work for projects running solely within the Expo Go app.

🚀 Getting Started

Prerequisites:

• An existing React Native project created with Expo, where you have access to the native Android folder (either a bare minimum project or an ejected managed Expo project).
• Fundamental knowledge of React Native and Expo.

1. Installation 📦

Install the voicebot-react-native-expo package and its dependencies. Navigate to your project's root directory in your terminal and run:

npm i voicebot-react-native-expo; npx voicebot-install

This command takes care of the package installation and automatically sets up the necessary configurations.

If you have already installed the voicebot-react-native-expo package, you can run the following command:

npx voicebot-install

This command will install the package's dependencies.

2. Register kipps-ai Globals 🌎

Import the registerGlobals function from voicebot-react-native-expo/rn and call it within your application:

Option 1: index.js

import { registerGlobals } from 'voicebot-react-native-expo/rn';

registerGlobals(); 

// ...rest of your index.js code

Option 2: App.js

import React, { useEffect } from 'react';
import { registerGlobals } from 'voicebot-react-native-expo/rn'; 

export default function App() {
  useEffect(() => {
    registerGlobals();
  }, []); 

  // ...rest of your App.js code
}

3. Android Configuration 🤖

After running the installation, you need to adjust the minSdkVersion in your android/app/build.gradle file to at least 24.

1. Open your android/app/build.gradle file in a text editor.

2. Locate the defaultConfig section.

3. Within the defaultConfig block, find the line minSdkVersion and make sure it's set to 24 or higher ans targetSdkVersion 31. It should look something like this:

   defaultConfig {
       // ... other configurations
       minSdkVersion 24 
       targetSdkVersion 31
       // ... other configurations
   }

4. Integrate the VoiceBotButton Component 📞

1. Import: In your React Native component, import the VoiceBotButton component:

   import { VoiceBotButton } from 'voicebot-react-native-expo';

2. Render: Render the VoiceBotButton component, providing your VoiceBot ID, Caller ID, and Caller Name:

   import React from 'react';
   import { StyleSheet, View, SafeAreaView } from 'react-native';
   import { VoiceBotButton } from 'voicebot-react-native-expo';
   
   export default function App() {
     return (
       <SafeAreaView style={styles.container}>
         <VoiceBotButton 
           voicebot_id="YOUR_KIPPS_VOICEBOT_ID" 
           caller_id="YOUR_KIPPS_CALLER_ID" 
           caller_name="YOUR_KIPPS_CALLER_NAME" 
         />
       </SafeAreaView>
     );
   }
   
   const styles = StyleSheet.create({
     container: {
       flex: 1,
       justifyContent: 'center',
       backgroundColor: '#fff',
     },
   });

   Replace the placeholder values above with your actual VoiceBot credentials.

5. Run Your App! 🎉

You've successfully integrated the voicebot-react-native-expo package! Build and run your Expo app to start using the voicebot features.

Let me know if you have any more questions!