How We Created a Chat App with React Native - a Case Study

Chat and networking platforms have forever changed the way we communicate at work. Now all our ideas, questions, and useful suggestions can be stored in one place and shared with our fellows. You can easily reach people who have the same values, tasks, and work on the very same mission as you do. The primary goal of chat and networking platforms is to provide support. This is a place where you can ask questions, receive useful tips, and discuss any issues together with your team. In this article, we want to share our experience in developing chat platform for development communities around the world.

Gitter is a communication platform for engineering communities and teams on GitHub. It helps to manage community collaboration, create your own chat rooms to discuss projects, invite your coworkers and explore other communities. It is entirely free, and there are no limits for message history, the number of people and integrations. By the time mentioned, it has over 800,000 people who share their experience, discuss, ask, and help each other.

Now let's review how Gitter works. To register, you have to authorize via GitHub or Twitter.

After this, you will see a variety of different channels for Frontend, Mobile, iOS, Android, DevOps, various frameworks, CSS, Ruby, etc. where you can chat with professionals and amateurs, ask questions, or give useful tips.

You can also search for people or rooms in the left top search bar or create your own community. To do this, you need to enter your community name and domain. Also Gitter has an option of starting a community for one of your GitHub projects.

As you can see, Gitter is simple and convenient in use. Developers around the world adore Gitter because it gathers all the development community in one place and allows you to find any information just in one click.

As we have already mentioned, Gitter is an open-source project available on GitHub. It allows communities to improve it and run their own Gitter instances. Thus, Apiko developed the unofficial Gitter.im client for iOS and Android in ReactNative.

Unfortunately, the official GitterMobile client that is available on Play Market and Appstore is not user-friendly and fast enough. Also, it is almost impossible to use with the slow network coverage (for example 2G). As Gitter has a lot of large communities with thousands of members, it should work on mobile as smoothly as it does on the web. That was the reason why we created GitterMobile with React Native.

The Gitter client for iOS and Android was built with React Native and Redux. React Native allows building mobile apps for iOS and Android using only JavaScript. With React Native you don't make a hybrid or HTML5 app, you build a real mobile app that works as fast as an app built with Objective-C or Java. Redux is a well-known implementation of Flux architecture. It is very convenient to use, as the entire state of an app is stored in one location that can hold data from anywhere. Such stack of technologies allows to quickly develop cross-platform apps (for iOS , Android, and Windows), reusing almost 90-95% of the code. One of the advantages is that you can even reuse code between the native platforms and web platforms, as the whole code is written in JavaScript.

Let's review the main features of GitterMobile.

• Home screen

• Basic drawer

• Real-time updates for drawer

• Room messages list screen

• Send message

• Base mark as read

• Edit messages

• Delete messages

• Real-time messages updates

• Parsing messages to display mention and links, emoji

• Collapsing messages

• Status (/me) messages type

• Search rooms and people

• Favorite/unfavorite room

• Search messages

• User info screen

• Room info screen

• Authentication screen (while fetching data)

• IRC commands

• Sharing ability and screens

• Room activity feed

• Message screen

Up to now, Gitter is available in more than 100 countries. According to the Builtwith report , 55,17% of Gitter users come from the United States. Most of the customers have migrated to Gitter from Google Font API, Facebook Like, and Font Awesome. Recently, it has been acquired by GitLab , so now it will be possible to login with GitLab and create communities out of GitLab projects. It means that the Gitter audience will be expanding more and more, attracting new users and investors.

The first thing that comes to mind when we think about team chat apps is Slack - the cloud-based communication platform where you can chat with your team, make calls, share documents, and integrate tools and services from Asana, Google Drive, Salesforce, Twitter, Dropbox, etc. It was released three years ago and became the most popular messenger for teams and workplaces. Its main features include:

• Real-time messaging

• Open channels

• Private channels

• File sharing

• Real-time notifications

• Encrypted data

• Contextual search

• Audio/video conferences

• Integration with other apps

• Personal profiles

• Tags, @mentions, and keywords

HipChat is a group chat for team communication. The CEO of HipChat, Jürgen Altziebler said: “HipChat is the first app we open to start the day. It’s our company watercooler and work communication in one place." It is similar to Slack, as both apps offer messaging, file sharing and integrations. If you use Atlassian products, HipChat can be a better choice because it has integrations with Jira, Confluence, Bitbucket and Service desk. Also, both platforms are available on Windows, Mac, PC, iOS, Android or web app.

RedBooth is a project management software for collaboration and keeping track of team progress. It helps to organize all your projects in one place, assign tasks, control the work process, create visual project timelines and set integrations with Slack, Outlook, Box, Dropbox, Cisco 
Spark, etc. Here are its basic features:

• Registration via Google account

• Setting up workspaces for projects

• Creating tasks and conversations

• Adding due dates and assignees

• Tracking the progress

• Notifications about important updates

• Tasks sharing

Grape is an intelligent enterprise messaging app that integrates all your data and services. It automatically attaches all users’ issues, calendars, and files saving more time for creative work rather than automatic actions. It calls itself “ more intelligent Slack or Hipchat ”. The founders of the app have built a type of search engine that indexes every service you connect with Grape. As of today, it has integrations with GitHub, BigBucket, Google Drive, Google Calendar, and Trello. It allows you not to waste time by switching between all these services and have everything stored in one app. Its main features are:

• Integration of all enterprise software

• Creating conversations for projects

• Connecting software tracking tools

• Chatbots (they can answer your questions or perform simple tasks)

• Intelligence amplification

• Search of all the software data

Gitter is different from its competitors because it concentrates on a specific niche - online community for developers and engineers. Building the mobile client for development community is an empowering experience for Apiko. We understand the role of communications in development communities and the importance of receiving information anywhere and anytime. The GitterMobile project is 60% ready , but there is still a lot of work to do. The important thing to mention is that everyone can make a contribution in developing the Gitter mobile client as it has an open-source code. The app already has a lot of functions that are available on the web version up to this day. We continue to work on this and believe that this product will be valuable and useful for development communities around the world.