Skip to main content

Enable Firebase Storage for React Native Media Uploads

Firebase Storage is used by apps that upload profile photos, post images, stories, chat attachments, product photos, listing photos, or videos.

Quick Answer​

Enable Storage in Firebase Console, deploy the Storage rules included with your app package when available, make sure the app uses your Firebase config files, then test upload from a real app flow. Upload failures usually come from missing rules, missing Storage setup, missing native permissions, or backend media processing that has not been deployed.

1. Enable Storage​

  1. Open Firebase Console.
  2. Select your Firebase project.
  3. Go to Storage.
  4. Create or enable the default bucket.
  5. Confirm the bucket belongs to the same Firebase project used by the app.

2. Deploy Storage Rules​

If the app package includes a firebase/storage.rules file, review it and deploy it from the Firebase folder:

firebase login
firebase use --add
firebase deploy --only storage

Rules must match your app's user model. Social apps, commerce apps, and listing apps often have different ownership rules.

3. Use Safe Development Rules​

If your package does not include Storage rules yet, start with restrictive rules and expand by path.

Example authenticated user path:

rules_version = '2';

service firebase.storage {
  match /b/{bucket}/o {
    match /users/{userId}/{allPaths=**} {
      allow read: if request.auth != null;
      allow write: if request.auth != null && request.auth.uid == userId;
    }

    match /{allPaths=**} {
      allow read, write: if false;
    }
  }
}

Do not make the entire bucket public for production. Add path-level validation, file size limits, content-type checks, and ownership checks where appropriate.

4. Confirm Native Permissions​

Media upload flows may require permissions for:

  • camera;
  • photo library;
  • microphone for video;
  • location metadata, if the app attaches location to media.

After changing native permission strings or packages, reinstall pods and rebuild:

cd ios
bundle exec pod install
cd ..
yarn ios

5. Test Uploads​

Use the real app flow:

  1. sign in with a test user;
  2. select or capture media;
  3. upload it;
  4. confirm a file appears in Firebase Storage;
  5. confirm any related Firestore document stores the media URL/path;
  6. refresh the screen and confirm the uploaded media renders.

Blaze and Backend Processing​

Some apps upload media directly to Storage. Others call Firebase Functions for processing, feed fan-out, thumbnail generation, moderation, or third-party APIs.

If uploads fail with Network request failed or an internal Functions error, check:

  • Firebase plan and billing readiness;
  • deployed Functions;
  • backend secrets;
  • Storage rules;
  • Firestore rules;
  • the function region configured by the app.

Troubleshooting​

ProblemFix
Upload fails with permission deniedCheck Storage rules and authenticated user state.
Upload fails with network/internal errorCheck Functions deploy, Firebase billing, backend secrets, and region.
Media uploads but does not appear in the appCheck Firestore document update and public/read rules for that path.
iOS cannot open camera or libraryCheck native permission strings and rebuild the app.
Android upload works but iOS failsRecheck GoogleService-Info.plist, pods, and iOS permission setup.

Next Steps​