How to setup firebase in react native app

hello people this is Christian and you are welcome back to donam channel so in this video I'm going to work you through how you can connect your react native mobile application to your Firebase okay so we are first going to create our mobile application we going to create a new one and then we are going to connect our fire base to our application so for this and more kindly click on the Subscribe button if you haven't and let's [Music] start all right so let's start by first creating our react native project okay so I'm going to go to my web browser and in here just I always use the documentation okay I'm going to search for Expo documentation so the documentation gives you the guideline lines okay so first of all as you can see here quick start so you're just going to copy this and then go back now I'm going to use command prompt so I'll search for command prompt and here I'm going to navigate to the desktop and I'm just going to copy and paste so we have our NPS create Expo app and Then followed by the name of the app so I'm just going to say Firebase app okay so Firebase and I'm going to press enter to create this application or this project for [Music] us all right so our project is now ready okay and as you can see here there's a couple of commands here we can use we are First supposed to type CD Firebase okay to navigate to the Firebase directory actually okay so as you can see here it's created here okay so we are now navigating to the Firebase directory and here we can type code spacebar dot to open it with vs code let's go to the project okay so as you can see here we have a files here that is the default files and folders okay so for now let's see whether it's working so I'm just going to open my terminal okay or you can just go here and click on Terminal and new terminal okay let me close this one and here but before I type let's come here and see something I want to show you something here so these are the commands you can use to start with okay so I'm going to go by npm npm start okay so we are using this we can go by npm 100 or iOS or web okay and press enter [Music] so as you can see we are starting our Metro bandler all right so our Metro bundler is now ready so as you can see you can open Android and then you can open it with web okay but I want to use a physical device so I'm going to quickly show you how you can connect or use your physical device in developing your mobile application all right so on my mobile application I'll go to Applications and I will scroll down to Expo so Expo where is Expo hiding okay so here is Expo okay so you can go to Google Play Store and download Expo if you don't have it so I just click on Expo all right so once Expo is done all right I have some let me clear this one okay so once you open Expo this this is how you're going to see it and I'm quickly going to click on scan QR code and as you can see in our terminal we have some QR code here so you're going to scan the QR code to [Music] scan so as you can see down is building okay so Expo goal is taking care of everything for [Music] us and whilst it's running I want to show you something here so when you come to the app GS file here it's where our code everything starts okay so there is it I have a video on fundamentals of Expo or or react native Expo okay I leave I leave the link down below so you can check them out I have I think two videos on that and also have a video on building react native chat app using react N4 you can check that one out so I won't go much into details of some of the stuffs because I've already covered them in the other video okay so here we have our Splash image showing okay so now as you can see we have open up app.js to start working on your okay so you can see here it's showing okay let's let's let's change and see so I'll just oops I'm just going to change the text here and say connect fire base to react native okay and let's save it this file so you see once we save it it automatically shows on our device okay device if you're using virtual to feel free to use it but I want to use the fiscal device okay so the next thing now is we are supposed to go to uh we are supposed to have a Firebase account okay so I'll go back to my web browser and I have Firebase account already so I'll just go to Firebase console so firebase.com first okay so no fire base not fire B so fire base.com sorry for the typo all right so here you can go to your console okay that if you already have so I'll just go to my console all right so in my console I have a couple of uh projects here but I quickly create one so I'm just is going to click on and I'm going to name it Firebase app okay good so I'm just going to continue and then down here I'll uncheck this and click on create [Music] project [Music] all right so once it's ready you now click on continue yeah so when you land on this page you can just go to web and then let's use the same name here Firebase okay and then you're going to click on register okay [Music] oops I was supposed to type Firebase app okay but you can use any name you want it doesn't really matter so you see here the next thing you're supposed to do is we we are been told to install package here so you're just going to copy this and then we go back to our project okay so in our terminal we can create a new terminal so when you come here you click on this plus button or sign now you paste and or you type npm install Firebase and press enter okay so how it's installing I want to show you something here so let's go here to back to our documentation and let's search for Firebase okay so Firebase yeah so use Firebase you're going to click on this one okay and here you can spend time and read through all this okay so you see here just trying to show us how we can connect our Firebase to our Expo project or react native project okay so the same thing and then once we are done we are supposed to create a Firebase config file Okay so I just want to copy this and go okay so back to our project now root directory you're just going to type Firebase config Firebase config.js okay and in that file in this file we going to copy something in okay so let's go back to our web browser and Expo okay so we just going to copy all these things so just copy good and then let's paste it in our project all right so once you paste it in oh it's still not done yeah my internet connection is a little bit slow but I think you will finish soon once you done installing you can proceed okay so you should do well and keep this um API keys and other Stu in yourm file okay so that nobody can have access to this of course once I'm done recording this video I'm going to delete the pro okay so don't don't worry yourself to either take it or something okay so you can create your own so what I'm just going to do is I'm just I'm a lazy type so I'm just going to copy all this copy then I'm going to paste it in this file and I'm going to change the columns to equals okay and then here to equals think then remove these comments from there all right and then save the M file then once I come here I'll just delete this and type process do m so EMV do the name okay so the first one is API key okay so matches to API key so I just going to copy API key paste it here do same for the rest so I'm a lazy type so I just going to I'm just going to copy this paste it for all of them then now do the copy and paste again [Music] paste all right so now let's let's wait for it to finish installing the fire base all right so our fire base is done installing I think we didn't finish so let me copy and paste this one also good and we can now save it so I just want us to add a couple of things also so we can import uh get storage okay I'm going to use it later okay wait so from Firebase for/ storage okay we import guest [Music] storage to get storage good and down here once you are done initializing our app I want us to create another storage and you're going to pass get storage call the function and you pass in the app okay and then in here we going to export going to export our storage okay oops all right so now we can now save it and then let's move on I think there's a couple of things to do again so now we are done with the fire base side we can continue on to console and then next thing is to go to build go to storage okay so if you want to store images or files here you can go to storage and then go to get started and then next okay done so once it's I mean creating it let's come here we have last things to do so we just going to copy this and then paste it in our terminal again and press enter is going to create a file for us okay so it's generating the file okay today is it and here we are being told to um I mean copy this so we supposed to update the file with this so we just going to go to here copy everything and update it with this and save it okay so now we've been able to connect our fire base to our react native okay okay so from here going I'm just going to show you how you can upload picture or pictures to your Firebase bucket okay or store images on your Firebase or retrieve images from your Firebase storage okay so I think for now I'll end the video here if you want that video meet me in the next video okay thank you very much for being with me uh I hope you enjoyed it if you have any comments or any suggestion let me see it in the comment section but for now we've been able to connect it okay so in our next video I'm just going to do some mini projects and see how we can send and then retrieve data from and to our Firebase storage thank you see you next

Channel: The Don Hub

Views: 2,275

Keywords: react native, firebase, react native tutorial, react native for beginners, react native app

Id: kQ6TJItKKxo

Length: 15min 55sec (955 seconds)

Published: Sat Dec 09 2023