React Native Chat App Tutorial in 3 steps.

This text was initially written on the DeadSimpleChat Weblog:
React Native Chat App Tutorial in 3 steps.
On this article we are going to to create a whole React Native Chat App.

a. 1-1 chat,

b. Group chat

and Bonus options:

1. Including Customers to Chat
2. Moderation options and
3. customization of the feel and appear by code.

Introduction

On this react Native chat app tutorial, we are going to learn to create a react native chat app with DeadSimpleChat.

💡 New to DeadSimpleChat? It is a flip key chat you can simply add to your web site or App —with none sophisticated code. For Digital / Stay occasions, SaaS App, Social Platform, Training, Gaming, Finance Signal Up for Free

Including the chat to your react native software is so simple as pasting a single line of code. We’ll do that in 3 simple steps

Step1: Create a react native software

for now lets scaffolds a brand new react native software.

npx create-expo-app react-native-chat-application

As soon as the app is scaffolded, begin the app, you possibly can select the place you wish to run the app between, Android, iOS and the online.

I’ve choosen the online however you possibly can select wherever you wish to run the app.

Open the App.Js file:

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Textual content, View } from 'react-native';
import { setDisabled } from 'react-native/Libraries/LogBox/Information/LogBoxData';

export default operate App() {
  return (
    <View model={kinds.container}>
      <Textual content>Open up App.js to begin working in your app!</Textual content>
      <StatusBar model="auto" />
    </View>
  );
}

const kinds = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'middle',
    justifyContent: 'middle',
  },
});

You will note one thing like this within the browser

Step 2: Create a DeadSimpleChat Account and Get the Embed Code

go to the web site deadsimplechat.com and create a free account by clicking on the Get Began button.

After you have created an account you’ll wind up within the dashboard web page.

There click on on the create chat room button to create a brand new chat room. You may title the chat room in line with your liking and click on on the save button to create a chat room

Then click on on the embed button to get the embed code. From there copy the embed code and lets transfer on to the following step so as to add the chat room to your ReactJs Software.

Step 3: Add Chat to your React Native Software

Open the App.JS file in your react js software and paste the emebed code the place you wish to add the chat.
And that is it you may have added chat to your reactjs software. That is how the applying seems to be like and the code:

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Textual content, View } from 'react-native';

export default operate App() {
  return (
    <View model={kinds.container}>
      <Textual content>Open up App.js to begin working in your app!</Textual content>
      <iframe src="https://deadsimplechat.com/CGOC0byXC" width="400px" peak="600px"></iframe>
      <StatusBar model="auto" />
    </View>
  );
}

const kinds = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'middle',
    justifyContent: 'middle',
  },
});

Thus we’ve got created a react Native chat software. I’ve created this within the net however it’ll work the prefect positive in Android and iOS as nicely.

The following sections are bonus part the place I clarify how you should use API and SDK to make use of the chat in line with your use-case. I can even clarify the no code chat performance

Nearly all of the options of the chat might be completed by no-code in addition to by utilizing the code. Its as much as you ways you wish to use the chat.

Bonus:

1. Fast begin with Chat SDK and react native

Now, allow us to begin with utilizing the API and the Chat SDK. You are able to do every thing utilizing the chat SDK and API

1. Create a number of chat rooms on the fly
2. Create and Assign moderators to the chat room
3. Ban customers
4. Ban dangerous phrases (add a listing of phrases which can be banned from the chat room)
5. Customise the chat room ( You can provide the identical chat room completely different look on completely different pages and have a special search for several types of customers the chances are limitless)

There are all types of customizations out there, each facet of the chat might be precision personalized to your liking

10 translate Chat interface into any language

1. Use Chat utilizing A number of Languages.

Initializing the chat SDK

Allow us to begin with initializing the chat SDK of the DeadSimpleChat. You may learn out fast begin information for extra particulars.

Step a: First allow us to import the chat sdk to our chat app.

In your root folder create a file named Deadsimplechat.js

then go to https://cdn.deadsimplechat.com/sdk/1.0/dschatsdk.min.js and duplicate the code by urgent command + A on mac or ctrl + Aon home windows and proper click on + copy on mouse.

Paste this code within the Deadsimplechat.js file and save.

Paste this code within the Deadsimplechat.js file and save.

Step b:

In your App.js file require the Deadsimplechat.js like:

require("./Deadsimplechat");

Connecting the iFrame with the SDK

Now you could join the chat iFrame with the SDK. You are able to do this in three steps like

1. Give the chat iframe a novel id. This may be something however we are going to give the iframe the id of chat-frame
2. We can even want the Chat Room ID
3. and we are going to want the Public API key as nicely.

The chat room id might be discovered wanting on the iframe url it’s after the deadsimplechat.com/chat-roomId additionally when you go to the dashboard and chat rooms part there you possibly can see the listing of chat rooms together with their id.

For our chat room we are able to discover the id within the iframe we embedded that’s

<iframe src="https://deadsimplechat.com/CGOC0byXC" width="100%" peak="600px"></iframe>

CGOC0byXC

allow us to go to our code that we embedded and edit the App.Js file. we have to give the iframe and id of chat-frame

So the brand new iframe code seems to be like:

<iframe id="chat-frame" src="https://deadsimplechat.com/CGOC0byXC" width="100%" peak="600px"></iframe>

The App.js file seems to be like:

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Textual content, View } from 'react-native';

export default operate App() {
  return (
    <View model={kinds.container}>
      <Textual content>Open up App.js to begin working in your app!</Textual content>
      <iframe id="chat-frame" src="https://deadsimplechat.com/CGOC0byXC" width="400px" peak="600px"></iframe>
      <StatusBar model="auto" />
    </View>
  );
}

const kinds = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'middle',
    justifyContent: 'middle',
  },
});

Now, we’ve got the chat room id, iframe id and we’d like the final bit that’s the public key

The general public key might be discovered within the Dashboard -> Developer

We’ve all of the three parameters that we have to initialize and join the chat SDK with the iframe allow us to try this.

(async () => {
    
    
    
    
    const sdk = new DSChatSDK("CGOC0byXC", "chat-frame", "pub_5738506b4e495f744e74556e666a644a68766f4b69767753596239666e473533271517a485775656f354978795830")
    
    await sdk.join();
});

We’ll want the react hooks to initialize the SDK write the beneath code inside your App() operate

  const [sdk, setSDK] = useState(0);
  useEffect(()=>{
    (async () => {
      
      
      
      
      const sdk = new DSChatSDK("CGOC0byXC", "chat-frame", "pub_7172586270477a656a3863587a594f46566e736839307737544b532d3463484c4e524b5743676b7733336d5151767a4b")
      
      await sdk.join();
      setSDK(sdk);
  })();
  }, [])

The App.js code seems to be like

import { StatusBar } from 'expo-status-bar';
import {useState, useEffect } from 'react';
import { StyleSheet, Textual content, View } from 'react-native';
import { Button } from 'react-native-web';

require("./Deadsimplechat");


export default operate App() {
  const [sdk, setSDK] = useState(0);
  useEffect(()=>{
    (async () => {
      
      
      
      
      const sdk = new DSChatSDK("CGOC0byXC", "chat-frame", "pub_7172586270477a656a3863587a594f46566e736839307737544b532d3463484c4e524b5743676b7733336d5151767a4b")
      
      await sdk.join();
      setSDK(sdk);
  })();
  }, [])


  return (
    <View model={kinds.container}>
      <iframe id="chat-frame" src="https://deadsimplechat.com/CGOC0byXC" width="400px" peak="600px"></iframe>
      <StatusBar model="auto" />
    </View>
  );
}

const kinds = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'middle',
    justifyContent: 'middle',
  },
});

We’ve added the Chat SDK and in addition initialized it. Now, allow us to check out a easy operate

We’ll create a logout button and name the SDK logout operate when that button is clicked to log the person out of the chat room.

Contained in the View ingredient create a button ingredient and on it create a onPress occasion handler and name the logout operate when the button is click on.

  return (
    <View model={kinds.container}>
      <Button onPress={logout} title="Logout"></Button>
      <iframe id="chat-frame" src="https://deadsimplechat.com/CGOC0byXC" width="400px" peak="600px"></iframe>
      <StatusBar model="auto" />
    </View>
  );

create a logout operate and inside it name the sdk.logout() operate

The App seems to be like this:

If you click on on the logout button, the SDK logs you out.

Now, we’ve got learnt learn how to add the chat SDK to your react native chat app and in addition learn how to initialize it and name a easy logout operate.

Allow us to attempt our hand at among the different primary features of the chat app.

2. Including customers to talk

So as to add the customers to the chat software you possibly can both name the be part of person technique or be part of the person utilizing our SSO performance

Right here is the documentation for
be part of person
and SSO

We’ll name the joinRoom technique so as to add the person to the chat room. Wanting on the documentation for the joinRoom technique, there are three doable methods to hitch a person to the chat room these are

1. utilizing username
2. utilizing accessToken
3. utilizing e-mail

On this instance we will probably be utilizing the username so as to add the person to the chat room. In your app you may be utilizing a database to signal within the customers however in our instance allow us to use a static username of James Bond.

allow us to create a login button that claims: login James bond to the chat room, When clicked it’ll login the person into the chat room and assign the person the title of James Bond

and we can even create a login operate the place we are going to name the login technique of the chat SDK with the username: James Bond.

  operate login(){
    sdk.joinRoom({
      username: "James bond"
    });
  }

  return (
    <View model={kinds.container}>
      <Button onPress={logout} title="Logout"></Button>
      <iframe id="chat-frame" src="https://deadsimplechat.com/CGOC0byXC" width="400px" peak="600px"></iframe>
      <Button onPress={login} title="login James Bond"></Button>
      <StatusBar model="auto" />
    </View>
  );
}

That is what the React Native Chat App seems to be like:

On this part we applied a primary login button in our React Native Chat Software.

3. Customization options by code

Subsequent we are going to learn to customise the chat. you possibly can customise each facet of the chat room by code together with

1. Altering the background colour
2. Altering textual content colour
3. Customized Fonts
4. Writing Customized CSS code
5. and A lot Extra

allow us to name the SDK operate to load customization when the chat app first hundreds, in order that out chat seems to be precisely as we wish to the customers

For this we are going to want the loadCustomization technique of the chat SDK.

Allow us to name the loadCustomization technique contained in the login technique that we created above to login the person.

So when the person logs within the customizations load as nicely.

sdk.loadCustomization({
  sidebarColor: "#ff3",
  textColor: "black",
  chatMessageFont: "Nunito"
});

the code for the login technique:

  operate login(){
    sdk.joinRoom({
      username: "James bond"
    });
    sdk.loadCustomization({
      backgroundColor: "#ff3",
      textColor: "black",
      chatMessageFont: "Nunito"
    });
  }

The App.js seems to be like:

import { StatusBar } from 'expo-status-bar';
import {useState, useEffect } from 'react';
import { StyleSheet, Textual content, View } from 'react-native';
import { Button } from 'react-native-web';

require("./Deadsimplechat");


export default operate App() {
  const [sdk, setSDK] = useState(0);
  useEffect(()=>{
    (async () => {
      
      
      
      
      const sdk = new DSChatSDK("CGOC0byXC", "chat-frame", "pub_7172586270477a656a3863587a594f46566e736839307737544b532d3463484c4e524b5743676b7733336d5151767a4b")
      
      await sdk.join();
      setSDK(sdk);
  })();
  }, [])


  operate logout() {
    sdk.logout();
  }

  operate login(){
    sdk.joinRoom({
      username: "James bond"
    });
    sdk.loadCustomization({
      backgroundColor: "#ff3",
      textColor: "black",
      chatMessageFont: "Nunito"
    });
  }



  return (
    <View model={kinds.container}>
      <Button onPress={logout} title="Logout"></Button>
      <iframe id="chat-frame" src="https://deadsimplechat.com/CGOC0byXC" width="400px" peak="600px"></iframe>
      <Button onPress={login} title="login James Bond"></Button>
      <StatusBar model="auto" />
    </View>
  );
}

const kinds = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'middle',
    justifyContent: 'middle',
  },
});

That is how the chat seems to be like logged out person:

Now allow us to login the person and see the customizations

As you possibly can see we’ve got loaded the customization when the person logs within the chat room.

These are among the frequent strategies of utilizing the chat by code. For a whole listing of strategies together with learn how to

1. learn how to ship a message by chat SDK
2. learn how to create moderators
3. Ban customers
4. delete messages
5. language translations and plenty of extra
6. by API and Chat SDK discuss with our developer documentation

Subsequent, allow us to how we are able to use the No-Code options of the chat. The identical options that can be utilized through code by the API and Chat SDK can be used with out the code by Person Interface.

4. Utilizing the No Code Chat options in react native chat

Nearly all of the options of the chat can be utilized by the no code or by the UI based mostly performance. Right here I’ll clarify among the commonest chat performance that you should use by the UI. These embody:

1. getting into the chat and sending a message
2. going by varied performance of the chat
3. customizing the chat interface
4. translating the chat interface
5. embed information
6. moderating the chat
7. creating moderators

We’ll find out about all of those beneath.

1. Getting into the chat and sending a message

If you go to the app the place you embedded the chat, you will note a display that claims set a username and enter

You may create any username of your selection and press the be part of room button to enter the chat room.

The display seems to be like this :

2. Going by varied performance of the chat

You may flip On/Off varied performance of the chat in line with your wants:

Go to the Basic settings and there’s a listing of options there you possibly can select to show off and activate in line with your liking:

These embody:

1. Including a customized chat room brand
2. Capacity to react to messages and skill to love the messages
3. Q&A Mode
4. Channels or Sub-Chat rooms (Chat rooms inside chat rooms)
5. File and Picture Sharing
6. 1-1 Personal Chat
7. Allow message notification for customers
8. Password Shield the chat room
9. Export all messages and information and delete all messages and information.
10. flip the chat On/Off as wanted.

3. Customizing the Chat interface

Every chat room in DeadSimpleChat is totally impartial of different chat rooms. Means customers of 1 chat room can not enter one other chat room and therefore every chat room must be personalized individually

To customise a chat room click on on the Create Chat Room button on the dashboard or

go to Dashboard -> Chat Rooms -> Edit ( subsequent to the chat room you wish to customise)

As soon as you might be within the Basic part of the chat room click on on the Customise button on the prime to enter the customise part of the chat room

When you click on on the Customise button you enter the customise part of the chat room.

The customise part seems to be like this:

Right here you possibly can customise your chat software to your hearts content material.

You may

1. Change background colours
2. Change textual content colours
3. Use customized fonts
4. Conceal parts throughout the chat app
5. Write Customized CSS as nicely (Seek advice from our Customized CSS Class information)
6. As you customise the chat room the customization takes place in actual time within the chat room beneath

You may simply copy the customizations to a number of chat rooms through our copy customization software.

4. Translate the chat interface

You may simply translate the chat interface into any language of your selection.

You may edit the translations as nicely to say no matter you need within the chat room

Lets us see the translate chat interface;

As you possibly can see there’s a listing of headings right here and you’ll write within the textual content field subsequent to the heading something you need the heading to say.

For instance you may make the heading Autoscroll paused say Défilement automatique en pause or the rest that you simply like, by typing within the field subsequent to the heading.

You can even copy the translations to different chat rooms as nicely by utilizing the copy customization software on the finish of the web page.

5. Embed Information Web page

And lastly we come to the embed information web page.

Right here you possibly can copy the embed code and paste it in your HTML to embed the chat room in your web site.

The code is an iFrame code and it really works with all types of internet sites together with

React Native APP
iOS
Android
Ionic
Plain HTML
WordPress
Different CMS Platforms
Electron app for MAC, Home windows and Linux
rather more
You may customise the dimensions of the chat room right here as nicely.

there are three choices giant, small and customized dimension to go well with all wants. If you change the sizes you possibly can see the chat room change in actual time.

6. Moderating the Chat Rooms

You may simply reasonable the chat rooms. The Admin and Moderators can reasonable the chat rooms

The individual that creates the account with DeadSimpleChat is the admin. The Admin can create Moderators that may additionally reasonable the chat room

There are 3 ways to moderating the chat room

1. Deleting Messages
2. Banning Customers
3. Banning Unhealthy phrases

As an Admin / Moderator you will note buttons just like the ban button to ban a person and the trash can button to delete the message subsequent to the customers within the chat.

Solely Admin and Moderators can see these buttons, regular customers can not see these buttons

Admin and Moderator View

Regular person view

You may add a listing of dangerous phrases as nicely and these phrases will robotically be deleted from the chat room.

The entire sentence containing these phrases won’t seem.

Thus on this part we’ve got learnt how we are able to reasonable the chat rooms by UI.

You may reasonable your react native chat software by API and Chat SDK as nicely.

7. Creating Moderators

Creating Moderators is simple with DeadSimpleChat. Go to Dashboard -> Moderators

Right here you possibly can create a username for the moderator and set a password.

You may assign the moderator particular chat rooms or you possibly can create a common moderator that may reasonable all of the chat rooms.

click on on the save button

If you click on the save button the credentials for the moderator login are created.

In case you can have a look at the Handle Moderator part there’s a desk

username means the username of the moderator within the chat room

e-mail e-mail used to login to the chat room

password password used to login to the chat room

chat rooms chat rooms assigned to the moderator

You may delete the moderators from this desk as nicely.

You can even use the SSO to login the moderators into the chat room or login the moderators through the Chat SDK as nicely.

To login as a moderator go to the chat app the place you will note the login display.

You may arrange a username and enter as a traditional person or below the

Have already got an account part put in your Moderator credential to login as a moderator

Conclusion

On this article we’ve got learnt learn how to create a react native chat software. We’ve additionally learnt learn how to use the chat SDK and the way we are able to use the chat by the no code route as nicely.

When you have any questions / issues close to chat be at liberty to contact us at help[at]deadsimplechat.com