Zenn
📞

Complete Guide To Build A Chat App In React Native

2021/07/17に公開
React Native
React
#
chat
tech

This article focuses on developing a chat app using react native. But before getting into details it is necessary to have some basic understanding about the tech stacks and its usages.

When it comes to react native, it is an open-source that supports the developers in building the applications across any platform such as Android, iOS, and Web app.

With the chat app market, a recent study per statista, has witnessed a huge success of 1.6Bn WhatsApp users accessing their chat application on a monthly basis.

Key Steps to Build a Real time chat react native

Undoubtedly, today the chat apps are growing vigorously with the top programming language, i.e., react native, making sure to hit another level in the upcoming years.

Therefore, most of the developers are planning to build their own React native chat app. Let's get started with the key steps and related parameters to develop a successful chat app.

Step 1 : Plan A New Project

To develop a new project it is must to focus on a particular platform, and should have a particularized IDE. For instance, if you are planning to build only for the iOS platform, then you should use Xcode as your embedded development environment.

Some of the Key Requirements to Create a new project

  • Node 10+ installation
  • Testing devices
  • Accounts to get keys

Let’s have a look at how to execute the coding,

npm install -g expo-cli

This execution is the first step of installation wherein "install Expo CLI" can be installed by npm or yarn; it's up to you to go further with. Once this is done, you can name it as "VChat."

expo init -t blank --name VChat
cd VChat
yarn add MirrorFly-chat-expo react-navigation@4.1.0 react-navigation-stack@2.1.0
expo install @react-native-community/netinfo@4.6.0 react-native-gesture-handler@1.5.6 react-native-reanimated@1.4.0 react-native-screens@2.0.0-alpha.12 react-native-safe-area-context@0.6.0 @react-native-community/masked-view@0.1.5

Step 2 : Build chat app for android with MirrorFly Chat

To integreate a free messaging API in android one of the most important components is MirrorFly chat tool that helps in creating chat apps. Moreover, there are several text editors available out there to choose from, and to implement this MirrorFly chat, there is a need to make changes with App.js.

The below coding all about what happens at the backend

import React from "react";
import { View, SafeAreaView } from "react-native";
import { MirrorFlyChat } from "MirrorFly-chat";
import {
Chat,
Channel,
MessageList,
MessageInput,
} from "MirrorFly-chat-expo";

const chatClient = new MirrorFlyChat('f8wwud5et5jd');
const userToken =
'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VyX2lkIjoieW91bmctZ3Jhc3MtNyJ9.Z1SLMbBf_lX1KdDt0ew8YlXZbyZZIrOgyLr5TiDyco0';

const user = {
id: 'young-grass-7',
name: 'Young grass',
image:
'https://stepupandlive.files.wordpress.com/2014/09/3d-animated-frog-image.jpg',
};

chatClient.setUser(user, userToken);

class ChannelScreen extends React.Component {
render() {
const channel = chatClient.channel("messaging", "young-grass-7");
channel.watch();

return (

);
}
}

export default class App extends React.Component {
render() {
return ;
}
}

As soon as these codes get executed, your chat application is ready to move on. You can also ensure the perfection of your application by previewing it with the installation of Expo application on your handy device and later connecting it to your wireless network.

Now, let's proceed further by executing the below codes, as this will automatically start a development server. Also, it will refresh the app automatically if ever changes were made

npm start

Once the above steps are followed, a simple chat app is ready to execute in real time. However, if you want some additional features in your application, then you can simply go through the below interface React native components,

Conversation : The Main Objective

For any chat application, conversation is one among the major traits, and to implement this successfully, there is a tool that navigates all the contacts. Stacked navigation just implies the managing task of the list.

In other words, you can say as it optimizes the react native performance. Even the react navigation package that supports the stack navigation.

Let's have a look at the codes that have been implemented for contacts and conversations

import React, { PureComponent } from 'react';
import { View, SafeAreaView, Text } from 'react-native';
import { MirrorFlyChat } from 'MirrorFly-chat';
import {
Chat,
Channel,
MessageList,
MessageInput,
ChannelPreviewMessenger,
ChannelList,
} from 'MirrorFly-chat-expo';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';

const chatClient = new MirrorFlyChat('f8wwud5et5jd');
const userToken =
'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VyX2lkIjoieW91bmctZ3Jhc3MtNyJ9.Z1SLMbBf_lX1KdDt0ew8YlXZbyZZIrOgyLr5TiDyco0';

const user = {
id: 'young-grass-7',
name: 'Young grass',
image:
'https://stepupandlive.files.wordpress.com/2014/09/3d-animated-frog-image.jpg',
};

chatClient.setUser(user, userToken);

class ChannelListScreen extends PureComponent {
static navigationOptions = () => ({
headerTitle: (
Awesome Conversations
),
});

render() {
return (

{
this.props.navigation.navigate('Channel', {
channel,
});
}}
/>

);
}
}

class ChannelScreen extends React.Component {
static navigationOptions = ({ navigation }) => {
const channel = navigation.getParam('channel');
return {
headerTitle: (
{channel.data.name}
),
};
};

render() {
const { navigation } = this.props;
const channel = navigation.getParam('channel');

return (

);
}
}

const RootStack = createStackNavigator(
{
ChannelList: {
screen: ChannelListScreen,
},
Channel: {
screen: ChannelScreen,
},
},
{
initialRouteName: 'ChannelList',
},
);

const AppContainer = createAppContainer(RootStack);

export default class App extends React.Component {
render() {
return ;
}
}

By initiating the above codes successfully, you can have a check over the conversations and get connected with the users by simply clicking on their names.

Message Threads (MT) : Follows Under the Same Channel

Well, threads are a necessary part of the entire concept when you are planning to create a sub-conversation under the same channel. Thus, to implement this you need to have a track over our MirrorFly Chat.

Moreover, it also supports replying to the users by pressing long on a particular chat.

Let’s have a note on the below codes,

import React, { PureComponent } from 'react';
import { View, SafeAreaView, TouchableOpacity, Text } from 'react-native';
import { MirrorFlyChat } from 'MirrorFly-chat';
import {
Chat,
Channel,
MessageList,
MessageInput,
ChannelList,
Thread,
ChannelPreviewMessenger,
CloseButton,
} from 'MirrorFly-chat-expo';

import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';

const chatClient = new MirrorFlyChat('f8wwud5et5jd');
const userToken =
'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VyX2lkIjoieW91bmctZ3Jhc3MtNyJ9.Z1SLMbBf_lX1KdDt0ew8YlXZbyZZIrOgyLr5TiDyco0';

const user = {
id: 'young-grass-7',
name: 'Young grass',
image:
'https://stepupandlive.files.wordpress.com/2014/09/3d-animated-frog-image.jpg',
};

chatClient.setUser(user, userToken);

class ChannelListScreen extends PureComponent {
static navigationOptions = () => ({
headerTitle: Channel List,
});

render() {
return (

{
this.props.navigation.navigate('Channel', {
channel,
});
}}
/>

);
}
}

class ChannelScreen extends PureComponent {
static navigationOptions = ({ navigation }) => {
const channel = navigation.getParam('channel');
return {
headerTitle: (
{channel.data.name}
),
};
};

render() {
const { navigation } = this.props;
const channel = navigation.getParam('channel');

return (

{
this.props.navigation.navigate('Thread', {
thread,
channel: channel.id,
});
}}
/>

);
}
}

class ThreadScreen extends PureComponent {
static navigationOptions = ({ navigation }) => ({
headerTitle: Thread,
headerLeft: null,
headerRight: (
{
navigation.goBack();
}}
style={{marginRight: 20}}
>

),
});

render() {
const { navigation } = this.props;
const thread = navigation.getParam('thread');
const channel = chatClient.channel(
'messaging',
navigation.getParam('channel'),
);

return (

);
}
}

const RootStack = createStackNavigator(
{
ChannelList: {
screen: ChannelListScreen,
},
Channel: {
screen: ChannelScreen,
},
Thread: {
screen: ThreadScreen,
},
},
{
initialRouteName: 'ChannelList',
},
);

const AppContainer = createAppContainer(RootStack);

export default class App extends React.Component {
render() {
return ;
}
}

Rich Messaging

The concept of Rich Messaging moves alongside with two components i.e., MessageList and MessageInput and includes special features

  • User mention (@name) feature - To mention a particular person in a group chat
  • /giphy - A tailor-made command that enhances the customer experience
  • Image Uploading - One of the distinctive features of Rich Messaging which allows users to upload the images from the gallery

Now, once done with the coding part you can be assured of developing the best react native chat SDK.

Wrapping Up

However, the entire article is about the technical coding part that can help you to Build chat app using react native chat sdk.

But, do you know that these above mentioned features are just a few from the huge ocean.

Yes! you can experience many additional custom features and enhance your chat app.

Now, it’s your time to think over and if this article gets you some knowledge and interest in building your own React native group chat, then feel free to contact us. CONTUS MirrorFly is there to assist you in providing the team of the best skilled developers on hire.

All the Best!!

Discussion