1"use strict";(globalThis.webpackChunkdopebase=globalThis.webpackChunkdopebase||[]).push([[5844],{641132(e,a,r){r.r(a),r.d(a,{assets:()=>l,contentTitle:()=>o,default:()=>p,frontMatter:()=>t,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"id":"react-native/firebase-integration/enable-firebase-storage","title":"Enable Firebase Storage for React Native Media Uploads","description":"Enable Firebase Storage, deploy Storage rules, configure media uploads, and troubleshoot photo or video upload errors in a React Native app.","source":"@site/docs/react-native/firebase-integration/enable-firebase-storage.mdx","sourceDirName":"react-native/firebase-integration","slug":"/react-native/firebase-integration/enable-firebase-storage","permalink":"/docs/react-native/firebase-integration/enable-firebase-storage","draft":false,"unlisted":false,"tags":[],"version":"current","lastUpdatedAt":1791137030000,"frontMatter":{"title":"Enable Firebase Storage for React Native Media Uploads","description":"Enable Firebase Storage, deploy Storage rules, configure media uploads, and troubleshoot photo or video upload errors in a React Native app.","keywords":["Firebase Storage","React Native media upload","photo upload","video upload","Firebase Storage rules","mobile app storage"],"source_brand":"instamobile","source_type":"filesystem","legacy_urls":["https://instamobile.io/docs/firebase-integration/enable-firebase-storage"],"canonical_url":"https://dopebase.com/docs/react-native/firebase-integration/enable-firebase-storage"},"sidebar":"docsSidebar","previous":{"title":"Enable Firebase Firestore for a React Native App","permalink":"/docs/react-native/firebase-integration/enable-firebase-firestore"},"next":{"title":"Link Firebase Account to Your React Native App","permalink":"/docs/react-native/firebase-integration/link-firebase-account-to-your-mobile-app"}}');var i=r(665723),n=r(825268);const t={title:"Enable Firebase Storage for React Native Media Uploads",description:"Enable Firebase Storage, deploy Storage rules, configure media uploads, and troubleshoot photo or video upload errors in a React Native app.",keywords:["Firebase Storage","React Native media upload","photo upload","video upload","Firebase Storage rules","mobile app storage"],source_brand:"instamobile",source_type:"filesystem",legacy_urls:["https://instamobile.io/docs/firebase-integration/enable-firebase-storage"],canonical_url:"https://dopebase.com/docs/react-native/firebase-integration/enable-firebase-storage"},o="Enable Firebase Storage for React Native Media Uploads",l={},d=[{value:"Quick Answer",id:"quick-answer",level:2},{value:"1. Enable Storage",id:"1-enable-storage",level:2},{value:"2. Deploy Storage Rules",id:"2-deploy-storage-rules",level:2},{value:"3. Use Safe Development Rules",id:"3-use-safe-development-rules",level:2},{value:"4. Confirm Native Permissions",id:"4-confirm-native-permissions",level:2},{value:"5. Test Uploads",id:"5-test-uploads",level:2},{value:"Blaze and Backend Processing",id:"blaze-and-backend-processing",level:2},{value:"Troubleshooting",id:"troubleshooting",level:2},{value:"Next Steps",id:"next-steps",level:2}];function c(e){const a={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,n.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(a.header,{children:(0,i.jsx)(a.h1,{id:"enable-firebase-storage-for-react-native-media-uploads",children:"Enable Firebase Storage for React Native Media Uploads"})}),"\n",(0,i.jsx)(a.p,{children:"Firebase Storage is used by apps that upload profile photos, post images,\nstories, chat attachments, product photos, listing photos, or videos."}),"\n",(0,i.jsx)(a.h2,{id:"quick-answer",children:"Quick Answer"}),"\n",(0,i.jsx)(a.p,{children:"Enable Storage in Firebase Console, deploy the Storage rules included with your\napp package when available, make sure the app uses your Firebase config files,\nthen test upload from a real app flow. Upload failures usually come from missing\nrules, missing Storage setup, missing native permissions, or backend media\nprocessing that has not been deployed."}),"\n",(0,i.jsx)(a.h2,{id:"1-enable-storage",children:"1. Enable Storage"}),"\n",(0,i.jsxs)(a.ol,{children:["\n",(0,i.jsxs)(a.li,{children:["Open ",(0,i.jsx)(a.a,{href:"https://console.firebase.google.com/",children:"Firebase Console"}),"."]}),"\n",(0,i.jsx)(a.li,{children:"Select your Firebase project."}),"\n",(0,i.jsxs)(a.li,{children:["Go to ",(0,i.jsx)(a.strong,{children:"Storage"}),"."]}),"\n",(0,i.jsx)(a.li,{children:"Create or enable the default bucket."}),"\n",(0,i.jsx)(a.li,{children:"Confirm the bucket belongs to the same Firebase project used by the app."}),"\n"]}),"\n",(0,i.jsx)(a.h2,{id:"2-deploy-storage-rules",children:"2. Deploy Storage Rules"}),"\n",(0,i.jsxs)(a.p,{children:["If the app package includes a ",(0,i.jsx)(a.code,{children:"firebase/storage.rules"})," file, review it and deploy\nit from the Firebase folder:"]}),"\n",(0,i.jsx)(a.pre,{children:(0,i.jsx)(a.code,{className:"language-bash",children:"firebase login\nfirebase use --add\nfirebase deploy --only storage\n"})}),"\n",(0,i.jsx)(a.p,{children:"Rules must match your app's user model. Social apps, commerce apps, and listing\
1napps often have different ownership rules."}),"\n",(0,i.jsx)(a.h2,{id:"3-use-safe-development-rules",children:"3. Use Safe Development Rules"}),"\n",(0,i.jsx)(a.p,{children:"If your package does not include Storage rules yet, start with restrictive rules\nand expand by path."}),"\n",(0,i.jsx)(a.p,{children:"Example authenticated user path:"}),"\n",(0,i.jsx)(a.pre,{children:(0,i.jsx)(a.code,{className:"language-js",children:"rules_version = '2';\n\nservice firebase.storage {\n match /b/{bucket}/o {\n match /users/{userId}/{allPaths=**} {\n allow read: if request.auth != null;\n allow write: if request.auth != null && request.auth.uid == userId;\n }\n\n match /{allPaths=**} {\n allow read, write: if false;\n }\n }\n}\n"})}),"\n",(0,i.jsx)(a.p,{children:"Do not make the entire bucket public for production. Add path-level validation,\nfile size limits, content-type checks, and ownership checks where appropriate."}),"\n",(0,i.jsx)(a.h2,{id:"4-confirm-native-permissions",children:"4. Confirm Native Permissions"}),"\n",(0,i.jsx)(a.p,{children:"Media upload flows may require permissions for:"}),"\n",(0,i.jsxs)(a.ul,{children:["\n",(0,i.jsx)(a.li,{children:"camera;"}),"\n",(0,i.jsx)(a.li,{children:"photo library;"}),"\n",(0,i.jsx)(a.li,{children:"microphone for video;"}),"\n",(0,i.jsx)(a.li,{children:"location metadata, if the app attaches location to media."}),"\n"]}),"\n",(0,i.jsx)(a.p,{children:"After changing native permission strings or packages, reinstall pods and rebuild:"}),"\n",(0,i.jsx)(a.pre,{children:(0,i.jsx)(a.code,{className:"language-bash",children:"cd ios\nbundle exec pod install\ncd ..\ncorepack yarn ios\n"})}),"\n",(0,i.jsx)(a.h2,{id:"5-test-uploads",children:"5. Test Uploads"}),"\n",(0,i.jsx)(a.p,{children:"Use the real app flow:"}),"\n",(0,i.jsxs)(a.ol,{children:["\n",(0,i.jsx)(a.li,{children:"sign in with a test user;"}),"\n",(0,i.jsx)(a.li,{children:"select or capture media;"}),"\n",(0,i.jsx)(a.li,{children:"upload it;"}),"\n",(0,i.jsx)(a.li,{children:"confirm a file appears in Firebase Storage;"}),"\n",(0,i.jsx)(a.li,{children:"confirm any related Firestore document stores the media URL/path;"}),"\n",(0,i.jsx)(a.li,{children:"refresh the screen and confirm the uploaded media renders."}),"\n"]}),"\n",(0,i.jsx)(a.h2,{id:"blaze-and-backend-processing",children:"Blaze and Backend Processing"}),"\n",(0,i.jsx)(a.p,{children:"Some apps upload media directly to Storage. Others call Firebase Functions for\nprocessing, feed fan-out, thumbnail generation, moderation, or third-party APIs."}),"\n",(0,i.jsxs)(a.p,{children:["If uploads fail with ",(0,i.jsx)(a.code,{children:"Network request failed"})," or an internal Functions error,\ncheck:"]}),"\n",(0,i.jsxs)(a.ul,{children:["\n",(0,i.jsx)(a.li,{children:"Firebase plan and billing readiness;"}),"\n",(0,i.jsx)(a.li,{children:"deployed Functions;"}),"\n",(0,i.jsx)(a.li,{children:"backend secrets;"}),"\n",(0,i.jsx)(a.li,{children:"Storage rules;"}),"\n",(0,i.jsx)(a.li,{children:"Firestore rules;"}),"\n",(0,i.jsx)(a.li,{children:"the function region configured by the app."}),"\n"]}),"\n",(0,i.jsx)(a.h2,{id:"troubleshooting",children:"Troubleshooting"}),"\n",(0,i.jsxs)(a.table,{children:[(0,i.jsx)(a.thead,{children:(0,i.jsxs)(a.tr,{children:[(0,i.jsx)(a.th,{children:"Problem"}),(0,i.jsx)(a.th,{children:"Fix"})]})}),(0,i.jsxs)(a.tbody,{children:[(0,i.jsxs)(a.tr,{children:[(0,i.jsx)(a.td,{children:"Upload fails with permission denied"}),(0,i.jsx)(a.td,{children:"Check Storage rules and authenticated user state."})]}),(0,i.jsxs)(a.tr,{children:[(0,i.jsx)(a.td,{children:"Upload fails with network/internal error"}),(0,i.jsx)(a.td,{children:"Check Functions deploy, Firebase billing, backend secrets, and region."})]}),(0,i.jsxs)(a.tr,{children:[(0,i.jsx)(a.td,{children:"Media uploads but does not appear in the app"}),(0,i.jsx)(a.td,{children:"Check Firestore document update and public/read rules for that path."})]}),(0,i.jsxs)(a.tr,{children:[(0,i.jsx)(a.td,{children:"iOS cannot open camera or library"}),(0,i.jsx)(a.td,{children:"Check native permission strings and rebuild the app."})]}),(0,i.jsxs)(a.tr,{children:[(0,i.jsx)(a.td,{children:"Android upload works but iOS fails"}),(0,i.jsxs)(a.td,{children:["Recheck ",(0,i.jsx)(a.code,{children:"GoogleService-Info.plist"}),", pods, and iOS permission setup."]})]})]})]}),"\n",(0,i.jsx)(a.h2,{id:"next-steps",children:"Next Steps"}),"\n",(0,i.jsxs)(a.ul,{children:["\n",(0,i.jsx)(a.li,{children:(0,i.jsx)(a.a,{href:"/docs/react-native/core-modules/media-upload-and-storage",children:"Media Upload and Storage Module"})}),"\n",(0,i.jsx)(a.li,{children:(0,i.jsx)(a.a,{href:"/docs/react-native/firebase-integration/deploy-firebase-functions",children:"Deploy Firebase Functions"})}),"\n",(0,i.jsx)(a.li,{children:(0,i.jsx)(a.a,{href:"/docs/react-native/firebase-integration/firebase-costs-and-blaze-plan",children:"Firebase Costs and Blaze Plan"})}),"\n"]})]})}function p(e={}){const{wrapper:a}={...(0,n.R)(),...e.components};return a?(0,i.jsx)(a,{...e,children:(0,i.jsx)(c,{...e})}):c(e)}},825268(e,a,r){r.d(a,{R:()=>t,x:()=>o});var s=r(722155);const i={},n=s.createContext(i);function t(e){const a=s.useContext(n);return s.useMemo(function(){return"function"==typeof e?e(a):{...a,...e}},[a,e])}function o(e){let a;return a=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:t(e.components),s.createElement(n.Provider,{value:a},e.children)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.