React Native Instalily Chat

Importing

Installing the package: npm i react-native-srschat

###Setup

iOS By default, no permissions are available. First, require the setup script in your Podfile:

+ def node_require(script)
+   # Resolve script with node to allow for hoisting
+   require Pod::Executable.execute_command('node', ['-p',
+     "require.resolve(
+       '#{script}',
+       {paths: [process.argv[1]]},
+     )", __dir__]).strip
+ end

# Use it to require both react-native's and this package's scripts:
+ node_require('react-native/scripts/react_native_pods.rb')
+ node_require('react-native-permissions/scripts/setup.rb')

In the same Podfile, call setup_permissions with the permissions you need. Only the permissions specified here will be added:

# …

platform :ios, min_ios_version_supported
prepare_react_native_project!

setup_permissions([
    'Microphone',
    'SpeechRecognition',
])

Then execute pod install in your ios directory (📌 Note that it must be re-executed each time you update this config).

Finally, add the corresponding permissions usage descriptions to your Info.plist. For example:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>

  <!-- 🚨 Keep only the permissions specified in `setup_permissions` 🚨 -->

  <key>NSMicrophoneUsageDescription</key>
  <string>[REASON]</string>

  <key>NSSpeechRecognitionUsageDescription</key>
  <string>[REASON]</string>


  <!-- … -->

</dict>
</plist>

Android Add all wanted permissions to your app android/app/src/main/AndroidManifest.xml file:

<manifest xmlns:android="http://schemas.android.com/apk/res/android">

  <!-- 🚨 Keep only the permissions used in your app 🚨 -->

  <uses-permission android:name="android.permission.RECORD_AUDIO"/>
  
  <!-- Optional but recommended -->
  <uses-feature android:name="android.hardware.microphone" android:required="false"/>

  <queries>
    <!-- Speech Recognition Service -->
    <intent>
      <action android:name="android.speech.RecognitionService"/>
    </intent>
    <!-- Compatibility intent for older flows -->
    <intent>
      <action android:name="android.speech.action.RECOGNIZE_SPEECH"/>
    </intent>
    <!-- Optional: TTS, if you use it -->
    <intent>
      <action android:name="android.intent.action.TTS_SERVICE"/>
    </intent>
    <!-- Optional: explicit Google packages (not required if the intents are present) -->
    <package android:name="com.google.android.googlequicksearchbox"/>
    <package android:name="com.google.android.tts"/>
  </queries>

  <!-- … -->

</manifest>

Note:Even after all the permissions are correct in Android, there is one last thing to make sure this libray is working fine on Android. Please make sure the device has Google Speech Recognizing Engine such as com.google.android.googlequicksearchbox.

Please ask users to install Google Search App (Google App).

Example Use

import React, { useState } from 'react';
import { View, StyleSheet, Button } from 'react-native';
import { Chat } from 'react-native-srschat';

export default function App() {
  const [showIcon, setShowIcon] = useState(true);
  const [toggleChat, setToggleChat] = useState(false);
  const [showWelcome, setShowWelcome] = useState(false);

  const onProductCardClick = (productData) => {
    console.log('Product Card Clicked:', productData);
  };

  const onAddToCartClick = (productData) => {
    console.log('Added to Cart:', productData);
  };

  const data = {
    "env":"stage",
    "brand_version": "landscape", // or "pool"
    "user_id": (the user id logged in)
    "customer_code": "CODE",
    "branch_code": "CODE",
    "active_ship_to": 1,
    "branch_full_name": "FULL_BRANCH_NAME",
    "branch_email": "[email protected]",
    "customer_token": "CUSTOMER_TOKEN",
    "customer_name":"NAME",
    "branch_details": {
      "active_branch_business_hours": "",
      "active_branch_email": "",
      "active_branch_location": "",
      "active_branch_name": "",
      "active_branch_phone": ",
      "active_brand_name": ""
    },
    "user_email":"[email protected]"
    "session": "1234567"
  }

  console.log('Data being passed to Chat:', data);

  const uiConfig = {
    testButtons: false, // show the test buttons for onProductCardClick and onAddToCartClick – defaults to false
    iconType: "button", // "button" or "tab" – defaults to button
    iconPosition: { // ex. button { bottom: 80, right: 20 } tab { bottom: 600, right: 0 } – defaults to { bottom: 80, right: 20 }
      bottom: 80,
      right: 20,
    },
    showIcon: showIcon, // true or false, show the chat icon – no prop defaults to true
    toggleChat: toggleChat // toggle the chat window
    setToggleChat: (value) => setToggleChat(value),
    showWelcome: showWelcome,
    setShowWelcome: (value) => setShowWelcome(value)
  }

  return (
    <>
    <View style={styles.container}>
      <View style={styles.container}>
        <Button title="Toggle Chat" onPress={() => setToggleChat(prev => !prev)}/>
        <Button title="Show Icon" onPress={() => setShowIcon(prev => !prev)} />
      </View>
      <Chat
        data={data}
        onProductCardClick={onProductCardClick}
        onAddToCartClick={onAddToCartClick}
        uiConfig={uiConfig}
      />
    </View>
    </>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#437D3D',
    marginTop: 0,
    paddingTop: 50
  },
});

Note for toggle chat:

• setTogglechat whenever navigates page. Note for toggle showWelcome:
• setShowWelcome whenever see welcome screen vs nonwelcome