{"id":18572,"date":"2022-08-29T10:38:36","date_gmt":"2022-08-29T08:38:36","guid":{"rendered":"https:\/\/www.codemotion.com\/magazine\/?p=18572"},"modified":"2022-08-29T10:38:36","modified_gmt":"2022-08-29T08:38:36","slug":"create-chat-app-react-native-firebase","status":"publish","type":"post","link":"https:\/\/www.codemotion.com\/magazine\/frontend\/create-chat-app-react-native-firebase\/","title":{"rendered":"How to Create a Chat App in Less Than 30 Minutes With React Native and Firebase"},"content":{"rendered":"\n<p>This tutorial will give you a comprehensive, step-by-step guide on building a secure and functional chat app with <strong><a href=\"https:\/\/www.codemotion.com\/magazine\/frontend\/react-native-alive-and-kicking-in-2022\/\" target=\"_blank\" aria-label=\"React Native (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\">React Native<\/a> and Firebase<\/strong> providing the backend service. The chat app will have a log-in and registration screen, allowing users to add chats in a real-time chat application.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-what-is-react-native\">What is React Native?<\/h2>\n\n\n\n<p>React Native (also known as RN) is an open-source mobile app development framework that enables users to build <strong>mobile apps for Android and iOS<\/strong> with native UI elements. It was built based on React, which is a <a href=\"https:\/\/www.codemotion.com\/magazine\/frontend\/javascript\/javascript-ultimate-guide\/\" target=\"_blank\" aria-label=\"JavaScript library (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\">JavaScript library<\/a>. React Native has been a global success for various reasons.<\/p>\n\n\n\n<p>First, you can use code created on it to power Android and iOS apps, saving a lot of time and energy. Second, the framework can also be used by <strong>front-end developers<\/strong>, who previously could only do app development using web-based technologies.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-what-is-firebase\">What is Firebase?<\/h2>\n\n\n\n<p>Firebase is Google\u2019s app development platform that offers developers the services and tools they need for the development of quality apps without needing to manage servers. <strong>It is categorized as a NoSQL database program<\/strong>. Firebase&#8217;s key features include hosting, authentication, notification, and a real-time database.<\/p>\n\n\n\n<p><strong>How to Create the Chat App<\/strong><\/p>\n\n\n\n<p>Here is an in-depth, step-by-step tutorial on how to create the chat app.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-step-1-prerequisites\">Step 1: Prerequisites<\/h2>\n\n\n\n<p>To develop the chat app, you should have a working understanding of React Native; the other stacks are easily understood.<\/p>\n\n\n\n<p>The packages needed for developing the app are as listed below:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Firebase<\/li><li>ReactNative<\/li><li>Node.js<\/li><li>ReactNative Media Query<\/li><li>Expo<\/li><li>Formik<\/li><li>Comet Chat<\/li><li>Yup<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"683\" src=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/08\/lautaro-andreani-xkBaqlcqeb4-unsplash-1024x683.jpg\" alt=\"react native for creating a chat app. Firebase.\" class=\"wp-image-18583\" srcset=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/08\/lautaro-andreani-xkBaqlcqeb4-unsplash-1024x683.jpg 1024w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/08\/lautaro-andreani-xkBaqlcqeb4-unsplash-300x200.jpg 300w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/08\/lautaro-andreani-xkBaqlcqeb4-unsplash-768x512.jpg 768w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/08\/lautaro-andreani-xkBaqlcqeb4-unsplash-1536x1024.jpg 1536w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/08\/lautaro-andreani-xkBaqlcqeb4-unsplash-600x400.jpg 600w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/08\/lautaro-andreani-xkBaqlcqeb4-unsplash.jpg 1920w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>React Native is an open-source mobile app development framework that enables users to build <strong>mobile apps for Android and iOS<\/strong> with native UI elements.<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-step-2-installing-dependencies\">Step 2: Installing Dependencies<\/h2>\n\n\n\n<p>First, you will need to download and install Node.js on your machine.<\/p>\n\n\n\n<p>Second, you will need to <strong>install the Expo-CLI<\/strong> on your computer. You need to install it as a global npm package. To install and use Expo CLI, you should have installed the tools below on your machine.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/git-scm.com\/\" target=\"_blank\" aria-label=\"Git (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\">Git<\/a><\/li><li>Node.js LTS release<\/li><li>Watchmen (Only for Linux and macOS users)<\/li><\/ul>\n\n\n\n<p>If the Expo CLI installation is successful, you will receive a &#8216;not logged in&#8217; message. You do not need to be logged in to an account to proceed, and you can continue.<\/p>\n\n\n\n<p>After installation, navigate to the terminal and create and name a new expo project. When prompted, choose the blank template.<\/p>\n\n\n\n<p>Then start the expo project that you have just created. Running the command below will start a new react native project on the browser.<\/p>\n\n\n\n<p><strong>expo start<\/strong><\/p>\n\n\n\n<p>You can now launch the <strong>Web Interface, Android, or iOS by choosing the one you want<\/strong>. Afterward, use a simulator to spin up the development server on Android or iOS.<\/p>\n\n\n\n<p>After you are done with that, you can install the other essential dependencies for the project, as shown below. Yarn is the default package manager for expo.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Install the Native React navigation libraries: <strong><em>yarn add @react-navigation\/native-stack<\/em><\/strong><\/li><li>Install the dependencies into an expo-managed project: <strong><em>expo install react-native-screens react-native-safe-area-context<\/em><\/strong><\/li><li>Install Formik and Yup to validate your forms: <strong><em>yarn add formik yup<\/em><\/strong><\/li><\/ul>\n\n\n\n<p>Now we can add Firebase for the project!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-step-3-adding-firebase\">Step 3: Adding Firebase<\/h2>\n\n\n\n<p>The following steps give a comprehensive guide on how to add and set up Firebase.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-installation\">Installation<\/h3>\n\n\n\n<p>To begin, run the command below on your terminal to install it properly.<\/p>\n\n\n\n<p><strong><em>expo install Firebase<\/em><\/strong><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-create-a-firebase-account-and-a-new-project\">Create a Firebase account and a new project<\/h3>\n\n\n\n<p>If you do not have an account, start by signing up for one. Then go to Firebase, create a new project, and activate the email and password authentication. Below the authentication tab in your project, click the \u2018sign-in method,&#8217; and you will be provided with a list of providers supported by Firebase. Choose the one you want to enable and save your choice.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-activate-the-firestore-service\">Activate the Firestore service<\/h3>\n\n\n\n<p>You then need to activate the <strong>Firestore <\/strong>service. You will use this to store the posts coming from your application. To do this, go to the <strong>Firestore <\/strong>tab (on the sidebar) and click on &#8216;<strong>Create database<\/strong> .&#8217; Navigate to Firestore rules, make the changes, and publish those changes.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-use-the-timestamp-as-an-index-to-order-your-posts\">Use the timestamp as an index to order your posts<\/h3>\n\n\n\n<p>To achieve this, start by creating an index for it. Go to the &#8216;<strong>indexes<\/strong>&#8216; tab, navigate to &#8216;<strong>single field<\/strong>&#8216; and click on &#8216;<strong>add exemption<\/strong> .&#8217;Enter &#8216;Posts&#8217; in the Collection ID space and &#8216;timestamp&#8217; in the field path space. Then click &#8216;Next,&#8217; enable the scopes (ascending, descending, array), and save.<\/p>\n\n\n\n<p>If you complete the steps above correctly, you will notice that the loading indicators on the exception blocks will have disappeared.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-generate-the-sdk-configuration-keys-for-firebase\">Generate the SDK configuration keys for Firebase<\/h3>\n\n\n\n<p>Start by registering your application under your <strong>Firebase <\/strong>project. On the overview page, choose the add option, and select web as the platform. After finishing up the configuration, go back to the overview page, and click on settings so that you can copy the SDK configuration setups.<\/p>\n\n\n\n<p><strong>Note<\/strong>: <em>Copy the configuration keys into a separate file that you will use later. Create a file called firebase.js at the root of your project, paste your codes, and save.<\/em><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-step-4-set-up-the-project-structure\">Step 4: Set Up the Project Structure<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"781\" height=\"675\" src=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2020\/06\/chatbot-3589528_1280-1.jpg\" alt=\"Your chat app with React Native and Firebase is almost ready!\" class=\"wp-image-5700\" srcset=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2020\/06\/chatbot-3589528_1280-1.jpg 781w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2020\/06\/chatbot-3589528_1280-1-300x259.jpg 300w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2020\/06\/chatbot-3589528_1280-1-768x664.jpg 768w\" sizes=\"auto, (max-width: 781px) 100vw, 781px\" \/><figcaption>Your chat app with React Native and Firebase is almost ready!<\/figcaption><\/figure>\n\n\n\n<p>This project will have several directories, including the components folder. Starting with the components folder at the root of your project, create a folder named components at the root of the project. The components of the chat app are as shown below.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>The header component<\/strong>: Use the power of react-native-media-query to craft it, as seen in the prototype below.<\/li><li><strong>The BottomTabs component<\/strong>: These are usually seen at the bottom of the Home Screen. Create a \u2018BottomTabs.js\u2019 component and paste the codes into it. The image below shows a prototype of the code.<\/li><li><strong>The card component<\/strong>: Create a card.js component and paste the codes into it.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-step-5-log-in-and-registration-screen\">Step 5: Log-In and Registration Screen<\/h2>\n\n\n\n<p>Screens are analogous to website pages, and every screen represents a page. Let&#8217;s go into detail on the login and registration screens.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-the-log-in-screen\">The log-in screen<\/h3>\n\n\n\n<p>The log-in screen is used to authenticate already registered users on your platform. When you use the correct details to log in, Firebase and the chat app authenticate you. If you supply the incorrect details, you will be kicked out.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-the-registration-screen\">The registration screen<\/h3>\n\n\n\n<p>This is the screen that is responsible for creating new users. It interfaces between the app\u2019s authentication and that of Firebase. New users can sign up to the chat app and Firebase simultaneously.<\/p>\n\n\n\n<p><strong>Note<\/strong>: Other screens include:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>The AddPost screen is liable for making new posts. You use Yup and Formik to save collected data and save it in the Firestore database.<\/li><li>The ChatList screen that lists all registered users<\/li><li>The chat screen allows users to engage in chats.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-step-6-test-chat-app\">Step 6: Test Chat App<\/h2>\n\n\n\n<p>You can now test the chat app to determine if it works as planned. Below are some system testing cases and their expected outcomes.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Signing up a new user:<\/strong> A new user should be allowed to enter the chat panel<\/li><li><strong>Check newly created user in the Firebase database<\/strong>: A newly created user date and unique UID in Firebase<\/li><li><strong>User messages with time<\/strong>: The user writes a message, and the receiver views it with the time<\/li><li><strong>Chat data for a logged-in user in Firebase:<\/strong> User\u2019s chat data available in Firebase\u2019s real-time data<\/li><li><strong>The logged-in user refreshes chat automatically:<\/strong> Chat panel windows refreshes and is observed by the viewer.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-your-chat-app-is-ready\">Your chat app is ready!<\/h2>\n\n\n\n<p>Congratulations! <strong>You have now created a chat app with React Native and Firebase<\/strong>! Firebase is an excellent asset for React Native developers who want to <strong>build app prototypes<\/strong> without building a complete backend from scratch. You can now build your first app or app prototype with the steps highlighted above.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This tutorial will give you a comprehensive, step-by-step guide on building a secure and functional chat app with React Native and Firebase providing the backend service. The chat app will have a log-in and registration screen, allowing users to add chats in a real-time chat application. What is React Native? React Native (also known as&#8230; <a class=\"more-link\" href=\"https:\/\/www.codemotion.com\/magazine\/frontend\/create-chat-app-react-native-firebase\/\">Read more<\/a><\/p>\n","protected":false},"author":64,"featured_media":18576,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_editorskit_title_hidden":false,"_editorskit_reading_time":5,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","_uag_custom_page_level_css":"","_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[6],"tags":[6281,54],"collections":[],"class_list":{"0":"post-18572","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-frontend","8":"tag-full-stack-developer","9":"tag-react","10":"entry"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.9 (Yoast SEO v27.5) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Create a Chat App in 30 Minutes with React Native and Firebase<\/title>\n<meta name=\"description\" content=\"Need a chat app fast? This is the guide for you. Learn how get it up and running with React Native and Firebase. Read on!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.codemotion.com\/magazine\/frontend\/create-chat-app-react-native-firebase\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create a Chat App in Less Than 30 Minutes With React Native and Firebase\" \/>\n<meta property=\"og:description\" content=\"Need a chat app fast? This is the guide for you. Learn how get it up and running with React Native and Firebase. Read on!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codemotion.com\/magazine\/frontend\/create-chat-app-react-native-firebase\/\" \/>\n<meta property=\"og:site_name\" content=\"Codemotion Magazine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Codemotion.Italy\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-08-29T08:38:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/08\/React-chat-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Codemotion\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodemotionIT\" \/>\n<meta name=\"twitter:site\" content=\"@CodemotionIT\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Codemotion\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/create-chat-app-react-native-firebase\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/create-chat-app-react-native-firebase\\\/\"},\"author\":{\"name\":\"Codemotion\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#\\\/schema\\\/person\\\/201bb98b02412383686cced7521b861c\"},\"headline\":\"How to Create a Chat App in Less Than 30 Minutes With React Native and Firebase\",\"datePublished\":\"2022-08-29T08:38:36+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/create-chat-app-react-native-firebase\\\/\"},\"wordCount\":1303,\"publisher\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/create-chat-app-react-native-firebase\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2022\\\/08\\\/React-chat-1.jpg\",\"keywords\":[\"Full Stack Developer\",\"React\"],\"articleSection\":[\"Frontend\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/create-chat-app-react-native-firebase\\\/\",\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/create-chat-app-react-native-firebase\\\/\",\"name\":\"Create a Chat App in 30 Minutes with React Native and Firebase\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/create-chat-app-react-native-firebase\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/create-chat-app-react-native-firebase\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2022\\\/08\\\/React-chat-1.jpg\",\"datePublished\":\"2022-08-29T08:38:36+00:00\",\"description\":\"Need a chat app fast? This is the guide for you. Learn how get it up and running with React Native and Firebase. Read on!\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/create-chat-app-react-native-firebase\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/create-chat-app-react-native-firebase\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/create-chat-app-react-native-firebase\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2022\\\/08\\\/React-chat-1.jpg\",\"contentUrl\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2022\\\/08\\\/React-chat-1.jpg\",\"width\":1920,\"height\":1080,\"caption\":\"creating a chat app with react native and Firebase\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/create-chat-app-react-native-firebase\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Frontend\",\"item\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Create a Chat App in Less Than 30 Minutes With React Native and Firebase\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#website\",\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/\",\"name\":\"Codemotion Magazine\",\"description\":\"We code the future. Together\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#organization\",\"name\":\"Codemotion\",\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/codemotionlogo.png\",\"contentUrl\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/codemotionlogo.png\",\"width\":225,\"height\":225,\"caption\":\"Codemotion\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/Codemotion.Italy\\\/\",\"https:\\\/\\\/x.com\\\/CodemotionIT\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#\\\/schema\\\/person\\\/201bb98b02412383686cced7521b861c\",\"name\":\"Codemotion\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/cropped-codemotionlogo-150x150.png\",\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/cropped-codemotionlogo-150x150.png\",\"contentUrl\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/cropped-codemotionlogo-150x150.png\",\"caption\":\"Codemotion\"},\"description\":\"Articles wirtten by the Codemotion staff. Tech news, inspiration, latest treends in software development and more.\",\"sameAs\":[\"https:\\\/\\\/x.com\\\/CodemotionIT\"],\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/author\\\/codemotion-2\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Create a Chat App in 30 Minutes with React Native and Firebase","description":"Need a chat app fast? This is the guide for you. Learn how get it up and running with React Native and Firebase. Read on!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.codemotion.com\/magazine\/frontend\/create-chat-app-react-native-firebase\/","og_locale":"en_US","og_type":"article","og_title":"How to Create a Chat App in Less Than 30 Minutes With React Native and Firebase","og_description":"Need a chat app fast? This is the guide for you. Learn how get it up and running with React Native and Firebase. Read on!","og_url":"https:\/\/www.codemotion.com\/magazine\/frontend\/create-chat-app-react-native-firebase\/","og_site_name":"Codemotion Magazine","article_publisher":"https:\/\/www.facebook.com\/Codemotion.Italy\/","article_published_time":"2022-08-29T08:38:36+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/08\/React-chat-1.jpg","type":"image\/jpeg"}],"author":"Codemotion","twitter_card":"summary_large_image","twitter_creator":"@CodemotionIT","twitter_site":"@CodemotionIT","twitter_misc":{"Written by":"Codemotion","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/create-chat-app-react-native-firebase\/#article","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/create-chat-app-react-native-firebase\/"},"author":{"name":"Codemotion","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/201bb98b02412383686cced7521b861c"},"headline":"How to Create a Chat App in Less Than 30 Minutes With React Native and Firebase","datePublished":"2022-08-29T08:38:36+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/create-chat-app-react-native-firebase\/"},"wordCount":1303,"publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/create-chat-app-react-native-firebase\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/08\/React-chat-1.jpg","keywords":["Full Stack Developer","React"],"articleSection":["Frontend"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/create-chat-app-react-native-firebase\/","url":"https:\/\/www.codemotion.com\/magazine\/frontend\/create-chat-app-react-native-firebase\/","name":"Create a Chat App in 30 Minutes with React Native and Firebase","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/create-chat-app-react-native-firebase\/#primaryimage"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/create-chat-app-react-native-firebase\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/08\/React-chat-1.jpg","datePublished":"2022-08-29T08:38:36+00:00","description":"Need a chat app fast? This is the guide for you. Learn how get it up and running with React Native and Firebase. Read on!","breadcrumb":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/create-chat-app-react-native-firebase\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codemotion.com\/magazine\/frontend\/create-chat-app-react-native-firebase\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/create-chat-app-react-native-firebase\/#primaryimage","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/08\/React-chat-1.jpg","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/08\/React-chat-1.jpg","width":1920,"height":1080,"caption":"creating a chat app with react native and Firebase"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/create-chat-app-react-native-firebase\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codemotion.com\/magazine\/"},{"@type":"ListItem","position":2,"name":"Frontend","item":"https:\/\/www.codemotion.com\/magazine\/frontend\/"},{"@type":"ListItem","position":3,"name":"How to Create a Chat App in Less Than 30 Minutes With React Native and Firebase"}]},{"@type":"WebSite","@id":"https:\/\/www.codemotion.com\/magazine\/#website","url":"https:\/\/www.codemotion.com\/magazine\/","name":"Codemotion Magazine","description":"We code the future. Together","publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codemotion.com\/magazine\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.codemotion.com\/magazine\/#organization","name":"Codemotion","url":"https:\/\/www.codemotion.com\/magazine\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png","width":225,"height":225,"caption":"Codemotion"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Codemotion.Italy\/","https:\/\/x.com\/CodemotionIT"]},{"@type":"Person","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/201bb98b02412383686cced7521b861c","name":"Codemotion","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/cropped-codemotionlogo-150x150.png","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/cropped-codemotionlogo-150x150.png","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/cropped-codemotionlogo-150x150.png","caption":"Codemotion"},"description":"Articles wirtten by the Codemotion staff. Tech news, inspiration, latest treends in software development and more.","sameAs":["https:\/\/x.com\/CodemotionIT"],"url":"https:\/\/www.codemotion.com\/magazine\/author\/codemotion-2\/"}]}},"featured_image_src":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/08\/React-chat-1-600x400.jpg","featured_image_src_square":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/08\/React-chat-1-600x600.jpg","author_info":{"display_name":"Codemotion","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/codemotion-2\/"},"uagb_featured_image_src":{"full":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/08\/React-chat-1.jpg",1920,1080,false],"thumbnail":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/08\/React-chat-1-150x150.jpg",150,150,true],"medium":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/08\/React-chat-1-300x169.jpg",300,169,true],"medium_large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/08\/React-chat-1-768x432.jpg",768,432,true],"large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/08\/React-chat-1-1024x576.jpg",1024,576,true],"1536x1536":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/08\/React-chat-1-1536x864.jpg",1536,864,true],"2048x2048":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/08\/React-chat-1.jpg",1920,1080,false],"small-home-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/08\/React-chat-1.jpg",100,56,false],"sidebar-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/08\/React-chat-1-180x128.jpg",180,128,true],"genesis-singular-images":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/08\/React-chat-1-896x504.jpg",896,504,true],"archive-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/08\/React-chat-1-400x225.jpg",400,225,true],"gb-block-post-grid-landscape":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/08\/React-chat-1-600x400.jpg",600,400,true],"gb-block-post-grid-square":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/08\/React-chat-1-600x600.jpg",600,600,true]},"uagb_author_info":{"display_name":"Codemotion","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/codemotion-2\/"},"uagb_comment_info":0,"uagb_excerpt":"This tutorial will give you a comprehensive, step-by-step guide on building a secure and functional chat app with React Native and Firebase providing the backend service. The chat app will have a log-in and registration screen, allowing users to add chats in a real-time chat application. What is React Native? React Native (also known as&#8230;&hellip;","lang":"en","_links":{"self":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/18572","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/users\/64"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/comments?post=18572"}],"version-history":[{"count":11,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/18572\/revisions"}],"predecessor-version":[{"id":18707,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/18572\/revisions\/18707"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media\/18576"}],"wp:attachment":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media?parent=18572"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/categories?post=18572"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/tags?post=18572"},{"taxonomy":"collections","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/collections?post=18572"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}