React Native Expo Firebase - Simplify Your Image Uploads with Image Picker Camera
HTML-код
- Опубликовано: 26 июн 2024
- 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
/// Sign Up For Our Newsletter buff.ly/3lAk2jL
💥 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
--------------------------
Expo - docs.expo.dev
Expo Image Picker - docs.expo.dev/versions/latest...
Firebase - docs.expo.dev/guides/using-fi...
react-native-dotenv - www.npmjs.com/package/react-n...
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
*SOURCE CODE* - github.com/aaronksaunders/react-native-expo-image-picker-camera-firebase
This is a really useful tutorial. Thanks for sharing.
This is the best guide i've ever seen!!
Thanks for the comment!! Glad you liked it, hope you like and subscribe
Thank you, i had problem with this today, and you helped me a lot.
Thanks, glad you enjoyed it. A like and subscribe helps the channel get more exposure
Thank you!! I am gona give up about this theme but your code was my solution.
Glad it helped you to keep moving forward
i think that you're the only person on earth that chooses to work with ms edge :D :D
great video thanks a lot
Glad I could help!
Thanks for a great video! Is there an easy way to also store the photo on the camera roll during this process?
stackoverflow.com/a/72700745/122313
Camera permission was using from default. It not using your config
How can I present the photos ?
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?
Are you saying that this code doesn’t run on android?
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]')
I need to see some code.
When i take a selfie it mirrors the photo, How do i stop it from mirroring the photo?
There is a setting on the camera I believe
How can I present the photos ?
You can query firebase to get the list of media objects