cb-eretail-reactnative

This is a module for Fastmart Eretail App to Integrate Chat Feature for Customer Service.

For FCM Android Supporting

1. On AndroidManifest.xml add :

       <service android:name="io.invertase.firebase.messaging.RNFirebaseMessagingService">
           <intent-filter>
               <action android:name="com.google.firebase.MESSAGING_EVENT"/>
           </intent-filter>
       </service>
   
      <service android:name="io.invertase.firebase.messaging.RNFirebaseInstanceIdService">
           <intent-filter>
               <action android:name="com.google.firebase.INSTANCE_ID_EVENT"/>
           </intent-filter>
       </service>
   
       <receiver android:name="io.invertase.firebase.notifications.RNFirebaseNotificationReceiver"/>
       <!-- -->
        <receiver
               android:enabled="true"
               android:exported="true"
               android:name="io.invertase.firebase.notifications.RNFirebaseNotificationsRebootReceiver">
           <intent-filter>
               <action android:name="android.intent.action.BOOT_COMPLETED"/>
               <action android:name="android.intent.action.QUICKBOOT_POWERON"/>
               <action android:name="com.htc.intent.action.QUICKBOOT_POWERON"/>
               <category android:name="android.intent.category.DEFAULT"/>
           </intent-filter>
       </receiver>
   
       <service android:name="io.invertase.firebase.messaging.RNFirebaseBackgroundMessagingService"/>
         <receiver android:name="io.invertase.firebase.notifications.RNFirebaseBackgroundNotificationActionReceiver"
                   android:exported="true">
             <intent-filter>
                 <action android:name="io.invertase.firebase.notifications.BackgroundAction"/>
             </intent-filter>
         </receiver>
       <service android:name="io.invertase.firebase.notifications.RNFirebaseBackgroundNotificationActionsService"/>

2. On MainApplication.java add :
   a. Import

       import io.invertase.firebase.messaging.RNFirebaseMessagingPackage;
       import io.invertase.firebase.links.RNFirebaseLinksPackage;
       import io.invertase.firebase.config.RNFirebaseRemoteConfigPackage;
       import io.invertase.firebase.notifications.RNFirebaseNotificationsPackage;
       import io.invertase.firebase.instanceid.RNFirebaseInstanceIdPackage;

   b. On getPackages() return , add :

       new RNFirebaseInstanceIdPackage(),
       new RNFirebaseMessagingPackage(),
       new RNFirebaseLinksPackage(),
       new RNFirebaseRemoteConfigPackage(),
       new RNFirebaseNotificationsPackage()

3. On app/build.gradle put in :

   implementation 'com.google.firebase:firebase-config:17.0.0'
   implementation 'com.google.firebase:firebase-invites:17.0.0'
   implementation 'com.google.firebase:firebase-messaging:18.0.0'

Add Menu Chat

1. Install react-native-action-button (optional)

2. On navigator.js
   a. import { App as cbEretail } from 'cb-eretail-reactnative'
   b. in the part of appNavigator add :

       cbEretail: { screen: cbEretail }

3. in the part of "screens/home/index.js"

   • Import :

       import ActionButton from 'react-native-action-button'
       import Icon from 'react-native-vector-icons/Ionicons'
       import firebase from 'react-native-firebase'
       import { chatbotEretailFirebaseMessagingService } from 'cb-eretail-reactnative'
       import type { Notification } from 'react-native-firebase'

   • To receive notifications and forward messages from FCM to the chatbot module, we do this by entering the firebase code in the componentdidmount lifecycle as follows:

       this.removeNotificationListener = firebase.notifications().onNotification((remoteMessage: Notification) => {              chatbotEretailFirebaseMessagingService.NotificationActivity.onMessageReceived(remoteMessage)
       });

   • and also on componentWillUnmount lifecycle :

   	this.removeNotificationListener()

   • for chat menu button we use Action-Button from 'react-native-action-button' and put it after ScrollView component :

   <ActionButton
         buttonColor={color.darkBlue}
         onPress={() => {
           navigation.navigate("cbEretail", { client: user });
         }}
         renderIcon={active => active ? (<Icon name="md-cut" style={styles.actionButtonIcon} />) : (<Icon name="md-mail-sharp" style={styles.actionButtonIcon} />)}
       />

   actionButtonIcon: {
       fontSize: 20,
       height: 22,
       color: 'white',
   }

Environment Obstacle Prequisites

1. Move “routers” and “stack” folder from “node_modules/@react-navigation” to “node_modules/cb-eretail-react-native/@react-navigation”
2. Delete “react-native-gesture-handler” from “cb-eretail-reactnative/node_modules”
3. Update @babel/core and @babel/runtime to 7.8.0 version
4. put it dependencies into package.json :

   "react-native-linear-gradient": "^2.5.6"
   "react-native-reanimated": "^1.13.0"
   "react-native-safe-area-context": "^3.1.7"
   "@react-native-async-storage/async-storage": "^1.13.2"
   "@notifee/react-native": "^0.15.2"