Upload Files Using React Native and Firebase (Part 1)
Tags: javascript, firebase, reactnative, webdev
Published: 2020-01-13 23:03:35

---
title: Upload Files Using React Native and Firebase (Part 1)
published: true
description: Add Firebase to your React Native project
tags: javascript, firebase, react-native, webdev
cover_image: https://firebasestorage.googleapis.com/v0/b/react-native-social-auth-5821b.appspot.com/o/Screenshot%202020-01-13%20at%2017.23.03.png?alt=media&token=5366865b-d0ac-45fd-8965-64874404521e
---

Originally published in Medium. {% medium https://medium.com/better-programming/file-upload-using-react-native-and-firebase-part-1-b77b2e330f1e %}

#Overview

In this comprehensive series, I will show you how to build a basic full-stack React Native app to let users upload and display photos to/from Firebase storage using their mobile phones.

We will explore the following topics:

* Create and configure a Firebase Storage back-end for a React Native app.

* Access the device library and select a photo using React Native Image Picker.

* Upload photos to Firebase Storage.

* Build a tracker to show upload progress.

* Display photos from the Firebase URIs.

Here is a video demo of the final implementation you are going to build in this series. {% youtube NnwztrkzQQc %} 

You can find the full code in [Github] (https://github.com/yhenni1989/jarvis).

#Prerequisites

Make sure you have all the tools to run a React Native app on your machine for both iOS and Android.

If you’ve never worked with React Native before, you need to follow the step-by-step installation guide in the official [docs] (https://facebook.github.io/react-native/docs/getting-started). (Stop at the Running your React Native application section).

For the purpose of this tutorial, make sure to choose the option React Native CLI.

One more thing. To avoid dependencies mismatch, I recommend you install the same dependencies versions as in my `package.json` at the GitHub [repo] (https://github.com/yhenni1989/jarvis).

# 1. Start a New React Native Project

Run the following command in your terminal.

```
npx react-native init RNFirebase
```

Navigate into the project root directory.

```
cd RNFirebase
```

Run the app in the iOS simulator by typing the command.

```
npx react-native run-ios
```

For Android, make sure you have an emulator running. Type the command.

```
npx react-native run-android
```

If all goes well, you should see the app running in your iOS simulator and Android emulator.

![Alt React native boilerplate apps in iOS and Android.](https://firebasestorage.googleapis.com/v0/b/react-native-social-auth-5821b.appspot.com/o/apps.png?alt=media&token=2e269118-36a5-4000-b004-d1452316d498)

####Note 

If you have trouble running the app in your Android emulator, open your `projectName/android/build.gradle` file in the emulator and run it first. Then, try to run the app again from the terminal.

# 2. Add Firebase to Your Project

If you are not already a member, you need to sign up for [Firebase Cloud Services] (https://firebase.google.com/). Once this is done, you can now navigate to the Firebase console and create a new project. Name it as you wish.

![Alt You can add projects from the Firebase console.](https://firebasestorage.googleapis.com/v0/b/react-native-social-auth-5821b.appspot.com/o/Screenshot%202020-01-05%20at%2017.15.05.png?alt=media&token=3bc2f6e7-ea36-41cd-b101-6c87f436accc)

In order to integrate Firebase into our React Native app, we will use the awesome open-source `react-native-firebase` library from [Invertase](https://invertase.io/oss/react-native-firebase/quick-start/existing-project).

Add the library to your project by typing the following in your terminal.

```
yarn add @react-native-firebase/app
```

You need to perform additional configurations to make `react-native-firebase` work with Android and iOS.

### 2.1. Configure Firebase for Android

Open your newly-made project in the Firebase console. Press the `+ Add app` button as shown below.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/ixruit0hpe9zbayt7u5p.png)

Select the Android icon as shown below.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/t9iodo8ps9sjpz6siq7h.png)

You need to fill in the info in order to register the app (figure below).

The first field is mandatory while the other two are optional. The Android package name (first field) can be obtained from `android/app/build.gradle`. Copy the string value of `applicationId`.

```javascript
applicationId "com.RNFirebase"
```

Then, fill in the app nickname field. You can leave the third field blank. The panel should look like this.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/gne10206uz7m73a6xu3y.png)

Press on `Register app`. This is it for step 1.

Step two is to download the `google-services.json` file.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/z8m2h2w4ey272kjq811s.png)

Press the download button then add the file to your project at the following location `RNFirebase/android/app/`.

Step three for adding the Firebase SDK is not necessary when using `react-native-firebase`.

Now, inside your project, navigate to `android/build.gradle` and add the `google-services` dependency.

```javascript
buildscript {
  dependencies {
    // ..    
    classpath("com.google.gms:google-services:4.2.0")
  }
}
```

To apply the plugin, go to `android/app/build.gradle` and add the following line of code at the very bottom of the file.

```javascript
apply plugin: 'com.google.gms.google-services'
```

### 2.2. Rebuild your Android project

Close the existing terminal (metro bundler running your app) and run the app again.

```
npx react-native run-android
```

If you are having build issues, you can first rebuild the project by launching your Android studio emulator, opening your `projectName/android/build.gradle` file, and running it.

Once the build is successful, go back to your terminal and run the `npx` command again. The app should launch with no errors. Your React Native Android app is now connected to your Firebase project.

#### Optional 

You can go back to the Firebase console and run step four. You should see a success message indicating the installation is complete.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/8txkp8an8txb4d8obsfc.png)

### 2.3. Firebase setup for iOS

We will now configure Firebase to work with iOS.

Go to your project dashboard in the Firebase console and this time, when pressing the `Add app` button, select iOS as shown in the figure below.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/hcuze8dod2k87wxlnmhh.png)

Similar to the Android case, you will be prompted to fill in the following form.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/ukwcw9xocpyuwn4fnzp8.png)

You can add an app nickname (field two) and leave field three empty.

Field one, though, requires the iOS bundle ID. To get your iOS bundle ID, follow these steps.

* Open Xcode.

* Press open a new project.

* Open the following file: `RNFirebase/ios/RNFirebase.xcworkspace`.

* Go to the General tab as shown in the below figure.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/0s7qzcm73x4alum52195.png)


The Bundle Identifier is the second field in the Identity section.

`org.reactjs.native.example.RNFirebase`

Copy and paste it into field one in the Firebase console. Now, press the `Register` app button.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/1tbxw5w5p47mo84a6m79.png)

For step two, press the download button to get the `GoogleService-Info.plist` file locally.

You need to move `GoogleService-Info.plist` inside your project. To do so, open `RNFirebase/ios/RNFirebase.xcworkspace` using Xcode. Right-click the project name and select `Add Files to RNFirebase` (see below).

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/7fuy75fcmmmggpqahpp7.png)

A window will pop up. Select the `GoogleService-Info.plist` file. Make sure that Copy items if needed and Create groups are checked (as seen in the figure above).

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/lb3kxl7g927gyhl4ddhw.png)

Press the `Add` button.

Next, open the following `RNFirebase/ios/RNFirebase/AppDelegate.m` file in your editor of choice (preferably from Xcode since you are already there) and add the following import at the top.

```swift
@import Firebase;
```

Within the `didFinishLaunchingWithOptions` function, add the following code (bold text).

```swift
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  // add this
  if ([FIRApp defaultApp] == nil) {
    [FIRApp configure];
  }

  // ..
}
```

Save and close.

### 2.4. Rebuild the iOS project

Go back to your terminal and kill any metro bundler running. You need to rebuild the project and run it again. From the root of your project, do the following.

```
cd ios
pod install --repo-update
```

This should kick-start the installation of the dependencies.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/if5uu9w1mi2gzqlmffef.png)

Time to rebuild the app. Go back to your project root and relaunch the simulator.

```
cd ..
npx react-native run-ios
```

Back in the Firebase console, you can skip step three and step four as they are taken care of by the `react-native-firebase` library. You can run step five to verify that the installation is complete.

#Conclusion

Congratulations. Now you have successfully configured `react-native-`firebase for iOS and Android.

In the next parts, we will build an app to access the device’s library, upload photos from the device to the Firebase Storage and retrieve the photos to display them on the device. You can jump to part 2 right [here] (https://dev.to/younesh1989/upload-files-using-react-native-and-firebase-part-2-571o).