How to Upload Photos to Storage Firebase With Expo React Native
Younes Henni
Posted on • Updated on
Upload Files Using React Native and Firebase (Part 1)
Originally published in Medium.
Overview
In this comprehensive serial, I volition evidence 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 volition explore the following topics:
-
Create and configure a Firebase Storage back-cease 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 concluding implementation y'all are going to build in this series.
Y'all tin detect the full lawmaking in Github.
Prerequisites
Make sure y'all 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 earlier, you need to follow the pace-past-step installation guide in the official docs. (Terminate at the Running your React Native application section).
For the purpose of this tutorial, make certain to choose the option React Native CLI.
One more thing. To avoid dependencies mismatch, I recommend you install the same dependencies versions equally in my packet.json at the GitHub repo.
1. Start a New React Native Project
Run the following control in your concluding.
npx react-native init RNFirebase Navigate into the project root directory.
Run the app in the iOS simulator by typing the command.
For Android, make certain yous have an emulator running. Type the control.
npx react-native run-android If all goes well, you should see the app running in your iOS simulator and Android emulator.
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 once again from the terminal.
two. Add Firebase to Your Project
If you are not already a member, y'all need to sign upwards for Firebase Cloud Services. Once this is done, y'all tin can at present navigate to the Firebase console and create a new project. Name it every bit you wish.
In gild to integrate Firebase into our React Native app, nosotros will use the awesome open-source react-native-firebase library from Invertase.
Add together 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 brand 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 together app button as shown beneath.
Select the Android icon every bit shown beneath.
Yous need to fill in the info in order to register the app (effigy beneath).
The offset field is mandatory while the other ii are optional. The Android package proper noun (showtime field) tin can exist obtained from android/app/build.gradle. Copy the string value of applicationId.
applicationId " com.RNFirebase " So, fill in the app nickname field. You tin can leave the third field blank. The panel should wait similar this.
Printing on Register app. This is information technology for step 1.
Footstep two is to download the google-services.json file.
Press the download push button then add together the file to your project at the following location RNFirebase/android/app/.
Footstep 3 for adding the Firebase SDK is not necessary when using react-native-firebase.
Now, inside your project, navigate to android/build.gradle and add together the google-services dependency.
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.
utilize plugin : ' com.google.gms.google-services ' 2.2. Rebuild your Android project
Close the existing concluding (metro bundler running your app) and run the app over 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 continued to your Firebase project.
Optional
You can go dorsum to the Firebase panel and run step four. Yous should run into a success bulletin indicating the installation is consummate.
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 fourth dimension, when pressing the Add app push button, select iOS as shown in the figure below.
Like to the Android example, y'all volition be prompted to fill in the following course.
You can add an app nickname (field two) and leave field three empty.
Field one, though, requires the iOS bundle ID. To go your iOS bundle ID, follow these steps.
-
Open Xcode.
-
Press open a new project.
-
Open up the following file:
RNFirebase/ios/RNFirebase.xcworkspace. -
Go to the General tab as shown in the below figure.
The Parcel Identifier is the second field in the Identity section.
org.reactjs.native.instance.RNFirebase
Copy and paste it into field ane in the Firebase console. Now, printing the Register app push.
For step 2, press the download button to get the GoogleService-Info.plist file locally.
You need to move GoogleService-Info.plist within your projection. To do and then, open up RNFirebase/ios/RNFirebase.xcworkspace using Xcode. Correct-click the project name and select Add together Files to RNFirebase (meet beneath).
A window will pop up. Select the GoogleService-Info.plist file. Brand certain that Re-create items if needed and Create groups are checked (every bit seen in the figure above).
Press the Add button.
Next, open the following RNFirebase/ios/RNFirebase/AppDelegate.chiliad file in your editor of choice (preferably from Xcode since you are already at that place) and add together the following import at the superlative.
Within the didFinishLaunchingWithOptions function, add the following lawmaking (bold text).
- ( BOOL ) application :( UIApplication * ) application didFinishLaunchingWithOptions :( NSDictionary * ) launchOptions { // add this if ([ FIRApp defaultApp ] == nil ) { [ FIRApp configure ]; } // .. } Save and close.
two.4. Rebuild the iOS project
Go back to your terminal and impale any metro bundler running. Yous need to rebuild the project and run it again. From the root of your projection, do the post-obit.
cd ios pod install --repo-update This should kicking-start the installation of the dependencies.
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 tin can skip step three and stride four every bit they are taken intendance of past the react-native-firebase library. You lot tin run step five to verify that the installation is complete.
Conclusion
Congratulations. Now you lot have successfully configured react-native-firebase for iOS and Android.
In the adjacent 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 lot tin can bound to function ii right here.
trinklethspolies1974.blogspot.com
Source: https://dev.to/younesh1989/upload-files-using-react-native-and-firebase-part-1-a7h
Belum ada Komentar untuk "How to Upload Photos to Storage Firebase With Expo React Native"
Posting Komentar