'How to Use React Native to Build a Private Messaging App' reactnative firebase
and signup if you don’t have an account with them. Next, log in and you will be presented with the screen below. You will be presented with a modal where you can enter the app details. The image below shows an example.
and signup if you don’t have an account with them. Next, log in and you will be presented with the screen below.. You will be presented with a modal where you can enter the app details. The image below shows an example. Following the creation of your app, you will be directed to your dashboard, which should look something like this. You must also copy those keys to a separate file in the manner described below. Simply create a file calledin the project's root directory and paste the code below into it. Now include this file in thefile, which is also located at the root of this project; this will ensure that it is not published online. export const CONSTANTS={ APP_ID: 'xxx-xxx-xxx', REGION: 'us', Auth_Key: 'xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx', }Awesome, that will be enough for the setups, let’s start integrating them all into our application, we will start with the components.This project contains several directories; let's begin with the components folder. Within the root of this project, create a folder calledThis is a styled component supporting the beauty of our app. Within it is the avatar element which displays the current user's profile picture. Also with this avatar, you can log out from the application. Create this file by going into the components directory and creating a file namedimport { StyleSheet, TouchableOpacity, View } from 'react-native' import Icon from 'react-native-vector-icons/FontAwesome5' import { Avatar, Text } from 'react-native-elements' import { getAuth, signOut } from '../firebase' import { CometChat } from '@cometchat-pro/react-native-chat' import { setGlobalState } from '../store' const HomeHeader==>{ const PLACEHOLDER_AVATAR= 'https://upload.wikimedia.org/wikipedia/commons/7/7c/Profile_avatar_placeholder_large.png' const auth=getAuth const signOutUser=async =>{ try { await signOut.then=>{ CometChat.logout .then=>{ console.log setGlobalState setGlobalState }) .catch=>console.log ) }) } catch { console.log } } return } export default HomeHeader const styles=StyleSheet.createThis component is responsible for showcasing the recent conversations of a user. It does more than that, it can also display users' stories and a floating button that launches a modal for showing all the users registered in our app. We will look at each of them separately, shown below is the code for it. import { CometChat } from '@cometchat-pro/react-native-chat' import { useEffect, useState } from 'react' import { ScrollView, StyleSheet, useWindowDimensions, View, TouchableOpacity, } from 'react-native' import { Avatar, Text } from 'react-native-elements' import { useGlobalState } from '../store' import { getAuth } from '../firebase' const auth=getAuth const timeAgo==>{ let seconds=Math.floor - date) / 1000) let interval=seconds / 31536000 if { return Math.floor + 'yr' } interval=seconds / 2592000 if { return Math.floor + 'mo' } interval=seconds / 86400 if { return Math.floor + 'd' } interval=seconds / 3600 if { return Math.floor + 'h' } interval=seconds / 60 if { return Math.floor + 'm' } return Math.floor + 's' } const ChatContainer==>{ return } const Stories==>{ const [stories]=useGlobalState return =>)} ) } const ChatList==>{ const viewport=useWindowDimensions const [conversations, setConversations]=useState const getConversations==>{ let limit=30 let conversationsRequest=new CometChat.ConversationsRequestBuilder .setLimit .build conversationsRequest .fetchNext .then=>setConversations) .catch=>{ console.log }) } useEffect=>{ getConversations }, [navigation]) return =>)} ) } const Conversation==>{ const possessor==>{ return currentUser==owner ? conversation.sender[key] : conversation.receiver[key] } const handleNavigation==>{ navigation.navigate, name: possessor, avatar: possessor, }) } return } {conversation.text.slice + '...'} {timeAgo * 1000).getTime)} ) } export default ChatContainer const styles=StyleSheet.createmodal which allows us to chat with a new user on our platform. Here is the code snippet for it. import { View, StyleSheet, TouchableOpacity } from 'react-native' import Icon from 'react-native-vector-icons/FontAwesome5' import { setGlobalState } from '../store' const FloatingButton==>{ return } style={styles.button} activeOpacity={0.5} >) } const styles=StyleSheet.create export default FloatingButton. It displays all the users that are on our platform and enables you to have a first-time conversation with them. After then, they can appear in your conversation list. Below is the code responsible for its implementation. import { CometChat } from '@cometchat-pro/react-native-chat' import { useEffect, useState } from 'react' import { View, Text, StyleSheet, TouchableOpacity, ScrollView, useWindowDimensions, } from 'react-native' import { Avatar, Button, Overlay } from 'react-native-elements' import { setGlobalState, useGlobalState } from '../store' const timeAgo==>{ let seconds=Math.floor - date) / 1000) let interval=seconds / 31536000 if { return Math.floor + 'yr' } interval=seconds / 2592000 if { return Math.floor + 'mo' } interval=seconds / 86400 if { return Math.floor + 'd' } interval=seconds / 3600 if { return Math.floor + 'h' } interval=seconds / 60 if { return Math.floor + 'm' } return Math.floor + 's' } const UserList==>{ const viewport=useWindowDimensions const [showUsers]=useGlobalState const [users, setUsers]=useState const toggleOverlay==>setGlobalState const getUsers==>{ const limit=30 const usersRequest=new CometChat.UsersRequestBuilder .setLimit .build usersRequest .fetchNext .then=>setUsers) .catch=>{ console.log }) } useEffect=>{ getUsers }, []) return =>)} ) } const User==>{ const handleNavigation==>{ navigation.navigate setGlobalState } return * 1000).getTime)} ) } const styles=StyleSheet.create export default UserList Fantastic, we have just finished building the dedicated components, let’s proceed to craft out the screens now.The screens are similar to website pages; each screen represents a page, and you can navigate from one to the next using theThis well-crafted screen does a lot of things behind the scene. It uses Firebase Google authentication to sign you into the system. Once you are signed in, FirebaseAuthNavigation file. But before you are let into the system, your authenticated details will be retrieved and sent to CometChat either for signing up or signing in. Onceimport { Image, ImageBackground, Pressable, StyleSheet, Text, View, } from 'react-native' import { SafeAreaView } from 'react-native-safe-area-context' import { provider, signInWithPopup, getAuth } from '../firebase' import { CONSTANTS } from '../CONSTANTS' import { CometChat } from '@cometchat-pro/react-native-chat' import { setGlobalState } from '../store' const LoginScreen==>{ const signInPrompt==>{ const auth=getAuth signInWithPopup .then=>{ const user=result.user console.log }) .catch=>console.log) } return } export default LoginScreen const styles=StyleSheet.create;', flex: 1, justifyContent: 'center', alignItems: 'center', width: '100%', height: '100%', }, logo: { width: 200, height: 50, resizeMode: 'contain', }, button: { backgroundColor: '#0caa92', alignItems: 'center', justifyContent: 'center', minHeight: 42, borderRadius: 20, paddingHorizontal: 40, paddingVertical: 10, marginTop: 30, }, buttonText: { color: 'white', fontWeight: 600, fontSize: 20, }, })This well-crafted screen brings together all the dedicated components in the components directory to one space. Each of the components knows how to perform its duties. Not many words here, let the code below do all the explaining. import { SafeAreaView, StyleSheet } from 'react-native' import ChatContainer from '../components/ChatContainer' import FloatingButton from '../components/FloatingButton' import HomeHeader from '../components/HomeHeader' import UserList from '../components/UserList' const HomeScreen==>{ return } export default HomeScreen const styles=StyleSheet.createLastly for the screens, we have the chat screen that lets us perform one-on-one conversations with another user. It heavily uses theimport { CometChat } from '@cometchat-pro/react-native-chat' import { useEffect, useRef, useState } from 'react' import { SafeAreaView, ScrollView, StyleSheet, TouchableOpacity, useWindowDimensions, View, } from 'react-native' import { Avatar, Input, Text } from 'react-native-elements' import Icon from 'react-native-vector-icons/FontAwesome5' import { getAuth } from '../firebase' const ChatScreen==>{ return } const Header==>} activeOpacity={0.5}>{route.params.name} ) const MessageContainer==>{ const viewport=useWindowDimensions const [message, setMessage]=useState const [messages, setMessages]=useState const scrollViewRef=useRef const auth=getAuth const sendMessage==>{ let receiverID=route.params.id let messageText=message let receiverType=CometChat.RECEIVER_TYPE.USER let textMessage=new CometChat.TextMessage CometChat.sendMessage.then=>{ setMessages=>[...prevState, message]) setMessage console.log }, =>{ console.log } ) } const getMessages==>{ let UID=route.params.id let limit=30 let messagesRequest=new CometChat.MessagesRequestBuilder .setUID .setLimit .build messagesRequest .fetchPrevious .then=>setMessages) .catch=>{ console.log }) } const listenForMessage==>{ const listenerID=Math.random.toString.slice CometChat.addMessageListener=>{ setMessages=>[...prevState, message]) }, }) ) } useEffect=>{ getMessages listenForMessage }, [route]) return } style={{ backgroundColor: 'white', maxHeight: viewport.height.toFixed - 162, padding: 20, }} showsVerticalScrollIndicator={false} >{messages.map=>)} sendMessage} onChangeText={=>setMessage} value={message} inputStyle={{ fontSize: 12 }} autoFocus={true} />sendMessage} >) } const Message==>{ const dateToTime==>{ let hours=date.getHours let minutes=date.getMinutes let ampm=hours >=12 ? 'pm' : 'am' hours=hours % 12 hours=hours ? hours : 12 minutes=minutes { const today=new Date.getDate const day=new Date.getDate return today==day } return currentUser==owner ? )} ) : )} ) } export default ChatScreen const styles=StyleSheet.creategetMessages
Canada Latest News, Canada Headlines
Similar News:You can also read news stories similar to this one that we have collected from other news sources.
Build a Job Application Tracker in 10 minutes Using ToolJet's Low Code Tool | HackerNoonIn this article, you'll learn to build an app that will let you manage all your job applications right from your own personal dashboard.
Read more »
Web Push Notifications for Javascript Apps Using Firebase | HackerNoonA tutorial on integrating Firebase Cloud Messaging to a Javascript app to turn on push notifications in a browser
Read more »
Hosting an Angular Application on Amazon S3 Using Github Actions | HackerNoonApplication example built with Angular 13 and hosted on Amazon S3 (Simple Storage Service) using GitHub Actions.
Read more »
10 NoCode Tools to Help You Build Your MVP 🚀 | HackerNoonA list of 10 free Nocode tools for creating and launching a successful startup ✅🚀
Read more »
Build a Startup Program for Your SaaS Business: A How to Guide | HackerNoonMany SaaS startups offer their service at a discount to customers that are part of an incubator or accelerator which has become known as a startup program.
Read more »