React Native Instalily Chat

$3

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:
`





NSMicrophoneUsageDescription
[REASON]

NSSpeechRecognitionUsageDescription
[REASON]






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


























`

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).

$3

`
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": "example@email.com",
"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":"NAME@ADDRESS.COM"
"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 (
<>


setToggleChat(prev => !prev)}/>
setShowIcon(prev => !prev)} />

data={data}
onProductCardClick={onProductCardClick}
onAddToCartClick={onAddToCartClick}
uiConfig={uiConfig}
/>


);
}

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