Uploading videos and images to Firebase Storage | React Native Tutorial

Learn how to create a minimal React Native app that uploads both videos and images to Firebase Storage. You'll learn the full flow from Firebase project setup to building the UI with Expo and React Native, including handling uploads and displaying uploaded media.

If you want to add media upload capabilities to your React Native app using Firebase, this tutorial walks you through the dependencies, Firebase configuration, and UI design considerations. It’s practical for developers familiar with React Native who want to integrate cloud storage for media files.

What's inside

• Introduction and demo of uploading images and videos
• Setting up a Firebase project and enabling Storage
• Installing dependencies including Expo AV and Firebase SDK
• Using react-native-community/blur for UI effects
• Handling image and video selection and upload flow
• Managing Firebase Storage rules and usage limits
• Previewing uploaded media with video playback and blur effect
• Using a Figma design template and referencing Echo Studios

Introduction and demo of uploading images and videos

I open with a demo of the app where you can select images or videos to upload. It supports both media types with separate icons for each. When selecting an image, a blur effect and uploading status appear. Videos can be previewed and play automatically once uploaded.

The app uses a ScrollView inside a SafeAreaView to display uploaded media, making it look clean and handling many files gracefully. The demo shows uploading multiple files and how the UI updates as uploads complete.

Setting up a Firebase project and enabling Storage

You start by creating a new Firebase project named "tutorial storage." Google Analytics is disabled for simplicity. Then you enable Firebase Storage, choosing test mode rules that allow open read/write access for development.

The storage location is set to US Central, but you can choose the closest region. This setup is essential to connect your React Native app to Firebase and store media files securely.

Installing dependencies including Expo AV and Firebase SDK

I install key dependencies:

• Expo AV for video and audio playback in React Native
• Firebase SDK to interact with Firebase Storage and other services
• Expo Dev Client for custom native builds
• React Native Community Blur for the blur effect on images

Expo AV handles media playback, while Firebase SDK manages uploads and downloads. The blur library requires a native build, so Expo Go is not used; instead, a custom dev client is built.

Using react-native-community/blur for UI effects

The blur effect behind images during upload is achieved with the react-native-community/blur package. This native module adds a polished UI touch but requires building the app with native code.

This effect is not trivial to implement with pure React Native or Expo Go, so I explain the need for a custom build to support native dependencies like this blur.

Handling image and video selection and upload flow

The app filters media selection by type (images or videos) and allows picking files from the device. After selection, uploads start immediately to Firebase Storage.

Videos take longer to upload and do not preview until finished, while images show a blur and upload status. The app saves files in a "stuff" folder in Firebase Storage and updates the UI with thumbnails or video players.

Managing Firebase Storage rules and usage limits

I warn about Firebase’s free tier limits: 1 GB of bandwidth per day. Exceeding this limit on a free plan will shut down your project’s ability to save files.

I recommend monitoring usage in the Firebase console and understanding billing plans if you expect heavy media uploads. I use test mode rules for simplicity but I advise securing your storage rules for production.

Previewing uploaded media with video playback and blur effect

Once uploads complete, images appear with a blur effect during upload and then show normally. Videos automatically play once uploaded, but only once.

The UI uses Expo AV’s Video component for playback and ScrollView to display multiple media items. This gives users immediate feedback and a smooth experience when managing uploaded content.

Using a Figma design template and referencing Echo Studios

The app’s UI is based on a Figma design provided by Echo Studios, a software agency. I share the Figma project link so you can inspect or duplicate the design.

This helps maintain a professional look and feel. The tutorial encourages using design assets and SVGs from the template to speed up development and keep UI consistent.

Resources

CourseReact Native course

Fundamentals through shipping: the concepts behind the prompts, with lifetime access.

Premium resourcePro Membership

Get access to premium tutorials and source code including Firebase integration.