React Native Voicebot Integration Guide 🚀

This guide provides a step-by-step walkthrough for seamlessly integrating the voicebot-react-native-cli package into your React Native project, enabling powerful voicebot functionality.

✨ Getting Started

Prerequisites

• Basic understanding of React Native concepts and the React Native CLI project/app.

1. Install the Package and Dependencies

Kick off your integration by installing the voicebot-react-native-cli package and its dependencies. Open your terminal and navigate to your React Native project's root directory, then execute the following command:

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

if you have already installed the voicebot-react-native-cli package then execute the following command:

npx voicebot-install

This command will install the important dependencies and automatically set up the necessary configurations for you.

2. Android Configuration 🤖

Link Vector Icons

Manually link the react-native-vector-icons library: in your android/app/build.gradle file, add the following

apply from: file("../../node_modules/react-native-vector-icons/fonts.gradle")

3. Update minSdkVersion and targetSdkVersion

1. Open your android/app/build.gradle file.

2. Locate the defaultConfig section and ensure minSdkVersion is set to at least 24:

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

4. Register Kipps Globals 🌎

In your project's index.js file, import the registerGlobals function and call it:

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

registerGlobals();

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

5. Integrate the VoiceBotButton Component 📞

1. Import the VoiceBotButton component into your React Native component:

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

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

   import React from 'react';
   import { StyleSheet, View } from 'react-native';
   import { VoiceBotButton } from 'voicebot-react-native-cli'; 
   
   export default function App() {
     return (
       <View style={styles.container}>
         <VoiceBotButton 
           voicebot_id="YOUR_VOICEBOT_ID"
           caller_id="YOUR_CALLER_ID" 
           caller_name="YOUR_CALLER_NAME" 
         />
       </View>
     );
   }
   
   const styles = StyleSheet.create({
     container: {
       flex: 1,
       justifyContent: 'center',
       alignItems: 'center',
     },
   });

   Make sure to replace the placeholder values with your actual VoiceBot credentials.

5. Run Your App! 🎉

That's it! You have successfully integrated the voicebot-react-native-cli package into your React Native project. Build and run your app to start using the voicebot functionality.

Troubleshooting:

• If you encounter any issues with MainApplication.kt, carefully review the file for conflicting code or redundant functions.
• For advanced usage and customization options, consult the voicebot-react-native-cli package documentation.