react-native-mobile-chat

React Native Mobile Chat help you to manage customer relationship with customer conversation feature inside your react native app.

Installation

1. Pre-installation

a. Your app using Firebase Cloud Messaging

b. You have created mobile chat channel integration in mobile chat integration page and make sure you have done on the following step

• Add package name or bundle id of your app
• Fill server key form from your console firebase (Project settings -> Cloud Messaging -> Cloud Messaging API (Legacy) -> Token)

2. Install dependency

This package have dependency with React Native WebView, so you have to install it first by command line below, skip this step if you have already installed (listed on package.json dependenies)

npm install --save react-native-webview

3. Install React Native Mobile Chat

npm install --save react-native-mobile-chat

4. Add permissions

Info.plist in iOS project

Add NSMicrophoneUsageDescription and NSCameraUsageDescription to Info.plist file

AndroidManifest.xml in Android project

Add permission below

<uses-permission android:name="android.permission.POST_NOTIFICATIONS"/>
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.CAMERA" />

Usage

Initialization

Implement this initialization function as early as possible in your app

initMobileChat(
    appId: string, 
    clientId: string, 
    clientSecret: string, 
    externalId: string, 
    fullName: string
) : string

Parameter appId, clientId, clientSecret can be found in integration page. ParameterexternalId is your customer unique identifier and fullName is your customer full name "Subagya Irianto".

Example initialization with customer unique id "MY_EXT_ID" and customer full name

//...
import { initMobileChat } from 'react-native-mobile-chat';
import {APP_ID, CLIENT_ID, CLIENT_SECRET} from '../your-constant-directory'

class RootApp extends Component {
  componentDidMount() {
    //...
    
    initMobileChat(
      APP_ID, 
      CLIENT_ID, 
      CLIENT_SECRET, 
      'MY_EXT_ID', 
      'Subagya Irianto')
    
    //... 
  }

  render() {
    //...
  }
}

Conversation feature

MobileChatComponent used by your customer to make conversation with your agents. This component only have one property to implement, onBackButtonTapped.

<MobileChatComponent onBackButtonTapped={ //Your back button function } />

Example implementation using React Navigation :

//...
import { MobileChatComponent } from 'react-native-mobile-chat';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { NavigationContainer } from '@react-navigation/native';

const Stack = createNativeStackNavigator();

class HomePage extends Component {
    //..
    render() {
        return (
        //..
            <View>
                <Button title='OPEN Mobile Chat' onPress={() => this.props.navigation.navigate('CustomerCarePage')} />
            </View>
        //..
        )
    }
}

class CustomerCarePage extends Component {
    render() {
        return (
            <View style={{ flexDirection: 'column', flex: 1 }}>
                <MobileChatComponent onBackButtonTapped={() => this.props.navigation.goBack() } />
            </View>
        )
    }
}

class RootApp extends Component {
  //...

  render() {
    return (
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Group screenOptions={{ orientation: 'portrait' }}>
            <Stack.Screen key={"HomePage"} name={"HomePage"} component={HomePage} } />
            <Stack.Screen key={"CustomerCarePage"} name={"CustomerCarePage"} component={CustomerCarePage} } />
            //...
          </Stack.Group>
        </Stack.Navigator>
      </NavigationContainer>
    )
  }
}

Notification feature

Register your customer fcm token to mobile chat server to get notification from agent

registerMobileChatNotification(fcmToken: string) : string

To distinct mobile chat payload and your own payload, use this function

isMobileChatPayload() : boolean

To get state of mobile chat component is opened or not

isMobileChatOpened() : boolean

To stop getting notification, implement function below. This can be used when your customer logout from your app.

revokeNotification() : string

Example implementation of notification feature using React Native Firebase :

//...
import messaging from '@react-native-firebase/messaging'
import { isMobileChatOpened, isMobileChatPayload, registerMobileChatNotification } from 'react-native-mobile-chat';

class RootApp extends Component {

  //Register user fcm token to get notification
  getToken = async () => {
    await messaging().registerDeviceForRemoteMessages();
    const fcmToken = await messaging().getToken();
    registerMobileChatNotification(fcmToken)    
  }
    
  componentDidMount() {
    //...
    
    getToken()

    //Handle notification in foreground
    //Show alert with option : Dismiss and Open Customer Care
    messaging().onMessage(fgPayload => {
      if (!isMobileChatPayload(payload)) {
        if (!isMobileChatOpened()) {
          Alert.alert('Foreground notif', 
          `${fgPayload.notification?.title}\n${fgPayload.notification?.body}`, [
            {
              text: 'Dismiss',
              onPress: () => console.log('Dismiss Pressed'),
              style: 'cancel',
            },
            { text: 'Open Customer Care', onPress: () => this.props.navigation.navigate('CustomerCarePage') },
          ]);
        }
      }
    })
    
    //Handle notification in background tapped (app isn't killed)
    //When notification tapped -> automatically open CustomerCarePage
    messaging().onNotificationOpenedApp(payload => {
      if (isMobileChatPayload(payload)) {
        this.props.navigation.navigate('CustomerCarePage')
      }
    })
    
    //Handle notification in background tapped (app killed)
    //When notification tapped -> automatically open CustomerCarePage
    messaging().getInitialNotification().then(payload => {
      if (payload == null) return
      if (isMobileChatPayload(payload)) {
        this.props.navigation.navigate('CustomerCarePage')
      }
    })
    //... 
  }

  render() {
    //...
  }
}

License

MIT

Made with create-react-native-library