At Instamobile, we’re building a ton of complex features to save time and energy for React Native developers across the world. One of these complex features is the chat functionality, which is a must have in almost all mobile apps nowadays. In this tutorial, we’ll learn how to add a React Native Chat into any mobile app with only a few lines of code. And yes, we are talking about a fully fledged chat function, that comes integrated with backend (database & storage) and that is real-time. And it can be integrated into any React Native app with no effort! Building a chat feature is extremely complex, even though it might seem trivial at first. Supporting only basic text chat features will make your app look unprofessional and users will be extremely disappointed if they don’t have functions such as sending videos, recording messages, etc. Here’s a list of features that every React Native Chat app should have, and that are considered in all those tutorials that teach you how to build a chat app in 10 minutes: never Photo & Video Messages Audio Messages Sending multiple photos/videos at once Video Player Clickable URLs Full screen photo viewer Typing indicators Seen Status Online Status Group Chats Push Notifications Dark Mode RTL & Localization Blocking users (required by Apple) So no, you can’t build a React Native chat app in 10 minutes, if you start from scratch. The list continues on and on, trust me! We’ve developed our fully fledged chat app over the course of 6 months, and it still doesn’t have all the functionalities we’d want. Fortunately, our code at Instamobile is highly modular, so we made it extremely easy for our customers to integrate the chat functionality into any React Native app in a matter of minutes. And this is applicable to any mobile app, regardless of the backend system they’re using. The magic lives in the component. This component only needs a channel as its input, wrapping two user IDs, and it will enable the fully functional React Native chat feature when presented on the screen. IMChatScreen We are going to present the steps that you need to follow in order to properly display the chat screen between two given users. 1. Link Your App to Your Firebase Account All messages get stored in Firebase Firestore (a database), regardless of your existing backend, which can be of any kind (AWS, MySQL, REST API, GraphQL, etc). You only need two user IDs in order to trigger the chat functionality properly and we’ll show you how to make things work correctly. In addition to the messages, the chat will also store the blocked users in Firestore. This is a functionality that is required by Apple’s guidelines, and you wouldn’t be able to publish your iOS app without it. If you are not familiar with Firebase already, here what you need to do (check out our if you need more details): comprehensive documentation Create a new Firebase account, a new project and add a new app to the project Add dependency to your app react-native-firebase npm install react-native-firebase@ 5.5 .6 iOS Download the file (for iOS) and place it in the main folder (the folder where the Podfile lives in) GoogleService-Info.plist ios/NameOfApp In Xcode, add this new file to the project in the left panel navigator In the AppDelegate.m, add the following code [FIRApp configure]; #import <Firebase.h> // first line of didFinishLaunchingWithOptions method Android Download the file (for Android), and place it in the folder google-services.json android/app Enable Firebase Storage and set the write rules to public Now run your app and make sure everything works fine. 2. Add Core/chat folder into Your React Native App All the code that’s related to chatting lives in the module. As a fun fact, all of our are using this code to enable the chat functionalities. Core/chat app templates Simply copy paste this folder into your folder and you’re done. Additionally, you might want to copy paste and folders as well, if you want to use our own localization library as well as our own icons. src CoreAssets Translations 3. Add a Navigation Path to IMChatScreen he is the component that’s in charge with the React Native chat functionality. IMChatScreen It’s the entry point of every single feature that we listed on our product page . It displays the UI, it hooks up to the backend, it listens for new messages, it displays the photo & video pickers, it manages the typing indicators, etc. So in order to add the chat functionality into your React Native app, you need to make your app able to present this screen. We’re going to assume you are using library to handle screen transitions. So simply add this screen (IMChatScreen) to one of your navigators. react-navigation lives in . So you can import it like this IMChatScreen src/Core/chat import { IMChatScreen } from ; '../Core/chat' Here’s an example of how your route to the IMChatScreen can look like in a stack navigator: HomeStack = createStackNavigator(
      {
        Home: { screen: HomeScreen },
        ChatScreen: { screen: IMChatScreen },
      },
      {
        initialRouteName: ,
        initialRouteParams: {
          appStyles: AppStyles
        }
      },
    ); const 'Home' 4. Display the Chat Screen Now that everything is properly set up, you can go ahead and present a chat screen anywhere in your React Native app, by simply navigating to the route. ChatScreen Here’s how you can simply present a chat screen between two users, with user IDs as unique identifiers for those users: { IMChatScreen } from ;
    ... id1 = ; id2 = ; otherUsers = [
       {
           id: id1 < id2 ? id1 + id2 : id2 + id1,
           firstName: }
    ]; channel = {
        id: id1 + id2,
        participants: otherUsers,
    };
    props.navigation.navigate( , {
        channel,
        appStyles: AppStyles,
    }); import '../Core/chat' const "1234" const "5678" const "Andrew" const 'ChatScreen' That’s it. That’s all you need to present a chat functionality into your own React Native app. Here are a few observations: The code will present a chat between the current user (with id = 1234) and another user (with id = 5678) The channel ID is always the concatenation of the two user IDs, in alphabetical order (so both users will have the exact same channel ID when talking between each other) As you can see, we assumed there’s a “ChatScreen” navigation path already integrated in one of your navigators (stack navigators, bottom navigators, etc.) – so make sure you add this navigation path to your app prior to testing the chat. All the data will be stored in Firebase Firestore, regardless of what other backend you are using. So make sure prior to testing this code. you set up your Firebase account And yes, it works in addition to your existing backend, which can be of any kind (AWS, REST API, WordPress, MySQL, etc) For group chats, the channel ID will simply be the channel ID of the group that you want to present the chat screen for. You can customize the AppStyles as you with, to get the right colors and fonts that match with the UI of your app Reporting & Blocking users will also work right out of the box, regardless of your backend of choice. They will be stored in the “reports” table in Firestore. 5. Test Your Integration You can go ahead and start chatting between two users. Of course, you’ll test that the functionality works properly. You can also go into your and check out the Firestore tables that got created automatically: Firebase Console – this is used for storing all the messages, together with their meta data channels – this is storing the association between chat rooms and users, and it’s extremely important for group chats channel_participations – this table is used for recording all the users that get blocked or reported. reports Conclusion Building a React Native chat from scratch is extremely painful. The features are very complex, performance is extremely critical and hard to get right, and the total development work needed will expand over the course of more than 6 months. Additionally, users are extremely picky nowadays, and have high expectations when it comes to chat rooms, so the amount of features needed for a reasonable chat functionality is also very high. Fortunately, at Instamobile, we’ve built a modular chat functionality, that can be integrated into any React Native app easily. Hopefully this tutorial will help all of our clients to easily add chat room to their apps. Please let us know in the comments if you get stuck or if anything is missing from this React Native chat tutorial. Cheers! Previously published at https://www.instamobile.io/mobile-development/react-native-chat/

Apple

Google

Adding GIFs to Your React Native Application Using Giphy API

Localizing Your React-Native App [A How-To Guide]

Premium Chat Module For Your React Native App

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

A Beginner's Guide To Using React Native Camera

$DEFI Token Hits 7 Major Exchanges: A Milestone Achievement

$JTC Network To List On BitMart Exchange

$500k Presale: TG.Casino Passes Milestone with Upcoming Telegram-Powered Platform

$3 Million in Seed Funding for Web3 Founders Announced By Necto Labs

$2M Backing and a Vision: How GAM3S.GG is Reshaping Web3 Gaming

A Beginner's Guide To Using React Native Camera

$DEFI Token Hits 7 Major Exchanges: A Milestone Achievement

$JTC Network To List On BitMart Exchange

$500k Presale: TG.Casino Passes Milestone with Upcoming Telegram-Powered Platform

$3 Million in Seed Funding for Web3 Founders Announced By Necto Labs

$2M Backing and a Vision: How GAM3S.GG is Reshaping Web3 Gaming

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps