React-Native Firebase Phone Authentication with CRUD Operations and Image Upload on storage
Tags: reactnative, firebase, crud, authentication
Published: 2020-03-27 01:11:05

<section name="6e4b" class="section section--body section--first section--last"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><p name="28b7" class="graf graf--p graf-after--figure">This post is all about authenticating firebase phone number authentication and CRUD operations in your cool new app. In this post, you will learn</p><ul class="postList"><li name="df63" class="graf graf--li graf-after--p">How to implement <code class="markup--code markup--li-code">authenticate phone number</code>in our app.</li><li name="039a" class="graf graf--li graf-after--li">How to perform Firebase <code class="markup--code markup--li-code">CRUD</code> operations in React-Native app.</li><li name="9ab1" class="graf graf--li graf-after--li">How to upload an image on firebase storage</li></ul><p name="00df" class="graf graf--p graf-after--li is-selected">Before start, first you will need a React-Native app to start with, hence you can follow <a href="https://facebook.github.io/react-native/docs/getting-started"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--p-strong">how to create a react-native app for beginners</strong> </a>and start after that from here.</p><blockquote name="5aba" class="graf graf--blockquote graf-after--p"><strong class="markup--strong markup--blockquote-strong">Complete source code of this tutorial is available here&#8202;—&#8202;</strong><a href="https://github.com/mdshadman/react-native-firebase-phone-auth-CRUD"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--blockquote-strong">react-native-firebase-phone-auth-CRUD</strong></a></blockquote><h3 name="4297" class="graf graf--h3 graf-after--blockquote">What is React-Native</h3><p name="e21e" class="graf graf--p graf-after--h3">React Native is a JavaScript framework for writing real, natively rendering mobile applications for iOS and Android. It’s based on React, Facebook’s JavaScript library for building user interfaces, but instead of targeting the browser, it targets mobile platforms. In other words: web developers can now write mobile applications that look and feel truly “native,” all from the comfort of a JavaScript library that we already know and love. Plus, because most of the code you write can be shared between platforms, React Native makes it easy to simultaneously develop for both Android and iOS.</p><p name="5626" class="graf graf--p graf-after--p">Similar to React for the Web, React Native applications are written using a mixture of JavaScript and XML-Esque markup, known as JSX. Then, under the hood, the React Native “bridge” invokes the native rendering APIs in Objective-C (for iOS) or Java (for Android). Thus, your application will render using real mobile UI components, <em class="markup--em markup--p-em">not</em> webviews, and will look and feel like any other mobile application. React Native also exposes JavaScript interfaces for platform APIs, so your React Native apps can access platform features like the phone camera, or the user’s location.</p><p name="de54" class="graf graf--p graf-after--p">React Native currently supports both iOS and Android and has the potential to expand to future platforms as well. In this tutorial, we’ll cover firebase phone authentication and CRUD operations. The vast majority of the code we write will be cross-platform. And yes: you can really use React Native to build production-ready mobile applications! Some anecdota: <a href="http://bit.ly/1YipO7A"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Facebook</a>, <a href="http://bit.ly/1PPEiZH"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Palantir</a>, and <a href="http://bit.ly/1PPEjNg"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">TaskRabbit</a> are already using it in production for user-facing applications.<br>&nbsp;The fact that React Native actually renders using its host platform’s standard rendering APIs enables it to stand out from most existing methods of cross-platform application development, like Cordova or Ionic.</p><p name="f6cd" class="graf graf--p graf-after--p">Existing methods of writing mobile applications using combinations of JavaScript, HTML, and CSS typically render using webviews. While this approach can work, it also comes with drawbacks, especially around performance. Additionally, they do not usually have access to the host platform’s set of native UI elements. When these frameworks do try to mimic native UI elements, the results usually “feel” just a little off; reverse-engineering all the fine details of things like animations takes an enormous amount of effort, and they can quickly become out of date.</p><h3 name="6791" class="graf graf--h3 graf-after--p">What and why Firebase?</h3><p name="d5b7" class="graf graf--p graf-after--h3"><strong class="markup--strong markup--p-strong">Firebase</strong> is a mobile and web application development platform developed by Firebase Inc. in 2011, then was acquired by Google in 2014. Firebase is a toolset to “build, improve, and grow your app”. It gives you functionality like analytics, databases, messaging and crash reporting so you can move quickly and focus on your users.</p><p name="3cf8" class="graf graf--p graf-after--p">Today Firebase is one of the fastest-growing platforms for application development. Some of the reasons are</p><ol class="postList"><li name="b9a5" class="graf graf--li graf-after--p">You don’t need to write a back-end from scratch. Firebase is a ready-made back-end, with a DB attached to it. You just integrate Firebase SDK in your app and you are good to go.</li><li name="a4fa" class="graf graf--li graf-after--li">It’s R-E-A-L T-I-M-E 🕺.<br>If you are a developer, you understand the importance of a real-time back-end/database in today’s app market. Things like chat, news feeds, ratings, bookings, etc all are very easy if you factor in real-time operations</li><li name="584b" class="graf graf--li graf-after--li">Simple Authentication operations.<br>The very first things required in a user-facing application is login/register operations. Firebase handles this very smoothly and with minimum coding effort. You can integrate a number of social authentication services like Facebook, Google etc. with Firebase as well.</li><li name="7b21" class="graf graf--li graf-after--li">You get tonnes of additional features in-built e.g. AdMob, analytics, etc 😍😍</li><li name="a038" class="graf graf--li graf-after--li">It’s free, up to a certain usage limit. But this is pretty awesome for developers who are trying things, or making MVPs, or even for small scale app businesses. 🤑</li></ol><p name="7c03" class="graf graf--p graf-after--li">In this article, we will focus on <strong class="markup--strong markup--p-strong">Firebase with react-native— phone Auth with CRUD operations and image upload to firebase storage.</strong></p><p name="074f" class="graf graf--p graf-after--p">Before we start I assume you have already created a project and ready to integrate the firebase in that. <a href="https://enappd.com/blog/intergrate-firebase-in-react-native-app/73/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--p-strong">To add firebase in your project you can just follow this tutorial and start from here.</strong></a></p><h3 name="97ae" class="graf graf--h3 graf-after--p">1. Phone Number Authentication&#8202;—&#8202;What and&nbsp;why?</h3><p name="6280" class="graf graf--p graf-after--h3"><strong class="markup--strong markup--p-strong">Phone authentication</strong> allows users to sign in to <strong class="markup--strong markup--p-strong">Firebase</strong> using their <strong class="markup--strong markup--p-strong">phone</strong> as the authenticator. An SMS message is sent to the user via their <strong class="markup--strong markup--p-strong">phone</strong> number containing a unique code.</p><p name="e6f3" class="graf graf--p graf-after--p">Using phone authentication is a little more involved as it is a multi-step process which can differ between iOS and Android. The basic flow for phone authentication is as follows:</p><ol class="postList"><li name="01b0" class="graf graf--li graf-after--p">The user enters their phone number</li><li name="4fc6" class="graf graf--li graf-after--li">Firebase sends a verification code to the user’s phone</li><li name="5791" class="graf graf--li graf-after--li">The user enters the verification code</li><li name="d387" class="graf graf--li graf-after--li">Firebase confirms that the verification code matches and signs the user in</li></ol><p name="608a" class="graf graf--p graf-after--li">To start with phone authentication you need to install <code class="markup--code markup--p-code">reat-native-firebase</code> by executing the following command:</p><pre name="46bc" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">npm install --save react-native-firebase</code><br>yarn add react-native-firebase</pre><p name="0e3a" class="graf graf--p graf-after--pre"><a href="https://rnfirebase.io/docs/v5.x.x/installation/initial-setup"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">You can follow the official react-native-firebase link for any issue</a>.</p><p name="200b" class="graf graf--p graf-after--p">let's start with phone authentication, as I have performed all the actions and checked on android but I will cover for the android an IOS both in this tutorial.</p><h4 name="17bc" class="graf graf--h4 graf-after--p"><a href="https://rnfirebase.io/docs/v5.x.x/auth/android#Add-the-dependency"  class="markup--anchor markup--h4-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--h4-strong">Add the dependency</strong></a></h4><p name="6823" class="graf graf--p graf-after--h4"><strong class="markup--strong markup--p-strong">Android:<br></strong>Add the Firebase Authentication dependency to <code class="markup--code markup--p-code">android/app/build.gradle</code>:</p><pre name="6f8b" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">dependencies {<br>  // ...<br>  implementation "com.google.firebase:firebase-auth:17.0.0"<br>}</code></pre><p name="4da1" class="graf graf--p graf-after--pre">Then, <a href="https://rnfirebase.io/docs/v5.x.x/auth/android#Install-the-RNFirebase-Authentication-package"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Install the RNFirebase Authentication package</a><br>Add the <code class="markup--code markup--p-code">RNFirebaseAuthPackage</code> to your <code class="markup--code markup--p-code">android/app/src/main/java/com/[app name]/MainApplication.java</code>:</p><pre name="01a2" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">// ...<br>import io.invertase.firebase.RNFirebasePackage;<br>import io.invertase.firebase.auth.RNFirebaseAuthPackage; // &lt;-- Add this line<br>public class MainApplication extends Application implements ReactApplication {<br>    // ...<br>    @Override<br>    protected List&lt;ReactPackage&gt; getPackages() {<br>      return Arrays.&lt;ReactPackage&gt;asList(<br>          new MainReactPackage(),<br>          new RNFirebasePackage(),<br>          new RNFirebaseAuthPackage() // &lt;-- Add this line<br>      );<br>    }<br>  };<br>  // ...<br>}</code></pre><p name="4956" class="graf graf--p graf-after--pre">Now you are all set to use authentications in your app.</p><p name="5d85" class="graf graf--p graf-after--p"><code class="markup--code markup--p-code">signInWithPhoneNumber</code> is a more straight-forward implementation of handling the auth flow, however, it provides less flexibility to handle the various situations which may occur.</p><h4 name="feba" class="graf graf--h4 graf-after--p">i<a href="https://rnfirebase.io/docs/v5.x.x/auth/phone-auth#1.-Trigger-phone-auth"  class="markup--anchor markup--h4-anchor" rel="noopener"    target="_blank">. Trigger phone&nbsp;auth</a></h4><pre name="4f9d" class="graf graf--pre graf-after--h4"><code class="markup--code markup--pre-code">firebase.auth().signInWithPhoneNumber(phoneNumber)<br>  .then(confirmResult =&gt; // save confirm result to use with the manual verification code)<br>  .catch(error =&gt; /error);</code></pre><h3 name="5c04" class="graf graf--h3 graf-after--pre">ii<a href="https://rnfirebase.io/docs/v5.x.x/auth/phone-auth#2.-Confirm-verification-code"  class="markup--anchor markup--h3-anchor" rel="noopener"    target="_blank">. Confirm verification code</a></h3><pre name="99e8" class="graf graf--pre graf-after--h3"><code class="markup--code markup--pre-code">confirmResult.confirm(verificationCode)<br>  .then(user =&gt; // User is logged in){<br>  .catch(error =&gt; // Error with verification code);</code></pre><h3 name="aaf7" class="graf graf--h3 graf-after--pre">iii<a href="https://rnfirebase.io/docs/v5.x.x/auth/phone-auth#3.-%5BAndroid%5D-Handle-Auto-Verification"  class="markup--anchor markup--h3-anchor" rel="noopener"    target="_blank">. [Android] Handle Auto Verification</a></h3><p name="4a6f" class="graf graf--p graf-after--h3">To handle auto verification, we need to listen to <a href="https://rnfirebase.io/docs/v5.x.x/auth/reference/auth#onAuthStateChanged"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">auth#onAuthStateChanged</a>:</p><pre name="fe42" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">firebase.auth().onAuthStateChanged((user) =&gt; {<br>  if (user) // user is verified and logged in<br>});</code></pre><p name="ae6b" class="graf graf--p graf-after--pre"><strong class="markup--strong markup--p-strong">Full Working Example:</strong></p><p name="651a" class="graf graf--p graf-after--p">Logics here:</p><figure tabindex="0" contenteditable="false" name="14e2" class="graf graf--figure graf--iframe graf-after--p"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/mdshadman/2edeaf6e9f13de5563667f5e7d5a10e5.js %}</div></div><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for embed (optional)">Js part for phone auth</figcaption></figure><p name="44e4" class="graf graf--p graf-after--figure">View here:</p><figure tabindex="0" contenteditable="false" name="e740" class="graf graf--figure graf--iframe graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/mdshadman/e9b5fd55a1a286878254a428d62d72cb.js %}</div></div></figure><p name="a925" class="graf graf--p graf-after--figure">Here I have divided my login flow into three different parts as:</p><p name="f1e1" class="graf graf--p graf-after--p">1. LoginContainer contains the logic part</p><p name="2cd0" class="graf graf--p graf-after--p">2. LoginView Contains the View Part and</p><p name="62fd" class="graf graf--p graf-after--p">3. LoginStyles contains the CSS of the page</p><p name="7806" class="graf graf--p graf-after--p">Styles here:</p><figure tabindex="0" contenteditable="false" name="8637" class="graf graf--figure graf--iframe graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/mdshadman/c447ba7754772d68ae7457809eb458de.js %}</div></div></figure><p name="4450" class="graf graf--p graf-after--figure">Now you are all set to take the taste of phone authentication in your cool react-native app. Here I have used the latest react-native version 0.60.4. If you get any issues just clone my repository with the link provided above.</p><blockquote name="dce4" class="graf graf--blockquote graf-after--p"><strong class="markup--strong markup--blockquote-strong">Complete source code of this tutorial is available here&#8202;—&#8202;</strong><a href="https://github.com/mdshadman/react-native-firebase-phone-auth-CRUD"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--blockquote-strong">react-native-firebase-phone-auth-CRUD</strong></a></blockquote><h3 name="f1f1" class="graf graf--h3 graf-after--blockquote">2.CRUD Operations in react-native application</h3><p name="0665" class="graf graf--p graf-after--h3">Before you start, you need to add Firebase Firestore in your app.</p><h3 name="1238" class="graf graf--h3 graf-after--p"><a href="https://rnfirebase.io/docs/v5.x.x/firestore/android#Add-the-dependency"  class="markup--anchor markup--h3-anchor" rel="noopener"    target="_blank">Add the dependency</a></h3><p name="ecce" class="graf graf--p graf-after--h3">Add the Firebase Firestore dependency to <code class="markup--code markup--p-code">android/app/build.gradle</code>:</p><pre name="39bd" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">dependencies {<br>  // ...<br>  implementation "com.google.firebase:firebase-firestore:19.0.0"<br>}</code></pre><h3 name="ab0a" class="graf graf--h3 graf-after--pre"><a href="https://rnfirebase.io/docs/v5.x.x/firestore/android#Install-the-RNFirebase-Firestore-package"  class="markup--anchor markup--h3-anchor" rel="noopener"    target="_blank">Install the RNFirebase Firestore package</a></h3><p name="9ee1" class="graf graf--p graf-after--h3">Add the <code class="markup--code markup--p-code">RNFirebaseFirestorePackage</code> to your <code class="markup--code markup--p-code">android/app/src/main/java/com/[app name]/MainApplication.java</code>:</p><pre name="e1c3" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">// ...<br>import io.invertase.firebase.RNFirebasePackage;<br>import io.invertase.firebase.firestore.RNFirebaseFirestorePackage; // &lt;-- Add this line<br>public class MainApplication extends Application implements ReactApplication {<br>    // ...<br>    @Override<br>    protected List&lt;ReactPackage&gt; getPackages() {<br>      return Arrays.&lt;ReactPackage&gt;asList(<br>          new MainReactPackage(),<br>          new RNFirebasePackage(),<br>          new RNFirebaseFirestorePackage() // &lt;-- Add this line<br>      );<br>    }<br>  };<br>  // ...<br>}</code></pre><p name="40b0" class="graf graf--p graf-after--pre">Then,</p><h4 name="ddc5" class="graf graf--h4 graf-after--p"><a href="https://rnfirebase.io/docs/v5.x.x/firestore/android#Enable-multidex"  class="markup--anchor markup--h4-anchor" rel="noopener"    target="_blank">Enable multidex</a>:</h4><p name="88a3" class="graf graf--p graf-after--h4">Adding Firestore to your Android app requires <code class="markup--code markup--p-code"><a href="https://developer.android.com/studio/build/multidex"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">multiDexEnabled</a></code><a href="https://developer.android.com/studio/build/multidex"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank"> to be set to </a><code class="markup--code markup--p-code"><a href="https://developer.android.com/studio/build/multidex"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">true</a></code> in <code class="markup--code markup--p-code">android/app/build.gradle</code>:</p><pre name="5e32" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">//..<br>android {<br>  //..</code></pre><pre name="cde7" class="graf graf--pre graf-after--pre"><code class="markup--code markup--pre-code">  defaultConfig {<br>    //..<br>    multiDexEnabled true  // needed for firestore:<br>  }<br>  //..<br>}</code></pre><p name="de0d" class="graf graf--p graf-after--pre">Now you're all set to store and retrieve data in firebase Firestore.</p><h4 name="d6a9" class="graf graf--h4 graf-after--p"><strong class="markup--strong markup--h4-strong">1.Create</strong></h4><p name="cee7" class="graf graf--p graf-after--h4">You will need to add the <code class="markup--code markup--p-code">createDatabse()</code> method to persist an item collection in the Firestore database:</p><pre name="e260" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">createDatabse(){<br></code>firebase.firestore().collection('collection name').add({.....your data})<br><code class="markup--code markup--pre-code">}</code></pre><h4 name="e5aa" class="graf graf--h4 graf-after--pre"><strong class="markup--strong markup--h4-strong">2. Read</strong></h4><p name="0805" class="graf graf--p graf-after--h4">You will need to add the <code class="markup--code markup--p-code">readDatabse()</code> method to retrieve the available item from the Firestore collection:</p><pre name="3bc5" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">readDatabse() {<br>return firebase.firestore.collection('</code>collection name<code class="markup--code markup--pre-code">').</code>onSnapshot<code class="markup--code markup--pre-code">((data)=&gt;{console.log(data)});<br>}</code></pre><h4 name="3498" class="graf graf--h4 graf-after--pre"><strong class="markup--strong markup--h4-strong">3. Update</strong></h4><p name="315d" class="graf graf--p graf-after--h4">Next, you need to add the <code class="markup--code markup--p-code">updateDatabse()</code> method to update an item data by its identifier:</p><pre name="e241" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">updateDatabse(docId){<br>firebase.firestore.doc('</code>collection name<code class="markup--code markup--pre-code">/' + docId).update({data to update});<br>} </code></pre><p name="f875" class="graf graf--p graf-after--pre">Here, docId is the particular id that you get while fetching data from the Firestore, with this docId you will be able to update a particular doc from the list of docs.</p><h4 name="4ff2" class="graf graf--h4 graf-after--p"><strong class="markup--strong markup--h4-strong">4. Delete</strong></h4><p name="79c4" class="graf graf--p graf-after--h4">Finally, you can add the <code class="markup--code markup--p-code">deleteItem()</code> method to delete an item by its identifier:</p><pre name="c9b4" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">deleteItem(docId){<br>firebase.firestore.doc('</code>collection name<code class="markup--code markup--pre-code">/' + docId).delete();<br>}</code></pre><p name="953d" class="graf graf--p graf-after--pre">The complete working example is here:</p><figure tabindex="0" contenteditable="false" name="056b" class="graf graf--figure graf--iframe graf-after--p"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/mdshadman/8d5f94c5031af8037329b1eed7886c9b.js %}</div></div><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for embed (optional)">ADD and Delete with image upload</figcaption></figure><figure tabindex="0" contenteditable="false" name="447a" class="graf graf--figure graf--iframe graf-after--figure"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/mdshadman/5b6480337928ecc7c2bb3a2ea96db8b7.js %}</div></div><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for embed (optional)">CREATE and DELETE</figcaption></figure><blockquote name="7a79" class="graf graf--blockquote graf-after--figure"><strong class="markup--strong markup--blockquote-strong">Complete source code of this tutorial is available here&#8202;—&#8202;</strong><a href="https://github.com/mdshadman/react-native-firebase-phone-auth-CRUD"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--blockquote-strong">react-native-firebase-phone-auth-CRUD and image upload</strong></a></blockquote><h3 name="be55" class="graf graf--h3 graf-after--blockquote">3 Image Upload in react-native-firebase storage</h3><h3 name="d2e1" class="graf graf--h3 graf-after--h3"><a href="https://rnfirebase.io/docs/v5.x.x/storage/android#Add-the-dependency"  class="markup--anchor markup--h3-anchor" rel="noopener"    target="_blank">Add the dependency</a></h3><p name="3ad5" class="graf graf--p graf-after--h3">Add the Firebase Storage dependency to <code class="markup--code markup--p-code">android/app/build.gradle</code>:</p><pre name="0efd" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">dependencies {<br>  // ...<br>  implementation "com.google.firebase:firebase-storage:17.0.0"<br>}</code></pre><h3 name="f24f" class="graf graf--h3 graf-after--pre"><a href="https://rnfirebase.io/docs/v5.x.x/storage/android#Install-the-RNFirebase-Storage-package"  class="markup--anchor markup--h3-anchor" rel="noopener"    target="_blank">Install the RNFirebase Storage&nbsp;package</a></h3><p name="589f" class="graf graf--p graf-after--h3">Add the <code class="markup--code markup--p-code">RNFirebaseStoragePackage</code> to your <code class="markup--code markup--p-code">android/app/src/main/java/com/[app name]/MainApplication.java</code>:</p><pre name="e33e" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">// ...<br>import io.invertase.firebase.RNFirebasePackage;<br>import io.invertase.firebase.storage.RNFirebaseStoragePackage; // &lt;-- Add this line<br>public class MainApplication extends Application implements ReactApplication {<br>    // ...<br>    @Override<br>    protected List&lt;ReactPackage&gt; getPackages() {<br>      return Arrays.&lt;ReactPackage&gt;asList(<br>          new MainReactPackage(),<br>          new RNFirebasePackage(),<br>          new RNFirebaseStoragePackage() // &lt;-- Add this line<br>      );<br>    }<br>  };<br>  // ...<br>}</code></pre><p name="1096" class="graf graf--p graf-after--pre">Now you are all set to upload images on firebase Firestore and update that too. In the above gist, I have used a function <code class="markup--code markup--p-code">uploadImageTask()</code>&nbsp;. In this function, I have uploaded an image to my firebase storage and received the URL and saved that to my database. In uploadImageTask(), we have used default javascript function <strong class="markup--strong markup--p-strong">decodeURI</strong>(imageURl).</p><p name="a4b5" class="graf graf--p graf-after--p">Here, The <strong class="markup--strong markup--p-strong">decodeURI()</strong> function is used to decode URI generated by encodeURI<strong class="markup--strong markup--p-strong">()</strong>. Parameters: This function accepts single parameter complete_encoded_uri_string which holds the encoded string. Return Value: This function returns the decoded string (original string).</p><figure tabindex="0" contenteditable="false" name="d653" class="graf graf--figure graf--iframe graf-after--p"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/mdshadman/8d5f94c5031af8037329b1eed7886c9b.js %}</div></div><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for embed (optional)">image upload to Storage</figcaption></figure><p name="4817" class="graf graf--p graf-after--figure"><a href="https://rnfirebase.io/docs/v5.x.x/installation/ios"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Here all the functions are tested on android and to make it working in IOS please follow the IOS Setup from the </a><code class="markup--code markup--p-code"><a href="https://rnfirebase.io/docs/v5.x.x/installation/ios"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">react-native-firebase</a></code><a href="https://rnfirebase.io/docs/v5.x.x/installation/ios"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank"> documentation.<br>Once you setup then you can execute all the above functions or you can clone the repository.</a></p><p name="b508" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">You can follow all the steps and achieve this very easily or you can clone my repo on Github</strong></p><blockquote name="988e" class="graf graf--blockquote graf-after--p"><strong class="markup--strong markup--blockquote-strong">Complete source code of this tutorial is available here&#8202;—&#8202;</strong><a href="https://github.com/mdshadman/react-native-firebase-phone-auth-CRUD"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--blockquote-strong">react-native-firebase-phone-auth-CRUD and image upload</strong></a><strong class="markup--strong markup--blockquote-strong"> <em class="markup--em markup--blockquote-em">😎 😎 😎 🕺 🕺 🕺..…</em></strong></blockquote><h3 name="5082" class="graf graf--h3 graf-after--blockquote">Conclusion</h3><p name="3058" class="graf graf--p graf-after--h3">In this post, we learned how to integrate firebase phone auth with CRUD operations and image upload to the firebase storage. Since all the integrations are somehow tricky because of react-native stability but it has great documentation, if you face any issue please do ask me on our discuss section.</p><blockquote name="1b97" class="graf graf--blockquote graf-after--p"><strong class="markup--strong markup--blockquote-strong">Complete source code of this tutorial is available here&#8202;—</strong><a href="https://github.com/mdshadman/react-native-firebase-phone-auth-CRUD"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--blockquote-strong">&#8202;react-native-firebase-phone-auth-CRUD and image upload</strong></a></blockquote><h3 name="16b3" class="graf graf--h3 graf-after--blockquote">Next Steps</h3><p name="178a" class="graf graf--p graf-after--h3">Now that you have learned the implementation of <code class="markup--code markup--p-code"><strong class="markup--strong markup--p-strong">Firebase CRUD operations,phone auth, and image upload </strong></code>in react-native, you can also try</p><ul class="postList"><li name="9f48" class="graf graf--li graf-after--p"><a href="https://enappd.com/blog/ionic-4-paypal-payment-integration-for-apps-and-pwa/16"  class="markup--anchor markup--li-anchor" rel="nofollow noopener noopener noopener noopener noopener noopener noopener noopener noopener noopener"    target="_blank">Ionic 4 PayPal payment integration&#8202;—&#8202;for Apps and PWA</a></li><li name="aa95" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/ionic-4-stripe-payment-integration-with-firebase-for-apps-and-pwa/17"  class="markup--anchor markup--li-anchor" rel="nofollow noopener noopener noopener noopener noopener noopener noopener noopener noopener noopener"    target="_blank">Ionic 4 Stripe payment integration&#8202;—&#8202;for Apps and PWA</a></li><li name="fc67" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/how-to-integrate-apple-pay-in-ionic-4-apps/21"  class="markup--anchor markup--li-anchor" rel="nofollow noopener noopener noopener noopener noopener noopener noopener noopener noopener noopener"    target="_blank">Ionic 4 Apple Pay integration</a></li><li name="b1fc" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/twitter-login-in-ionic-4-apps-using-firebase/24"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Twitter login in Ionic 4 with Firebase</a></li><li name="57fe" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/facebook-login-in-ionic-4-apps-using-firebase/25"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Facebook login in Ionic 4 with Firebase</a></li><li name="97f4" class="graf graf--li graf-after--li"><a href="https://medium.com/enappd/using-geolocation-and-beacon-plugins-in-ionic-4-754b41304007"  class="markup--anchor markup--li-anchor"    target="_blank">Geolocation</a> in Ionic 4</li><li name="34a6" class="graf graf--li graf-after--li"><a href="https://medium.com/enappd/qr-code-scanning-and-optical-character-recognition-ocr-in-ionic-4-95fd46be91dd"  class="markup--anchor markup--li-anchor"    target="_blank">QR Code and scanners</a> in Ionic 4 and</li><li name="de81" class="graf graf--li graf-after--li"><a href="https://medium.com/enappd/how-to-translate-in-ionic-4-globalization-internationalization-and-localization-31ec5807a8bc"  class="markup--anchor markup--li-anchor"    target="_blank">Translations in Ionic 4</a></li></ul><p name="2930" class="graf graf--p graf-after--li">If you need a base to start your next Ionic 4 app, you can make your next awesome app using <a href="https://store.enappd.com/product/ionic-4-full-app/"  class="markup--anchor markup--p-anchor" rel="noopener nofollow noopener noopener nofollow noopener noopener nofollow noopener noopener noopener noopener noopener noopener noopener noopener noopener noopener"    target="_blank">Ionic 4 Full App</a></p><figure tabindex="0" contenteditable="false" name="89dc" class="graf graf--figure graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 442px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 63.2%;"></div><img class="graf-image" data-image-id="1*2BzL8TesnBHuazHr3VA4SQ.jpeg" data-width="760" data-height="480" src="https://cdn-images-1.medium.com/max/800/1*2BzL8TesnBHuazHr3VA4SQ.jpeg"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="f5df" class="graf graf--p graf--empty graf-after--figure graf--trailing"><br></p></div></div></section></div></article></main>