Uploading Images to Firebase with Expo
Update: Expo v26 is out 🎉. Now you can directly upload images to Firebase using the new blob support in React Native. See the example below or this one:
The solution below is only valid for version of Expo below 26.
Like many of you, I’ve tried to upload images to Firebase storage directly from a React Native project attached with expo. This is something that might become very trivial to do in the future (Blob support in React Native has just been merged) but for now it’s not really possible to do directly. I even tried a workaround that consist of bringing the content of the image in the JavaScript userland in order to upload it but it didn’t to work with the latest version of React Native.
Below is a simple Firebase Cloud Function that will fix this problem for you. To upload an image using fetch(), I copied the example that Brent Vatne wrote in this repository.
The code snippet above uploads a picture to a Firebase Cloud Function that will finally store the cloud function into Firebase Storage. Below is how the Cloud Function looks like. Many thanks to Eric Lee for showing me how to store images from a cloud function.
As explained here, fileUpload is defined below:
If you are not familiar with how to deploy Firebase Cloud Functions, please use the firebase-tools package and run the init command.
To test the function locally use the following function: firebase serve — only functions. And to deploy: firebase deploy — only functions. I hope that you will find this recipe useful. Happy Hacking 🎉
Interested in premium React Native Starter kits? Checkout the links below.
