Let’s get started!<\/p>\n\n\n\n
Prerequisites<\/h2>\n\n\n\n
Before we begin, you need to have the following:<\/p>\n\n\n\n
- \n
- Node.js installed on your computer<\/li>\n\n\n\n
- A Firebase account<\/li>\n\n\n\n
- A basic understanding of React Native and JavaScript<\/li>\n<\/ul>\n\n\n\n
Creating a new Chat App with React Native<\/h2>\n\n\n\n
First, we need to create a new React Native project. To do this, run the following command in your terminal:<\/p>\n\n\n\n
npx react-native init ChatApp<\/strong><\/p>\n\n\n\n
This will create a new React Native project called “ChatApp” in your current directory.<\/p>\n\n\n\n
Next, navigate into the project directory by running:<\/p>\n\n\n\n
cd ChatApp<\/strong><\/p>\n\n\n\n
Installing dependencies<\/p>\n\n\n\n
We need to install a few dependencies to get started. Run the following command in your terminal:<\/p>\n\n\n\n
npm install @react-navigation\/native @react-navigation\/stack firebase<\/strong><\/p>\n\n\n\n
- \n
- @react-navigation\/native and @react-navigation\/stack are navigation libraries for React Native<\/li>\n\n\n\n
- firebase is the Firebase SDK for JavaScript<\/li>\n<\/ul>\n\n\n\n
Setting up Firebase<\/h2>\n\n\n\n
We need to set up Firebase in our project. To do this, follow these steps:<\/p>\n\n\n\n
- \n
- Go to the Firebase Console and create a new project.<\/li>\n\n\n\n
- Click on “Add app” and select “Web” as the platform.<\/li>\n\n\n\n
- Register your app by providing a name for your app and a Firebase Hosting subdomain. You can leave the Firebase Hosting subdomain empty if you don’t plan on hosting your app on Firebase.<\/li>\n\n\n\n
- Copy the Firebase configuration object that is displayed on the screen.<\/li>\n\n\n\n
- Create a new file called firebase.js in your project’s root directory and paste the Firebase configuration object in it.<\/li>\n<\/ol>\n\n\n\n
Your firebase.js file should look something like this:<\/p>\n\n\n\n
import firebase from 'firebase\/app';\nimport 'firebase\/firestore';\nimport 'firebase\/auth';\n\nconst firebaseConfig = {\n \/\/ Your Firebase configuration object goes here\n};\n\nfirebase.initializeApp(firebaseConfig);\n\nexport default firebase;<\/code><\/pre>\n\n\n\nSetting up navigation<\/h2>\n\n\n\n
We need to set up navigation in our app. To do this, create a new file called App.js<\/strong> in your project’s root directory and paste the following code in it:<\/p>\n\n\n\n
import { NavigationContainer } from '@react-navigation\/native';\nimport { createStackNavigator } from '@react-navigation\/stack';\nimport ChatScreen from '.\/screens\/ChatScreen';\nimport LoginScreen from '.\/screens\/LoginScreen';\n\nconst Stack = createStackNavigator();\n\nexport default function App() {\n return (\n <NavigationContainer>\n <Stack.Navigator>\n <Stack.Screen name=\"Login\" component={LoginScreen} \/>\n <Stack.Screen name=\"Chat\" component={ChatScreen} \/>\n <\/Stack.Navigator>\n <\/NavigationContainer>\n );\n}\n<\/code><\/pre>\n\n\n\nThis code sets up navigation using the @react-navigation\/native and @react-navigation\/stack libraries. It creates two screens: LoginScreen and ChatScreen.<\/p>\n\n\n\n
<\/div>\n\nRead More:<\/span> Journey From ReactJS to React Native: Beginner\u2019s Guide<\/a><\/p>\n<\/div>\n
<\/div>\n\n\n\nCreating screens<\/h2>\n\n\n\n
We need to create two screens: LoginScreen and ChatScreen. To do this, create two new files in a screens directory in your project’s root directory called LoginScreen.js and ChatScreen.js.
In LoginScreen.js<\/strong>, paste the following code:<\/p>\n\n\n\nimport React, { useState } from 'react';\nimport { View, TextInput, Button } from 'react-native';\nimport firebase from '..\/firebase';\n\nexport default function LoginScreen({ navigation }) {\n const [email, setEmail] = useState('');\n const [password, setPassword] = useState('');\n\n const handleLogin = () => {\n firebase.auth().signInWithEmailAndPassword(email, password)\n .then(() => navigation.navigate('Chat'))\n .catch(error => alert(error.message));\n }\n\n return (\n <View>\n <TextInput\n placeholder= \"Email\"\n value = { email }\n onChangeText = { setEmail }\n \/>\n <TextInput\n placeholder=\"Password\"\n value = { password }\n onChangeText = { setPassword }\n secureTextEntry = { true}\n \/>\n <Button\n title=\"Login\"\n onPress = { handleLogin }\n \/>\n <\/View>\n );\n}\n<\/code><\/pre>\n\n\n\nThe handleLogin function uses Firebase’s signInWithEmailAndPassword method to authenticate the user with their email and password. If the authentication is successful, the user is redirected to the ChatScreen. If there is an error, an alert is shown with the error message.<\/p>\n\n\n\n
Creating a chat screen<\/h2>\n\n\n\n
In ChatScreen.js, we will create a chat screen that allows users to send and receive messages. We will use Firebase’s Firestore database to store and retrieve messages.<\/p>\n\n\n\n
import React, { useState, useEffect } from 'react';\nimport { View, Text, TextInput, Button, FlatList } from 'react-native';\nimport firebase from '..\/firebase';\n\n\nexport default function ChatScreen() {\n const [message, setMessage] = useState('');\n const [messages, setMessages] = useState([]);\n\n\n useEffect(() => {\n const unsubscribe = firebase.firestore().collection('messages')\n .orderBy('createdAt', 'desc')\n .onSnapshot(snapshot => {\n const messages = snapshot.docs.map(doc => {\n return {\n id: doc.id,\n ...doc.data()\n }\n });\n setMessages(messages);\n });\n\n\n return () => unsubscribe();\n }, []);\n\n\n const handleSend = () => {\n firebase.firestore().collection('messages').add({\n text: message,\n createdAt: firebase.firestore.FieldValue.serverTimestamp()\n }).then(() => {\n setMessage('');\n });\n }\n\n\n const renderMessage = ({ item }) => {\n return (\n <View style={{ padding: 10 }}>\n <Text>{item.text}<\/Text>\n <\/View>\n );\n}\n\n\nreturn (\n <View style={{ flex: 1 }}>\n <FlatList\n data={messages}\n renderItem = {renderMessage}\n inverted={true}\n \/>\n <View style={ { flexDirection: 'row' } }>\n <TextInput\n style={{ flex: 1 }}\n placeholder=\"Type a message\"\n value={message}\n onChangeText={setMessage}\n \/>\n <Button\n title=\"Send\"\n onPress={handleSend}\n \/>\n <\/View>\n <\/View>\n );\n}\n<\/code><\/pre>\n\n\n\nThe useEffect hook listens for changes in the messages collection in Firestore and updates the messages state whenever there is a change. The renderMessage function renders a single message in the chat. The FlatList component is used to display a list of messages, with the inverted prop set to true to show the latest messages at the bottom.<\/p>\n\n\n\n
The handleSend function adds a new message to the messages collection in Firestore with the user’s input text and the current timestamp. The setMessage function is then called to clear the message input field.<\/p>\n\n\n\n
Setting up Firebase<\/h2>\n\n\n\n
Before we can run the chat application, we need to set up Firebase for our project. Follow these steps to set up Firebase:<\/p>\n\n\n\n
- \n
- Go to the Firebase console (https:\/\/console.firebase.google.com\/) and create a new project.<\/li>\n\n\n\n
- Add a new web app to the project.<\/li>\n\n\n\n
- Copy the config object shown on the Firebase web app setup screen.<\/li>\n\n\n\n
- Create a new file called firebase.js in the src directory of your React Native project.<\/li>\n\n\n\n
- Paste the config object into the firebase.js file and add the following code to initialize Firebase.<\/li>\n<\/ol>\n\n\n\n
This code imports the necessary Firebase modules and initializes Firebase with the config object.<\/p>\n\n\n\n
![\"State-Management-in-React-Native-Using-Redux-CTA\"](\"https:\/\/www.oneclickitsolution.com\/blog\/wp-content\/uploads\/2021\/11\/State-Management-in-React-Native-Using-Redux-CTA.png\")
<\/a><\/figure>\n\n\n\nRunning the application<\/h2>\n\n\n\n
To run the chat application, open a terminal window in the project directory and run the following commands:<\/p>\n\n\n\n
npm install<\/strong><\/p>\n\n\n\n
npx react-native run-android # or run-ios for iOS<\/strong><\/p>\n\n\n\n
This will install the necessary dependencies and run the application on an Android<\/a><\/strong> or iOS<\/a><\/strong> device or emulator.<\/p>\n\n\n\n
Conclusion<\/h2>\n\n\n\n