Build Chat Component for Your App

Learn how to add Chat functionality to your custom React Native and Django app with Crowdbotics.

What is the Chat component and how much does it cost?

A feature that allows a user to chat with different users. It usually takes between 3.6 and 4.4 hours and costs $300 to add Chat to an application.

How does the Chat component work?

This feature allows a user to view, create, and delete old chats in the app. This feature can contain more than one screen with custom branding.

What is the Chat component used for?

Here are some common Chat user stories in a custom app build:

As a user, I would like to send a private message to another user.

Chat component README file

Chat

Setup

Install the required dependencies:

 "dependencies": {
   "pubnub": "^4.29.11",
   "pubnub-react": "^2.1.0",
   "react-native-emoji-selector": "^0.2.0",
   "react-native-keyboard-aware-scroll-view": "^0.9.3"
 }

Open /src/navigator/mainNavigator.js and import the stack navigator defined in index.js.

import Chat from "../features/<module_directory>";

And then add it to the navigation:

//@BlueprintImportInsertion
Chat: {
 screen: Chat.navigator
},

Based on pubnub/tutorial-app-react-native

https://github.com/pubnub/tutorial-app-react-native

This component does not yet have a README file. However, another Crowdbotics user may have created this component and shared it as a free community component.

Browse our community components for the Chat component.

Full Chat component code

import React, { useState } from "react";
import { StyleSheet, Text, SafeAreaView, Button, View, LogBox } from "react-native";
import EmojiSelector from "react-native-emoji-selector";
import Chat from "./chat";

import { createStackNavigator } from '@react-navigation/stack';
const Stack = createStackNavigator();

const EmojiPicker = ({ navigation }) => {
  // In here we are storing our currently picked emoji.
  const [chosenEmoji, setEmoji] = useState(null);

  // This method will be called when our user selects an emoji
  const handleEmojiSelected = emoji => {
    setEmoji(emoji);
  };

  // This method will be called when our user wants to continue with
  // currently selected emoji - this method will do nothing if user
  // didn't pick an emoji.
  const handleContinueButton = () => {
    if (chosenEmoji !== null) {
      navigation.replace("Chat", { emoji: chosenEmoji });
    }
  };

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.topContainer}>
        <Text style={styles.hint}>
          Pick an emoji that will represent you in the chat
        </Text>
        <View
          style={{
            ...styles.emojiContainer,
            ...(chosenEmoji === null ? styles.empty : {})
          }}
        >
          <Text style={styles.emoji}>{chosenEmoji || ""}</Text>
        </View>
        <Button
          // If user haven't chosen an emoji, we disable the continue button
          disabled={chosenEmoji === null}
          style={styles.continueButton}
          title="Continue"
          onPress={handleContinueButton}
        />
      </View>
      <View style={{ height: "50%" }}>
        <EmojiSelector onEmojiSelected={handleEmojiSelected} />
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: "column",
    alignItems: "center",
    width: "100%",
    height: "100%"
  },
  topContainer: {
    flexDirection: "column",
    alignItems: "center",
    justifyContent: "center",
    width: "100%",
    height: "50%"
  },
  hint: {
    fontSize: 16,
    textAlign: "center",
    marginTop: 32
  },
  continueButton: {
    marginVertical: 64,
    width: 300
  },
  emojiContainer: {
    width: 64,
    height: 64,
    marginVertical: 32
  },
  emoji: {
    width: "100%",
    height: "100%",
    fontSize: 60,
    textAlign: "center",
    textAlignVertical: "center",
    fontSize: 60
  },
  empty: {
    borderWidth: 5,
    borderStyle: "dashed",
    borderColor: "rgba(0, 0, 0, 0.2)"
  }
});

import PubNub from "pubnub";
import { PubNubProvider } from "pubnub-react";

const pubnub = new PubNub({
  subscribeKey: "demo",
  publishKey: "demo",
  uuid: "0"
});

LogBox.ignoreAllLogs(true);

const ChatNavigator = () => {
  return (
    <PubNubProvider client={pubnub}>
      <Stack.Navigator headerMode="none" initialRouteName="EmojiPicker">
        <Stack.Screen name="EmojiPicker" component={EmojiPicker} />
        <Stack.Screen name="Chat" component={Chat} />
      </Stack.Navigator>
    </PubNubProvider>
  )
}

export default {
  title: "Chat",
  navigator: ChatNavigator,
}

This component is not yet available as a verified component in the Crowdbotics platform. However, another Crowdbotics user may have created it and shared it as a free community component.

Browse our community components for the Chat component.

Recommended components for you

All component categories

Add this feature to your project

Snap Chat into your app along with our full library of prebuilt components.

Import layouts directly from Figma and visually build backend data models.

Two-way GitHub sync and automated deployments to Heroku will have your app up and running in minutes.

Add Chat to My App

Build with more components from Crowdbotics

Crowdbotics can build your custom app with Chat functionality and hundreds of other components.

Go from specs to code 4X faster than conventional development.

Our expert PMs and developers are standing by to provide a detailed quote and build timeline.

Start Building