Chat SDK

How to Build a Slack Clone using React Native

Applozic React Native SDK provides fully functional UI components and simplifies your app development journey
Google+ Pinterest LinkedIn Tumblr

Applozic’s React Native SDK provides you with all the necessary components to build a react-native chat app, and enables you as a developer to implement conversational chat, group chat, push notifications and many more such features!

Keep in mind that we are looking to build a real-time chat application using components provided by Applozic SDK and not build a replica of the latest Slack release (because that already exists).

If you are still unsure about why you need a chat functionality, check out this article on the top 8 reasons why you need conversational messaging and push notifications for you app.

Let’s get started by taking a look at what features set Slack apart as a SaaS and how React Native has established itself with a remarkable footprint in the app development world.

The ubiquitousness of Slack

From humble beginnings as a cloud-based communication medium for internal development teams, to becoming a commonplace name among organizations worldwide with more than 10 million daily active users (DAUs), Slack has established itself as the go-to cloud-based, collaborative chat platform to make conversations easier between team members.

However, Slack does have its’ fair share of drawbacks, with few major concerns many companies citing to be the lack of on-premises data storage system that can store sensitive data, documents containing sensitive trade secrets, or just non-compliance with established regulatory laws in industries like healthcare and finance.

The utter simplicity of creating a React Native application

React Native has been widely embraced since its release by developers and companies of all sizes who want an easy to learn, easy to code, and cross-platform app development solution and currently holds a top 5 position based on market share in both Android and iOS applications.

From a developer perspective, React Native provides pre-developed components, supports third-party integrations, enables cross-platform development, has hot-reloading and provides an engaging open source community to learn from and work with. It’s no wonder the market share of React Native based applications has only gone up since its release.

Just looking at the list of companies that use React Native to build their application should give you an idea of the number of users that are using an app built using React everyday:

Showcase of apps built using React Native
Showcase of apps built using React Native

Building your own React Native app on iOS

Let’s take a look at some prerequisites before we can start on our app building journey.
If you are already familiar with mobile development, you may want to use React Native CLI.

Here are some of the dependencies you will need:

  • Xcode (12.0 or later)
  • CocoaPods
  • Node (version 10+)

If you already have these tools installed, you should be able to get up and running within a few minutes. If they are not installed, you should expect to spend about an hour installing and configuring them. You can follow the guide here to get these installed.

To use the Applozic React Native SDK and leverage pre-built components that you can easily customize, you can sign up for Applozic and get your APP_ID from the install section of the console.

Creating a new application and setting up dependencies

reactnative.dev has a very comprehensive guide on creating your first application using React Native’s built in CLI. Once you are ready to integrate using the Applozic SDK, follow these steps:

Add pod

1. Setup your Podfile located at /ios/Podfile and add below pod dependency:

platform :ios, '10.0'
use_frameworks!

2. Navigate to YourApp/ios directory from terminal and run the below command:

pod install

Note: If you do not have pod dependency, check out how you can add pod in your react-native here.

Add Bridge files

  1. Copy applozic folder from here to /ios/ folder to your project.
  2.  Open project from /ios/ folder in xcode.
    Please make sure to use .xcworkspace, not .xcproject at this step.
  3. Include all .h and .m files to your project from applozic folder in step 1.

Add permissions

Add permissions for Camera, Photo Library, Microphone, Contacts and Location usage.

Note: We won't be asking the users for these permissions unless they use the respective feature. Due to Apple's requirement, we have to add these permissions if we are using any of their APIs related to Camera, Microphone etc.

Open Info.plist from /ios/YOUR_PROJECT_NAME/Info.plist file and paste these permissions anywhere inside the <dict> tag.

<key>NSCameraUsageDescription</key>
<string>Allow Camera</string>
<key>NSContactsUsageDescription</key>
<string>Allow Contacts</string>
<key>NSLocationWhenInUseUsageDescription</key>
<string>Allow location sharing!!</string>
<key>NSMicrophoneUsageDescription</key>
<string>Allow MicroPhone</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>Allow Photos</string>
<key>NSPhotoLibraryAddUsageDescription</key>
<string>Allow write access</string>

Setup Application ID

At this step, you should already have signed up for Applozic and obtained your APP_ID.

Open the ALChatManager.h file and replace “applozic-sample-app” with your APP-ID.

#define APPLICATION_ID @"<YOUR_APPLOZIC_APP_ID>"

You can also follow the Applozic documentation to complete this step.

Integration with NativeModules

1. Import NativeModules

import {
   NativeModules
} from 'react-native';

2. Define native module for accessing methods.

var ApplozicChat = NativeModules.ApplozicChat;

Setup APNS Push Notification

  1. Open AppDelegate.m file under /ios/YOUR_PROJECT/
  2. Follow the Applozic documentation to complete this step.

Setup conversational chat (1-to-1)

To get started with 1-to-1 chat, we first need to authenticate the user and register them to enable login/logout.

Creating a User object

A User object needs to be initialised and then authenticated to use Applozic’s features. A user object has a unique field userId which is also the only mandatory field. You can create a User object as below:

var alUser = { 
                  'userId' : userId,                  
                  'password' : password, 
                  'authenticationTypeId' : 1, 
                  'displayName': DISPLAY-NAMEOF-USER };

Registering/Logging in the user

You can check if user is logged in to applozic or not by using:

ApplozicChat.isUserLogIn((response) => {
                if (response == "true") {
                  /// User is logged in already
                } else {
                  /// User is not logged in yet.
                }
            })

You can authenticate the user with Applozic using the below method.

Note: If the login request is from a new user then a new user account is created. If the user is an existing user then user authentication details are validated by the server.

ApplozicChat.login({
                   'userId': UNIQUE_ID, 
                   'email': EMAIL,
                   'contactNumber': PHONE NO,
                   'password': PASSWORD,
                    authenticationTypeId: 1,
                   'displayName': DISPLAY NAME OF USER
               }, (error, response) => {
                 if(error){
                     console.log(error)
                 }else{
                   // Login success
                   console.log(response);
                 }
               })

Launching a Chat List screen

Launch the main chat screen using the below code:

ApplozicChat.openChat();

Launch a chat thread with a specific user

You can launch chat with particular user by passing the userId in the below function:

ApplozicChat.openChatWithUser(userId);

Launch a chat thread with a specific group

You can launch a chat thread with a particular group by passing applozic generated groupId or with your assigned groupId clientGroupId

With Applozic generated Group ID:

Note: groupId must be numeric
ApplozicChat.openChatWithGroup(groupId , (error,response) =>{
               if(error){
                 //Group launch error callback
                 console.log(error);
               }else{
                 //Group launch successful callback
                 console.log(response)
               }
             });

With your assigned Group ID:

Note: clientGroupId must be a String
ApplozicChat.openChatWithClientGroupId(clientGroupId, (error,response) =>{
            if(error){
              //Group launch error callback
              console.log(error);
            }else{
              //Group launch successful callback
              console.log(response)
            }
          });

Conclusion

At the start of this article, we wanted to create a chat application that will leverage Applozic’s React Native SDK to implement features including conversational chat, group chat, and push notifications. We have done all of those and also setup a React Native project that you can work on further and add more features like Audio and Video Call, Rich Messaging, multi-format attachments and many more!

Let us know in the comments if you would like to see a follow-up blog where we build something else using React Native, and feel free to leave any feedback as well!

Author

Anurag is a Technical Writer and technology enthusiast who enjoys science fiction and PC gaming.