React Native Expo Firebase - Simplify Your Image Uploads with Image Picker Camera

Simplify Your Image Uploads with Expo Image Picker Camera and @Firebase Storage
#reactnative #firebase #camera

Learn how to upload images to Firebase Storage from a React Native Expo mobile application using Firebase javascript API and Expo Image Picker Camera. We will also create a simple list in the UI showing the images that were uploaded to storage

We will walk through the whole project including setting up Firebase, setting up the expo project, using .env file for project keys, using the Expo Image Picker Camera and much more.

I will go back and forth between coding the solution and referencing the documentation so that when you go through the video or the source code you know where I got the information from so you can investigate further if you like

💥 Chapters
--------------------------
00:00:00 - Intro
00:00:43 - Create Firebase Project
00:02:55 - Create Expo Project
00:05:14 - Install Additional NPM Packages and Expo Libraries
00:12:40 - Initialize Firebase and .env file
00:23:19 - Setting Up Camera and permissions From Expo Image Picker
00:28:40 - Using Camera to Take a Picture
00:34:20 - Adding Function to Upload Image To Firebase Storage
00:47:50 - Resolve Error Uploading Files - Missing Firebase Configuration Information
00:49:26 - Fix null fileName from Image Picker Camera
00:52:50 - Get a List of Storage Bucket Contents from Firebase Storage
01:04:40 - Create a Component Using FlatList to render name of file from Firebase Storage Bucket
01:14:00 - Wrap Up

💥 Links
--------------------------

React Native Mobile Apps, Integrating Expo Image Picker, Firebase Storage Buckets and Image Upload and Listing Bucket Contents

image picker, expo, firebase storage, camera, react native dotenv, mobile app, tutorial, image upload

[bencormack]

This is a really useful tutorial. Thanks for sharing.

[zombeeb]

This is the best guide i've ever seen!!

[animelove]

Thank you!! I am gona give up about this theme but your code was my solution.

[Piggiesgod]

Thank you, i had problem with this today, and you helped me a lot.

[salabane]

i think that you're the only person on earth that chooses to work with ms edge :D :D
great video thanks a lot

[brianspiesman]

Thanks for a great video! Is there an easy way to also store the photo on the camera roll during this process?

[uctuanvu]

Camera permission was using from default. It not using your config

[Niletixofficial]

When i take a selfie it mirrors the photo, How do i stop it from mirroring the photo?

[fnux]

Anyone know how to do this for android?
The docs states that:
Requires Permissions.CAMERA. On Android and iOS 10 Permissions.CAMERA_ROLL is also required
but how do you get those permissions with the useCameraPermissions hook?

[KayaJones-xp]

hey i am getting this error im at 34min in . I took a photo on my phone and I am getting this error: Possible Unhandled Promise Rejection (id: 0):
TypeError: undefined is not an object (evaluating 'cameraResp.assets[0]')