{"id":3313,"date":"2019-09-06T06:05:49","date_gmt":"2019-09-06T06:05:49","guid":{"rendered":"https:\/\/www.folio3.com\/mobile\/?p=3313"},"modified":"2020-11-24T08:03:27","modified_gmt":"2020-11-24T08:03:27","slug":"integrating-firebase-with-react-native-ios-and-android","status":"publish","type":"post","link":"https:\/\/www.folio3.com\/mobile\/blog\/integrating-firebase-with-react-native-ios-and-android\/","title":{"rendered":"Integrating Firebase with React Native (iOS and Android)"},"content":{"rendered":"\n<p>Although known mostly for its authentication services, firebase also comes with other powerful functionalities like, push notifications, analytics, crash reports, and much more! Integrating Firebase with your <a href=\"https:\/\/www.folio3.com\/mobile\/react-native-app-development\/\">React Native app <\/a>can help you quickly deploy, improve, and grow your app.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter is-resized\"><img fetchpriority=\"high\" decoding=\"async\" src=\"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2019\/09\/firebase-react-native.png\" alt=\"Firebase integration with React Native\" class=\"wp-image-3314\" width=\"267\" height=\"288\" srcset=\"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2019\/09\/firebase-react-native.png 533w, https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2019\/09\/firebase-react-native-278x300.png 278w\" sizes=\"(max-width: 267px) 85vw, 267px\" \/><\/figure><\/div>\n\n\n\n<p>According to Google:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>Firebase is Google\u2019s mobile application development platform that helps you build, improve, and grow your app.<\/p><\/blockquote>\n\n\n\n<p class=\"body {}\">With the jobs firebase can do for us, every dev would love to integrate it into his\/her app. So, we are going to discuss, how integrating Firebase with <strong>React Native<\/strong> can help you do wonders. Oh, and I am assuming that <strong><em>you already know react-native! <\/em><\/strong>HENCE, we are not gonna start with hello world app.<\/p>\n\n\n\n<p>So, the first step is:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Create a project on Firebase:<br><\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>Go to the <a rel=\"noreferrer noopener\" href=\"https:\/\/console.firebase.google.com\/\" target=\"_blank\">Firebase Console<\/a> and add a new project.<\/li><li>In that project, add your iOS and Android apps! It will ask for your app name and more importantly, your app\u2019s bundle ID. It will look like this:<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"939\" height=\"418\" src=\"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2019\/09\/firebase-console.png\" alt=\"Integrate React Native app with Firebase\" class=\"wp-image-3315\" srcset=\"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2019\/09\/firebase-console.png 939w, https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2019\/09\/firebase-console-300x134.png 300w, https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2019\/09\/firebase-console-768x342.png 768w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\"><li>After you have provided the necessary information, it will ask you to download a file (separate for iOS and Android), please do download it without hesitating. We will talk about what this file is for, later.<\/li><li><strong>Please note <\/strong>that every time you change the app\u2019s bundle Id be it iOS or Android, you will have to add a new app in your firebase project with new bundle Id, and download the new file again.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Integrating it with your&nbsp;app<\/h3>\n\n\n\n<p>Now coming back to React Native! After creating the project in firebase we will install the <a href=\"https:\/\/rnfirebase.io\/\">react-native-firebase library<\/a>, it\u2019s pretty simple:<br><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm install --save react-native-firebase <\/code><\/pre>\n\n\n\n<p>After installing the library, we now do the real work:<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">iOS<\/h4>\n\n\n\n<p>Remember, we downloaded a file when we created the app on firebase? We will be needing it now. For iOS, this file would be named as <em><strong>GoogleService-Info.plist<\/strong>. <\/em>This file contains all of the information required by the Firebase iOS SDK to connect to your Firebase project. Now, all you have to do is to:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Place the file in the root of your iOS app at <em><strong>ios\/[YOUR APP NAME]\/GoogleService-Info.plist<\/strong><\/em><\/li><li>Make sure that the GoogleService-Info.plist file has been added to your project within XCode<\/li><li>If you don\u2019t already have Cocoapods set up, install <a rel=\"noreferrer noopener\" href=\"https:\/\/cocoapods.org\/\" target=\"_blank\">Cocoa Pods<\/a> on OS, cd into your iOS folder in your RN project through the terminal, and run the command:<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>pod init<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li>It will generate a Podfile in the root of your <strong>\/ios <\/strong>folder.<\/li><li>Now, inside the Podfile, <strong>uncomment:<\/strong><\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>platform :ios, \u20189.0\u2019<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Add <\/strong>the following in the Podfile:<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>pod \u2018Firebase\/Core\u2019, \u2018~> 6.3.0\u2019<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li>Now run in terminal<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>$  pod install<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li> To initialize the native SDK in your app, add the following to your <strong>ios\/[YOUR APP NAME]\/AppDelegate.m<\/strong> file<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>#import &lt;Firebase.h><\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li>At the beginning of the <strong>didFinishLaunchingWithOptions:(NSDictionary*)launchOptions<\/strong> method, add the following line:<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>[FIRApp configure];<\/code><\/pre>\n\n\n\n<p>Now, you have successfully integrated firebase with your iOS app. Before running your app, link your SDK\/library with running this command in terminal:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>$ react-native link react-native-firebase<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Android<\/h4>\n\n\n\n<p>If you haven\u2019t linked the firebase SDK in iOS setup then please link the Firebase SDK with the above command. Here, again we\u2019ll start with the file we downloaded from firebase when we created the android app in our Firebase project. The file for android would be named as <strong>google-services.json<\/strong>&nbsp;. Place this file in the root of your project at <em><strong>android\/app\/google-services.json<\/strong><\/em> and follow me:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Add the google-services gradle plugin as a dependency to your project in the <em>project<\/em> level build.gradle file in order for android to parse that file:<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>buildscript {   \n    \/\/ ...   \n    dependencies {     \n        \/\/ ...     \n        classpath 'com.google.gms:google-services:4.2.0'   \n    } \n}<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li>Add the following to the <strong>very bottom<\/strong> of your app <strong><em>android\/app\/build.gradle<\/em><\/strong> file, to apply the plugin to your project: <\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>apply plugin: 'com.google.gms.google-services'<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li>The  Firebase modules need to be installed as project dependencies. In the <strong><em>android\/app\/build.gradle<\/em><\/strong> file,  add the following:<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>dependencies {\n  \/\/ This should be here already\n  implementation project(':react-native-firebase')\n  \/\/ Firebase dependencies\n  implementation \"com.google.android.gms:play-services- \n  base:16.1.0\"\n  implementation \"com.google.firebase:firebase-core:16.0.9\"\n...\n<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Please note <\/strong>that, due to some breaking changes in v12+ of the Android Firebase libraries, you\u2019ll need to upgrade your Gradle version to at least v4.4 and make a few other tweaks as follows: <ul><li>In  <strong><em>android\/gradle\/wrapper\/gradle-wrapper.properties<\/em><\/strong>,       update the gradle URL to <strong>gradle-4.4-all.zip<\/strong>. <\/li><li>In <strong><em>android\/build.gradle<\/em><\/strong> check that you have<strong> google() <\/strong>      specified in the buildScript repositories section:<\/li><\/ul><\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>buildscript {\n    repositories {\n        google()  \/\/ &lt;-- Check this line exists and is above jcenter\n        jcenter()\n        \/\/ ...\n    }\n    \/\/ ...\n}\n<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li> In <strong><em>android\/build.gradle<\/em><\/strong> update Android build tools to version <strong>3.4.1<\/strong>: <\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>classpath 'com.android.tools.build:gradle:3.4.1'<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li>In <strong><em>android\/app\/build.gradle<\/em><\/strong> update all your compile statements to be implemented (If you\u2019re using the latest version of RN then you would probably have it but just double check), e.g:<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>implementation project(':react-native-firebase')<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li>As per <a href=\"https:\/\/rnfirebase.io\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\">rnfirebase.io<\/a>, when running your app from within Android Studio, you may encounter Missing Byte Code errors. This is due to a known issue with version 3.1.x of the android tools plugin: <a rel=\"noreferrer noopener\" href=\"https:\/\/issuetracker.google.com\/issues\/72811718\" target=\"_blank\">https:\/\/issuetracker.google.com\/issues\/72811718<\/a>. You&#8217;ll need to disable Instant Run to get past this error.<\/li><\/ul>\n\n\n\n<p><strong>Please note <\/strong>that Google Play services from 11.2.0 onwards require their dependencies to be downloaded from Google\u2019s Maven repository so add the required reference to the repositories section of the project level <strong><em>build.gradle (android\/build.gradle):<\/em><\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>allprojects {\n    repositories {\n        mavenLocal()\n        google() \/\/ &lt;-- Add this line above jcenter\n        jcenter()\n        maven {\n            \/\/ All of React Native (JS, Obj-C sources, Android binaries) is installed from npm\n            url \"$rootDir\/..\/node_modules\/react-native\/android\"\n        }\n    }\n}<\/code><\/pre>\n\n\n\n<p><strong>Also, note <\/strong>that when using <strong>react-native-firebase<\/strong> with <strong>Proguard<\/strong> enabled <strong>(minifyEnabled true in android\/app\/build.gradle)<\/strong> you need to update your <strong>proguard-rules.pro<\/strong> file <strong><em>(android\/app\/proguard-rules.pro)<\/em><\/strong> to include the following lines:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>-keep class io.invertase.firebase.** { *; }\n-dontwarn io.invertase.firebase.**<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Conclusion<\/h4>\n\n\n\n<p>After performing all the steps, go back to the Firebase console and perform this step to make sure that your integration is successful:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"939\" height=\"499\" src=\"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2019\/09\/final-firebase-rn.png\" alt=\"Integrate React Native with Firebase Console\" class=\"wp-image-3316\" srcset=\"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2019\/09\/final-firebase-rn.png 939w, https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2019\/09\/final-firebase-rn-300x159.png 300w, https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2019\/09\/final-firebase-rn-768x408.png 768w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><\/figure>\n\n\n\n<p>The <strong>RNFirebasePackage<\/strong> only provides your application with access to <a rel=\"noreferrer noopener\" href=\"https:\/\/rnfirebase.io\/docs\/v5.x.x\/core\/reference\/core\" target=\"_blank\">Core<\/a> features. Check out the <a rel=\"noreferrer noopener\" href=\"https:\/\/rnfirebase.io\/docs\/v5.x.x\/getting-started\" target=\"_blank\">rnfirebase.io<\/a> installation guides to integrate other modules of firebase and see how to use them. Till now I have used Firebase crashlytics, push-notification, deep linking, and analytics, and it was all fun! Mostly, you would have to just add some dependencies on iOS and Android respectively and voila! Don\u2019t forget to follow each step completely as written while integrating Firebase with your React Native app.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Although known mostly for its authentication services, firebase also comes with other powerful functionalities like, push notifications, analytics, crash reports, and much more! Integrating Firebase with your React Native app can help you quickly deploy, improve, and grow your app. According to Google: Firebase is Google\u2019s mobile application development platform that helps you build, improve, &hellip; <a href=\"https:\/\/www.folio3.com\/mobile\/blog\/integrating-firebase-with-react-native-ios-and-android\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Integrating Firebase with React Native (iOS and Android)&#8221;<\/span><\/a><\/p>\n","protected":false},"author":37,"featured_media":3353,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[35,36,37,34,33,32],"class_list":["post-3313","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","tag-android","tag-cross-platform","tag-development","tag-firebase","tag-ios","tag-react-native"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Integrating Firebase with React Native (iOS and Android) - Folio3 Blog<\/title>\n<meta name=\"description\" content=\"Although known mostly for its authentication services, firebase also comes with other powerful functionalities. Quickly deploy, improve, and grow your app by integrating Firebase with React Native.\" \/>\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.folio3.com\/mobile\/blog\/integrating-firebase-with-react-native-ios-and-android\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Integrating Firebase with React Native (iOS and Android) - Folio3 Blog\" \/>\n<meta property=\"og:description\" content=\"Although known mostly for its authentication services, firebase also comes with other powerful functionalities. Quickly deploy, improve, and grow your app by integrating Firebase with React Native.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.folio3.com\/mobile\/blog\/integrating-firebase-with-react-native-ios-and-android\/\" \/>\n<meta property=\"og:site_name\" content=\"Mobile App Development Services\" \/>\n<meta property=\"article:published_time\" content=\"2019-09-06T06:05:49+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-11-24T08:03:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2019\/09\/Firebase-ReactNative-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"900\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Noc Folio3\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Noc Folio3\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/integrating-firebase-with-react-native-ios-and-android\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/integrating-firebase-with-react-native-ios-and-android\/\"},\"author\":{\"name\":\"Noc Folio3\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/#\/schema\/person\/0b6e4f68efbd12d222ac9422766c61eb\"},\"headline\":\"Integrating Firebase with React Native (iOS and Android)\",\"datePublished\":\"2019-09-06T06:05:49+00:00\",\"dateModified\":\"2020-11-24T08:03:27+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/integrating-firebase-with-react-native-ios-and-android\/\"},\"wordCount\":963,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/integrating-firebase-with-react-native-ios-and-android\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2019\/09\/Firebase-ReactNative-1.jpg\",\"keywords\":[\"android\",\"cross-platform\",\"development\",\"firebase\",\"ios\",\"react-native\"],\"articleSection\":[\"Blog\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.folio3.com\/mobile\/blog\/integrating-firebase-with-react-native-ios-and-android\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/integrating-firebase-with-react-native-ios-and-android\/\",\"url\":\"https:\/\/www.folio3.com\/mobile\/blog\/integrating-firebase-with-react-native-ios-and-android\/\",\"name\":\"Integrating Firebase with React Native (iOS and Android) - Folio3 Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/integrating-firebase-with-react-native-ios-and-android\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/integrating-firebase-with-react-native-ios-and-android\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2019\/09\/Firebase-ReactNative-1.jpg\",\"datePublished\":\"2019-09-06T06:05:49+00:00\",\"dateModified\":\"2020-11-24T08:03:27+00:00\",\"description\":\"Although known mostly for its authentication services, firebase also comes with other powerful functionalities. Quickly deploy, improve, and grow your app by integrating Firebase with React Native.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/integrating-firebase-with-react-native-ios-and-android\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.folio3.com\/mobile\/blog\/integrating-firebase-with-react-native-ios-and-android\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/integrating-firebase-with-react-native-ios-and-android\/#primaryimage\",\"url\":\"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2019\/09\/Firebase-ReactNative-1.jpg\",\"contentUrl\":\"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2019\/09\/Firebase-ReactNative-1.jpg\",\"width\":\"1920\",\"height\":\"900\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/integrating-firebase-with-react-native-ios-and-android\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.folio3.com\/mobile\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Integrating Firebase with React Native (iOS and Android)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/#website\",\"url\":\"https:\/\/www.folio3.com\/mobile\/\",\"name\":\"Mobile App Development Services\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.folio3.com\/mobile\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/#organization\",\"name\":\"Mobile App Development Services\",\"url\":\"https:\/\/www.folio3.com\/mobile\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2020\/12\/folio3-mobile.png\",\"contentUrl\":\"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2020\/12\/folio3-mobile.png\",\"width\":210,\"height\":50,\"caption\":\"Mobile App Development Services\"},\"image\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/#\/schema\/person\/0b6e4f68efbd12d222ac9422766c61eb\",\"name\":\"Noc Folio3\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/29f05a21b8db20048e7717694b024bbd?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/29f05a21b8db20048e7717694b024bbd?s=96&d=mm&r=g\",\"caption\":\"Noc Folio3\"},\"url\":\"https:\/\/www.folio3.com\/mobile\/blog\/author\/noc\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Integrating Firebase with React Native (iOS and Android) - Folio3 Blog","description":"Although known mostly for its authentication services, firebase also comes with other powerful functionalities. Quickly deploy, improve, and grow your app by integrating Firebase with React Native.","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.folio3.com\/mobile\/blog\/integrating-firebase-with-react-native-ios-and-android\/","og_locale":"en_US","og_type":"article","og_title":"Integrating Firebase with React Native (iOS and Android) - Folio3 Blog","og_description":"Although known mostly for its authentication services, firebase also comes with other powerful functionalities. Quickly deploy, improve, and grow your app by integrating Firebase with React Native.","og_url":"https:\/\/www.folio3.com\/mobile\/blog\/integrating-firebase-with-react-native-ios-and-android\/","og_site_name":"Mobile App Development Services","article_published_time":"2019-09-06T06:05:49+00:00","article_modified_time":"2020-11-24T08:03:27+00:00","og_image":[{"width":1920,"height":900,"url":"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2019\/09\/Firebase-ReactNative-1.jpg","type":"image\/jpeg"}],"author":"Noc Folio3","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Noc Folio3","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.folio3.com\/mobile\/blog\/integrating-firebase-with-react-native-ios-and-android\/#article","isPartOf":{"@id":"https:\/\/www.folio3.com\/mobile\/blog\/integrating-firebase-with-react-native-ios-and-android\/"},"author":{"name":"Noc Folio3","@id":"https:\/\/www.folio3.com\/mobile\/#\/schema\/person\/0b6e4f68efbd12d222ac9422766c61eb"},"headline":"Integrating Firebase with React Native (iOS and Android)","datePublished":"2019-09-06T06:05:49+00:00","dateModified":"2020-11-24T08:03:27+00:00","mainEntityOfPage":{"@id":"https:\/\/www.folio3.com\/mobile\/blog\/integrating-firebase-with-react-native-ios-and-android\/"},"wordCount":963,"commentCount":0,"publisher":{"@id":"https:\/\/www.folio3.com\/mobile\/#organization"},"image":{"@id":"https:\/\/www.folio3.com\/mobile\/blog\/integrating-firebase-with-react-native-ios-and-android\/#primaryimage"},"thumbnailUrl":"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2019\/09\/Firebase-ReactNative-1.jpg","keywords":["android","cross-platform","development","firebase","ios","react-native"],"articleSection":["Blog"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.folio3.com\/mobile\/blog\/integrating-firebase-with-react-native-ios-and-android\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.folio3.com\/mobile\/blog\/integrating-firebase-with-react-native-ios-and-android\/","url":"https:\/\/www.folio3.com\/mobile\/blog\/integrating-firebase-with-react-native-ios-and-android\/","name":"Integrating Firebase with React Native (iOS and Android) - Folio3 Blog","isPartOf":{"@id":"https:\/\/www.folio3.com\/mobile\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.folio3.com\/mobile\/blog\/integrating-firebase-with-react-native-ios-and-android\/#primaryimage"},"image":{"@id":"https:\/\/www.folio3.com\/mobile\/blog\/integrating-firebase-with-react-native-ios-and-android\/#primaryimage"},"thumbnailUrl":"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2019\/09\/Firebase-ReactNative-1.jpg","datePublished":"2019-09-06T06:05:49+00:00","dateModified":"2020-11-24T08:03:27+00:00","description":"Although known mostly for its authentication services, firebase also comes with other powerful functionalities. Quickly deploy, improve, and grow your app by integrating Firebase with React Native.","breadcrumb":{"@id":"https:\/\/www.folio3.com\/mobile\/blog\/integrating-firebase-with-react-native-ios-and-android\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.folio3.com\/mobile\/blog\/integrating-firebase-with-react-native-ios-and-android\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.folio3.com\/mobile\/blog\/integrating-firebase-with-react-native-ios-and-android\/#primaryimage","url":"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2019\/09\/Firebase-ReactNative-1.jpg","contentUrl":"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2019\/09\/Firebase-ReactNative-1.jpg","width":"1920","height":"900"},{"@type":"BreadcrumbList","@id":"https:\/\/www.folio3.com\/mobile\/blog\/integrating-firebase-with-react-native-ios-and-android\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.folio3.com\/mobile\/"},{"@type":"ListItem","position":2,"name":"Integrating Firebase with React Native (iOS and Android)"}]},{"@type":"WebSite","@id":"https:\/\/www.folio3.com\/mobile\/#website","url":"https:\/\/www.folio3.com\/mobile\/","name":"Mobile App Development Services","description":"","publisher":{"@id":"https:\/\/www.folio3.com\/mobile\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.folio3.com\/mobile\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.folio3.com\/mobile\/#organization","name":"Mobile App Development Services","url":"https:\/\/www.folio3.com\/mobile\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.folio3.com\/mobile\/#\/schema\/logo\/image\/","url":"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2020\/12\/folio3-mobile.png","contentUrl":"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2020\/12\/folio3-mobile.png","width":210,"height":50,"caption":"Mobile App Development Services"},"image":{"@id":"https:\/\/www.folio3.com\/mobile\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.folio3.com\/mobile\/#\/schema\/person\/0b6e4f68efbd12d222ac9422766c61eb","name":"Noc Folio3","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.folio3.com\/mobile\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/29f05a21b8db20048e7717694b024bbd?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/29f05a21b8db20048e7717694b024bbd?s=96&d=mm&r=g","caption":"Noc Folio3"},"url":"https:\/\/www.folio3.com\/mobile\/blog\/author\/noc\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/posts\/3313"}],"collection":[{"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/users\/37"}],"replies":[{"embeddable":true,"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/comments?post=3313"}],"version-history":[{"count":17,"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/posts\/3313\/revisions"}],"predecessor-version":[{"id":5252,"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/posts\/3313\/revisions\/5252"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/media\/3353"}],"wp:attachment":[{"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/media?parent=3313"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/categories?post=3313"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/tags?post=3313"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}