cb-eretail-reactnativee

cb-eretail-reactnative

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

For FCM Android Supporting

• 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"/>
  

• 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()
  

• 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

• Install react-native-action-button (optional)

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

      cbEretail: { screen: cbEretail }
  

• 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

• Move “routers” and “stack” folder from “node_modules/@react-navigation” to “node_modules/cb-eretail-react-native/@react-navigation”
• Delete “react-native-gesture-handler” from “cb-eretail-reactnative/node_modules”
• Update @babel/core and @babel/runtime to 7.8.0 version
• 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"