Integrating Premium Chat Module like WhatsApp in React Native App(WhatsApp Clone)

At QuickComponent, we have significantly done the heavy lifting in building a realtime chat app like WhatsApp for Android and IOS with optimised performance and totally scalable saving, your precious time.

And you are correct, It’s a functional chat app integrated with a realtime database and storage(backend), modified design, and can easily be integrated into any chat app effortlessly.

Building a chat feature might seem trivial at first supporting only basic text chat features. But this will tend to make your app look unprofessional and far from complete.

Here are some standard features that are never considered in all those tutorials that teach you how to build a chat app in 10 minutes. Every Chat app should have these features and even more.

1. Authentication
2. Typing users
3. Message sent indicator
4. Message pending indicator
5. Message delivered indicator
6. Sharing Photos and Videos
7. Voice Notes
8. Unread messages count
9. Online status
10. Push Notifications
11. Share User Stories
12. Mute Notification

Over the course of 6 months, we have developed a Functional chat app and we keep updating it with more features. So, if you start from scratch, you can’t simply build a Chat App with React Native in 10 minutes.

With our highly modular, at QuickComponent, it simple for anyone to integrate the chat functionality into any React Native app, plus we will be glad to help you integrate should you face any problem. But you won’t.

We present here, the steps you need to take to present a Chat screen between two users.

1. Connect your Firebase Account

We have taken advantage if Firebase real-time database to implement the Chat app. Irrespective of your current backend, which may be any of MySQL, REST API, GraphQL, etc. It will certainly work with firebase.

Create and Add a Firebase project here if none previously exist.

Install Firebase dependencies in your app

yarn add @react-native-firebase/app @react-native-firebase/auth @react-native-firebase/firestore @react-native-firebase/messaging @react-native-firebase/storage

For IOS

• you will need to change directory or navigate to the iOS folder
• Open “LetsChat.xcworkspace” file with Xcode.
• Right-click on your project and Add the GoogleService-Info.plist file

For Android

From your project folder, simple copy the google-services.json file and place it in this path “android/app/”

2. Add Chat folder to your React Native App

All you need to do here is to locate components/ui/chat and screens/ChatScreen module and simply add it to your app. All chat related code leaves here. Find all our app templates using this code in this manner to support chat feature.

3. Config Chat Screen in Navigator

Taking advantage of screen transitions, implemented by react-navigation library, Simply import and then include the Chat screen in your navigators.

import { ChatScreen } from '../screens';
const Stack = createStackNavigator();
export default function MainStackNavigator() {
  return (
    <Stack.Navigator
      initialRouteName="Home">
      <Stack.Screen
        
        name="Home"
        component={
          Platform.OS === 'ios' ? BottomTabNavigator : AndroidTabScreen
        }
      />
      <Stack.Screen name="Chat" component={ChatScreen} />
    </Stack.Navigator>
  );
}

4. Navigate to Chat Screen

After setting up everything, it is now easy to navigate or present a chat screen. This can be done by simply presenting in this from anywhere of your app :

const conversationItem = {};
const id1 = "66hs67us";
const id2 = "27ysy7ys";
conversationItem.id = id1 < id2 ? id1 + id2 : id2 + id1;
props.navigation.navigate('ChatScreen', { conversationItem });

Conclusion

Developing a Chat app with React Native can be tedious with complex features where performance is prioritised and might look difficult to get right. You will also require continuous updates over that eat up limited time.

Fortunately, at QuickComponent, we have significantly done loads of work in building a modularized chat functionality. And this is easily integrated into any React Native app. Feel free to contact us for help when it seems tedious or you just don’t have the time to commit.