Ultimate React Native Firebase Tutorial - Learn React Native in 2 Hours

welcome to the ultimate react native farbas tutorial in this comprehensive tutorial you're going to learn a lot of things you're going to learn Firebase integration Firebase authentication social login post notifications navigation and Crow operations in this 2hour tutorial we're going to create a food app with that food app you can register new users and save them to Firebase you can sign in using those users you can navigate when when sign in successful and you can also using Google signin you can also post notifications when the app is closed and you can store the data in Firebase fire store in this database you can get the data and read it and display them in the screen I mean you can fit your data from Firebase fir store database you can get them you can add data you can delete data so you can delete Foods or categories you can add food or categories you can edit food or categories using Firebase fire store and the CCT operations this course is totally free and the source code is provided this 2hour tutorial is for all level whatever you are beginner or an expert if you don't have any knowledge with Firebase this tutorial is going to make Firebase easy to you so what are you waiting for if you are interested subscribe to my channel and if you like that video please hit the like button and if you are interested in learning react native or no GS or react GS or JavaScript subscribe to my channel because in my channel I have a great tutorials for you and in next month I'm going to create a Redux tool kit tutorial and in December I'm going to create new GS tutorial and next year I'm going to build a full app a full e-commerce app using react native and no GS so if you are interested in learning react native or no GS please subscribe to my channel see you in the tutorial and thanks for your watching in this lesson we're going to learn how to integrate Firebase in Android app okay now let's go to Firebase let's create a new project let's rename that project react native dream and let's continue we don't need the analytics right now let's create a project we have now our project let's press continue now let's create we have a farpas project we want to create an app inside this project we create we can create Android app IOS app or web app now let's create an Android app we need here the package name we can get it from our code from Android ab SRC see main Java main application or main activity any one of those so let's copy that and add it here and let's let's register a new app in Next Step let's download that file because this file is very important let's download it Google service tojson and I'm going to where to put that file here we should put it inside our project inside our app folder so now let's show it show our file Google service. Json inside our code inside here inside the app open Android and open app and let's drag and drop here okay let's press next and next and continue continue to conso now let's install our package that's responsible to connecting Firebase to our app let's react let's type react native firee and open that link now we need to install that package we are add fortive Firebase app let's install it then we need to make some configurations inside our app build. Gradle let's add that line of code inside Android build. Gradle down here independencies let's add this that's this line of code and press save and we should add that line of code to in Android app build Gradle so here Android app build Gradle let's add that code at the top of here and let's press save now let's try to run our app here Android now we have connected our Firebase to our AC native Android app correctly in the next video Let's connected to IOS app so don't forget to hit the like button and subscribe and continue watching this list because you're going to learn everything about Firebase in this playlist for beginners thanks for your watching in previous lesson we've learned how to connect Android app with Firebase in this lesson let's learn how to connect an IOS app with Firebase let's create let's add an app inside our react native project in Firebase let's add IOS app now we have to add the pundle ID where can we get that pundle ID let's open X code to open X code from terminal just type that code exceed dasb iOS that allow us to open xcode inside that project as you see now let's get our bandle ID we can get it when we press here just press on signing and capabilities let's copy that bundle identifier and copy and paste it here and let's register a new app let's download Google info. placed and now let's press next next next continue to console and let's go to react native Firebase first we need to add those configurations download the Google service Google info that placed inside our app using xcode open the project and add files to that project so that's our project let's press on add files add files to project and let's go for downloads and select that file that we have downloaded from Firebase to connect our IOS app with Firebase let's press on ADD now with edit that file let's go down we need to add that code inside ABD delegate. let's import let's add that import here in X code we can we can make it put it using xcode here we can make it also using vs code if we open iOS and if we open that folder the file name we can add it here too add it whatever you wherever you want okay but it's better to add it using xcode and now let's add this this fire app configuration inside did finish launching without options function so let's search at this function we can see it here all we need to add that file that code here inside this function you may be wonder why X code is better in adding configuration I'm going to tell you because xcode allow us to see our errors because we we have an error here Firebase file not found that's because we didn't install the bods yet so let's scroll down scroll down and out linking and rebuilding here in iOS we need to open the iOS folder open iOS folder and run that command but install REO update so let's edit and wait until our BS are done we got here an error while we are installing the pods the Swift pod fire Bas score iner depend on Google utilities which doesn't Define modules so let's solve that issue let's copy it and open a new tab and press that issue you will get that this is stch Overflow link I will leave that link in the description so don't forget to check it and now let's add those he's telling to add those inside bot file we here in boot file let's add them and add this too now let's run boat install again but install REO update again and let's see great we have installed them correctly now now let's try to run our project let's type exceed DB iOS to open the code and now let's try to clean first and build I have a a notice because my ship is M1 so I need to add the this step if you are using the app the Apple chip I mean MacBook Pro with M1 you have to add this arm 64 here just press on the project name on that project and the build settings any iOS simulator SDK and add arm 64 and else inside boards press on boards press on build settings and any iOS simulator is DK just add arm 64 and now let's run the project finally build is successful after all of those errors that we have made and it's a good experience to face those errors with me you maybe don't face those errors for example if you're chap is not M1 chap you will not face that error so we have successfully connected our Firebase with our IOS app don't forget the like button and and see you in the next lesson and we are going to make an authentication using Firebase thanks for watching after we have connected our app to our fire base days today we're going to learn in this lesson how to make authentication how to sign up a user if you see here I have here sign up screen that I've created before don't worry if you can't create it just check my video if you open my YouTube channel you'll get that video inside videos look that video create a beautiful login and sign up screens in react native and the link of that video in the description so now let's create our authentication using Firebase that is the Firebase console let's select our project you will see here authentication just press on it and press get started to enable the authentication in Firebase app let's add new provider and let's make it email and password let's enable that and press save now we can register and sign in and sign up using Firebase using our email and our password now let's try it let's open our package right native Firebase and install our package let's scroll down to authentication and install that package react native Firebase oath let's install it you have to know after you install any package you need to open iOS see the iOS and install its B using that command B install now let's run our IOS app y iOS now the build is successful and we have added our fire Bas oath package that we're going to use to make authentication using Firebase now we want to make a test to sign up a user okay let's create a function called sign up demo or sign up test FN equals to we're going to import our oath import oath from our package that we have installed react native Firebase oath okay and now oath do create oath let don't forget the brackets and let's oath do create user with email and password okay and we have here two arguments the AR the first argument is email and the second argument is the password and both are strings okay so the first argument is email just type email here and first argument is the password to type the password here and let's make our promise if you don't understand promises I have a video in this channel describing the promises so don't forget to check it and I will leave it in the description alert alert user created then if the process is successful I mean if we create a user with email and password successfully we're get we're we're going to get that alert but if we have an error to catch we're going to console log that error to see what's happening so let's test that function using that button but that patteron it doesn't work so let's make it work let's open our components our my button and add that property on press equals to on press and now here in sign up screen on press let's add our function to it sign up test FN and now let's add an email and password or let's make it like this to check any errors okay we have here our terminal let's press sign up we have here an error called error or invalid email the email address is badly formatted because we we have didn't add an email yet so let's make it like this um test email at gmail.com now it will work let's press sign up oh user is created now let's check our Firebase database here inside our authentication let's press on users now we have here a user with email test @gmail.com now I know that I have those things statically here but I want to use those inputs so don't forget to follow this playlist because in the next lesson we're going to learn how to control th those inputs and you're going to learn how to add your users using those inputs adding the password and confirming the password and the email and sign up and create a user with those inputs Fields so don't forget subscribe and follow me for more and more now we can register users and save their data in the database using that function create user with email and password but if you notice here we do this statically I mean we want to make those inputs generate the password and email not from the code to do this first first we have to learn how to control text input in react native to control text inputs you need two properties and those properties are value and on change text those two properties we make them to control inputs in react native and to control text input also we need to save the data in the state so let's create US state Hawks const email set email equals to user State and we will start with mt string okay let's create another one const password set password equals to user State and let's add the last user State hook const confirm password set confirm password equals to use State now we have three state variables or three state constants to control those three inputs okay now let's make the first the first property and it's that property is the value and the first value will be aale the first element in the array of the user state if you if you are wonder if you don't know what US state do in react please check the video in the description and don't worry I will talk about us State here and I will describe it to you so you can learn it but briefly now the value here will be the email and the second input the value is going to be password the third input the value is going to be confirm passord password now we tell react native that we want that input field to take the data or the string of this field now let's add the second property and second property is on change text and it take an argument text so we can log it console log text so let's see what we get here in the console if we type anything here A A A AA so let's set our state to that text let's set email to that text and let's type anything email now let's see what email value here is let's for example alert do alert email look let's try to use another thing for example my email at gmail.com and let's alerted so now we have stored our data inside that email value inside user state so now we can easily replace that string with this email okay let's just put it up here now let's do the same but with a password Here on change text equals to text set password to that text now let's add the password up here so now let's create a user so now let's create a user with some email and some password and let's save it and see what's happening in the database but let's change that alert for example let's make it user created with with those credentials and let's add here email and password so let's test now let's try to add a user with some email like test email test user at gmail.com and the password is going to be 1 2 3 4 5 6 now let's sign up a user great user created with those credentials test user gmail.com and 1 2 3 4 5 6 so now let's check our database to see our user here in Authentication we have here our user with test user gmail.com let's try one more time let's make it new one at gmail.com with password 098 and let's press sign up user created with those credentials new [e-mail] let's refresh that page to see great our new user has been registered in Firebase successfully so in that video you've learned how to control react native inputs and how to Reg to register users to Firebase follow me for the next lesson to learn how to log in to Firebase using Firebase account in that lesson we're going to learn how to handle heavy scenarios and the error scenarios I mean when we register in Firebase we can successfully register the user but we can get an error for example if we register with email that exist or we give it a week password so let's learn how to handle callbacks with suxess or fail scenarios in Firebase now we have learned how to register new account to Firebase if we see here and the user has been saved in the database but now we won't we don't want to show that alert I want when I register a new user I go to the login screen So today we're going to learn how to do this using react navigation I have a video in that channel I left it in the description in this video you can learn how to manage navigation but I will do it here too I will show you how to do here right now okay let's open our Google and let's type react navigation I will do it real quick but if you need explanation you can check the video in the description I'm going to install that package and that those two packages I'm going to copy that code and have do TSX I'm going to open that stack Navigator and install that and this Library too and let's run our BS let's create a new folder called navigation my stack. TSX export default login sign up if you don't understand what I have doing here please check the video in the description look screen my stack we need to rerun the app your iOS now we have here our or stack we have here the login screen so let's go let's make the sign up first to render the sign up and let's reload now we are here in the signup screen I want when I press and the sign up with account I go to login screen okay so let's go and sign up screen and add that code navigation I will comment that alert and I will go navigation. navigate to login after we create an account just we're going to go to login and let's change that alert to make it user created please login okay so now let's test it let's add let's create a user new user at [Music] gmail.com with password for example a 1 2 3 4 5 a 1 2 3 4 5 and sign up now user created with those credentials please login and we are here in the login screen now we have handled the success scenario of Firebase the success scenario when we register successfully but what if we register not successfully for any reason for example for a weak password or we registered a user that is already exist so we have to handle those errors for example let's add a user new1 at gmail.com with that weak password one and and one and let's see what we get here in the console when we log that error when we press sign up we have here error oath weak password that given password the given password is invalid because it's weak now we want to show that in the alert here in Fire based documentation we can see some property that we can use for example the code the message or the native the native code so let's try to take that code to see error. code and see what's happening here if we press sign up now oath week password when we register the code so let's try to log the message when we press sign up the message say the given password is invalid because o weak password let's try that property native error message and let's log it here instead of the message and let's press sign up we got here the message the password must be six characters long or more so let's make an alert of this alert. [Music] alert error. native message so when we press here we show the to the user an alert say the password must be six characters long or more so let's make it six characters let's let's add let's make it 1 2 3 4 5 6 and here too 1 2 3 4 5 6 and sign up now we have here another error message the email address is already exist by another account so let's change the email too let's make it new one two and press sign [Music] up wow user created with those credentials please log in now we've learned it in that lesson what to do if the register success or in the register fail and in the next lesson we're going to learn how to Lin users using Firebase and when we success we just go to home screen and when we fail we just stay in the login and show an error message to the user let's check our users Firebase that's our project here in authentication now we have new one@ gmail.com and that new one Firebase is great isn't it after we have learned how to register accounts using Firebase using email and password in this lesson we're going to learn how to login with those account that we we have been registered before first let's go to my stack and make some changes I want to remove that header that header because it's it looks bad and I want to make the first trout is the log screen not the sign up screen okay so let's go to my tag you can find it inside SRC navigation my tag and just let's cut that line and make it up here like that and to remove that error to remove that error just add screen options header showing with false now we just need to reload our app now let's try to login with our email and password let's go to login screen let's import our oath import oath from at react native Firebase oath com login with email and password equals to function o do signin with email and password and it takes two arguments and those arguments are the email and the password so let's let's add them statically right now for example an email like a a a AA and password a a aa2 I know that's not formatted email I want to show errors and to console log them using the then. catch let's let's handle our call back promises response console do Lo response and catch error console log the error now let's make our button do that function during on press okay now let's try to fire or let's try to login with that email AAA and password AAA and see the console login look invalid email the email address is badly formatted so let's add a valid email for example at gmail.com and save internal error has has occurred please try again that's because uncorrect email or uncorrect password but I don't know why Firebase doesn't give us an error to indicate the error so let's try to log in with an existing email that's our users we can get them just select your project and press on authentication and select that users okay those are our users I remember the password of that user I remember it's 1 2 3 4 5 6 so let's try with it and the password is 1 2 3 4 5 6 let's here in that function alert to alert loged in with success message now let's try with an email and correct password and let's Press login great success logged in so now let's make let's control our inputs I mean the email here and the password here let's control them using our user state so as we have done before in the sign up screen sign up screen those are user State hooks just copy them and paste them here email and set email password and set password inside user State and now let's go to our inputs to control them the first input the value of it it's going to be the email and the second input the value is going to be the password when we change the text in the first input on change text we're going to set email to that text and here on a change text we're going to set the password to that text and up here let's remove our static values and add the email value and the password value now let's try let's clear the console let's press here the password is invalid the user does doesn't have a password let's add first let's handle our errors let's make an alert to that errors alert do [Music] alert error dot let's copy the native error message from here native error message and let's try when we press here the password is invalid or the user doesn't have a password we didn't enter anything so let's try to to enter our email the email was let's check it new one two new new one [e-mail] and the password is 1 2 3 4 5 6 when we Press login yes success logged in and we get and we got here the data of the user and the the the user ID and the refresh token also so now we want to go to home screen when we log in successfully so let's add let's create a home screen hes screen. TSX and let's create a functional component okay and let's import it in our our stack and my stack here let's duplicate that code we can duplicated using shift and option and the arrow down okay let's make it home screen here and home screen here we can import from our screens okay so now we will log in successfully just navigate to home screen navigation let's add the property here first navigation navigate home screen and let's try now if we enter a bad password now we got an error message the password is invalid or the user doesn't have a password so let's try to add our password yes Success login and we here in the login screen in the home screen let's just [Music] center line items to Center Felix of one see we are in the home screen let's try one more time if we enter a wrong pack password we got an error if we add the right password and Press login we can successfully login and go to home screen in this lesson we're going to learn how to push notifications using Firebase with react native let's open the documentations here and go down to Cloud messaging and press on usages usage there is an important note here and we you have to install the app we have done that before in previous video you can check it in the description and in that video how to connect react native app with Firebase okay now let's install that package react native Firebase messaging using yourn let's install it let's go down to see the documentations here in the usage we're going to use it first with Android first we need to request a permission let's copy that code let's copy the import first and put it here and let's copy that code this function and and now let's let's get the token how to get the token let's create a function to get the Firebase token const get token we're going to save the token in that constant messaging. getet token okay because we are using await we have to add here an async keyword now let's console.log our token console.log token equals to and our token okay and we need to run those two functions when the component get rendered so to do that we're going to use a react hook called use effect use effect we want to make that effect one time so we're going to leave that array as empty and here we're going to call those two functions the permission function to get a permission and the get token function and let's save now let's rerun our app run Android to see we have run our app and we can get the token so now let's try to push a notification just we have to open the Firebase our Firebase project fire P let's go to console react native dream and go to Cloud messaging is here now let's press here and press on create your first campaign let's pick that notification messages and create let's add a title for example hello world this is the title hello world bu we can send a test message here when we press here and we just to add the token we have consult the log that consult log the token if we want to send that notification to specific device and let's close our app and let's press test you've heard the notification sound Lo hello warl hello worldl body let's send another one for example let's make it new notification the new and let's send another notification let's select our token our token has been saved and press test here is the notification look new notification then you now if you want to send the notification to all devices let's for example send to all devices let's press next and select an app we're going to select an Android app let's press next schedule now and preview and publish all the app are all the Dei all the devices that have installed our app will receive that notification let's see it just take sometimes [Music] we got the notification here see send to all devices now you have learned how to push notifications to Android apps using Dr native fire Base today we're going to learn how to make social login using Google how to log in using our Google account so let's open Google and search with react native Firebase and let's open that link let's go down in authentication social authentication let's go down we have here Apple Facebook Twitter and finally Google first we're going to use that Library so let's install it let's go down I will install it using yarn so I will copy that code and here in our terminal let's add yarn add that's our first step our second step is to initialize a Firebase app in our in our Android app and I have that that before in the video I will left you in the description and you can press at the top of the video to go and check it the third step we need to enable Google Google signin provider in in our Firebase console so let's open Firebase console let's open our project and let's add new provider and it will be Google so let's enable it let's add any email your email here and let's press save and done now let's close this and close this and go to our third step follow those instructions to install and set up Google signin so let's press here to install our instruction let's go to Android guide let's go down here we must add that code inside AB build. Gradle that's our app that's Android that's build Gradle let's add it here and save and let's add in dependencies those two lines here in dependencies let's add those two lines V is duplicated so let's remove that because we added that before previously in that tutorial okay so let's go down and let's to make that line the last line that line it's at the top here let's cut it and go down and paste it here let's go down now let's generate our sha code so let's copy that code and go here in our terminal let's paste it here and press enter and in our Firebase console Firebase project inside our project settings let's select our Android app and press on ADD fingerprint as here in documentation we need to copy sha code so let's open our code let's go up go up see here apps signing report search with that title and pick the sh the sh1 let's copy it and paste it here in our Firebase and let's press save and let's redownload our Google service to Json we have downloaded it and add it to our project just replace it with with the existing one replace face now let's go back to our documentations now great we've almost done with integration now let's type our JavaScript code let's import let's add that import inside our login screen at the top here let's add that import Google signing and let's add that configure inside use effect hook use effect to get that web client ID we can get it from our Firebase Json file so let's open our Firebase Json file let's pick the client ID of client type 3 so let's copy that that string yes that string let's copy it and paste it here and save and don't forget to save that file too let's run our app let's continue adding our code let's copy that function on Google button press and let's paste it here and let's save let's add a test button here just test button to test our Google for example button with title login with Google and when we onpress on it we just fire that function on Google button press and let's press save now let's test our function let's press here when we press here we have here our Google accounts let's let's select anyone to sign in with let's press here oops we didn't get any data we didn't log anything inside that function so let's log anything for example let's log our token and let's add alert do alert Success login and let's try one more time great success login and that's our token from Google we want also to to handle errors for example what if we want what if we don't have that web client ID or we have any errors so let's add try catch block and that's console to log our error let's pre beautify that code using command K andf or control K andf and let's try one more time with invalid web client ID let's delete that and save and let's [Music] try look we got here a developer error so now let's replace our client ID with the correct one and press save and let's try one more time loging with Google yes login success and that's our token we can get some more data like user and we can log the user let's try when we Press login with Google now we have here our user that's our email learn native 2021 family name s giv name Ahmed and that's our ID and that's our photo that's our Google data now follow me for the next lesson we want to make that Google icon works when I press on it we want also to navigate to home screen when we press here and log in successfully and we want to also to add a Google login with iOS so don't forget next lessons so subscribe to my channel and if you see that video is good please hit the like button and share it with your friends and leave any comments if you want thanks for watching in the previous lesson we have learned how to add Google signin to Android app using Firebase today we're going to learn how to use Google signning in IOS app using Firebase so first let's type react native Firebase let's go and select social off and let's go down for Google sign in in the previous video we have we have installed our that package and we have done that step and that step and that step step but we need to add the configuration of our iOS guide so let's press on that link and let's go down and press on iOS guide let's go down first we need to install our BS so let's copy that code Bo install and inside our ter terminal let's open our iOS folder and paste that code to install our BS the second step is downloading the Google service info plus and replace it with the older one so let's open react let's open Firebase let's go to console and select our project let's go to settings let's redownload our Google service file so let's go and select the iOS project and download Google service info let's open our download and let's replace it with that file inside the iOS folder let's drag and drop that and replace it with the older one okay and let's go to our third step the last step is the xcode configuration we need to add that reserved client ID inside URL schema types how to do this first let's open our X code let's type that code exceed DB iOS that command allow us to open our X code from RE native project let's press enter and see look we have here our X code open at our project so now let's copy the reserved client ID in from Google service file so let's copy that and open our Google service and search with that key now that's our key let's copy it what to do with it we just need to add it to our URL schema so inside our xcode let's select our Target here press here and press on info and let's go down to URL types let's press on that plus icon and add our Ur URL schema okay W we've done with the iOS integration so let's rerun our project let's press here to run to run the project let's press on login with Google oops we we have here an error what's wrong with it we just need to close our terminal and open it again so let's close our Metro bundler and the AR start and let's rerun our app now we will Press login with Google we have here our app wants to use google.com to sign in let's press continue select your email or use another account I'm going to use a email great success login but it doesn't make sense to make success loging we want first to make that icon instead of that of this ugly button and and when we press here and Success login we navigate to home screen so let's make that real quick first let's use that icon instead of that button okay let's go to login screen let's close those and go to Ling screen inside our social media component we have here that Google icon we want to make it pressable so so let's open that component social media soal let's open that component we can go to definition here to open it and let's wrap the Google image with touchable opacity on press on Google press let's copy that property and add it here to pass it as a props we have here a a typescript issue so let's add that code don't worry if you don't understand that code because it's typescript issue now let's try it it now it's touchable okay let's go to login screen and add that property on Google press and let's pick that function on Google Pon press and paste it here and let's remove that ugly button now let's try to log in with Google let's try to press at that icon here and press continue let's open our terminal to see what's here let's clear our terminal let's select now we have success log and we have here our data our email family name given name and ID and so so let's press okay but it doesn't makes any sense I want when I press here and the login success I want to navigate to home screen so let's make that inside this function on Google Buton press it's up here just let's copy that code and paste it here navigation. nav to home screen and paste it here under that alert Success login and let's commment that alert so now let's try to L in with Google let's press here press continue select our account or use another account if you want great now we have Success login and we are in our login screen if you face any errors please check our our previous video how to connect IOS app with Firebase because it's an important video and if you have any other issues please leave it in a comment in the description and I will reply to you and help you if you find this tutorial is good please support it with a like button and share it and don't forget to subscribe to my channel thanks for your watching in this lesson we're going to learn how to create a database in fire base to store our data we want to store our categories and our Foods main dishes and to make queries because we want to search in the food now let's open Firebase native far base and let's open our Firebase console Firebase console let's select our project R native dream let's press on build and select fire store database but first what is the fir store database fir store is a flexible scalable non-sql Cloud database to store and sync the data it keeps your data in sync across client apps through real time listeners and it Support also offline support I mean when your device is offline or there is no networking we can cat data so now let's create a fir store database let's press here let's press on create database let's start in test mode not production mode and let's press next let's press enable great we have created our database now let's add some data for example let's start a collection of data let's call it food food okay and let's press next the document I want any document has an outo ID we can type our IDs like one 2 3 or anything that we want but I prefer to make the Firebase generate the ID for us let's press on Out Auto ID to generate a dynamic ID and let's enter our data if we have a look at our image we want here an image and title and rating and price image title rating and price so let's enter them the title the full title let's call it super Dash super Dash and let's add another field it will be the price the price is going to be a number and it will be nine like that let's add another field the rating and the rating is going to be also a [Music] number and it will be five stars finally let's add the image URL image URL and I'm going to use that image let's copy the URL of it and paste it here so now let's have a look we have here an image title rating and price good now let's save our first Dash let's press save okay now let's try to get that data in our react native app in that lesson I'm going to fch that only that Dash but in the next lessons we're going to fch we're going to Fitch all those lists I'm going to make a list of food and save them to fire base okay but in that lesson we're going to Fitch just a one dish okay so now let's try to Fitch the data from our database using fir store using react native fire store now here in documentation let's go down to Cloud fir store and let's press on usage here we need to install the app module and we have done that before so no need to this step but we need to install our Firebase fire store here our project let's add that package rack native Firebase fire store and let's install the boots that's those Bots for the iOS okay now let's go down into usage let's copy that code let's first import our fire store then let's try to get our data we're going to create an ising function const get data equals to Asing function and let's paste our code here our code that we have copied from here okay and let's try but first we need to rerun Android app reun Android now our app is ready let's just log in now we are here in the home screen let's to make some changes on that code first let's add here a wait keyword and let's the change the name of the collection the collection in our database called called Foods so we need to copy that and paste it here instead of users okay and let's add a get allow us to get our food and let's change that name to food collection food collection now let's log that collection console log the collection and see let's first call this function inside use effect get data because we initialize this function but we didn't call it yet so let's call it now let's try to log our data we have here that complicated log to make it simpler just we need to to pick the docks from that data those docks is the array that indicates to our to our food an array with one element so to pick the the one element of it just indicate the index of zero let's press save now we got here some log but we want to make it more simpler to to parse it so just add this this method data like this now we got here our data that's the image URL that's the price that's the rating that's the title super Dash let's try to set the state on it const our or dish set dish equals to use State and let's set State let's set Dash to that to this here the first element of our response that we've got from the back end I mean from the database and let's press save now let's pick that dish and try to render it for example if we add a text here with dash dot price now we have here the price let's add another text with dash dot title we have the title the super Dash let's add the image image source of it it's going to be URI Dash do dash. image URL and let's add some styling height of 100 width of 100 look what we get here we get the data that we have stored in fire base okay so weit wait for the next lesson so we can add a lot of data here a lot of dishes so render it in a list like that like this list and also the CATE and also we're going to learn how to add data and store it in the database from our code here using inputs and image Pickers and rating and so on so don't forget to hit the like button and subscribe to my channel thanks for your watching withit me for the next lessons in this lesson we're going to learn how to get list of data from Firebase if we see here our app we have here a list of categories and here a list of foods okay and we want to store th those two lists in the Firebase and try to Fitch them from our database okay so let's first change the UI of the screen I don't want to waste your time so I will not waste your time to create that UI or to create that screen I will create that screen and you can check the code I will leave it in the description and you can download it from my GitHub page okay so now let's to to not tte our time let's add that code here and press save now we have here that list but if you look at the code I have those category as a static values for example if I delete that one and delete that one I just got only two I want to make it Dynamic and I want to get them from the database so first let's store them in the database okay so here in our Firebase Firebase console let's go to console and let's select TR native dream let's store those data let's go to fir store database and let's start a new collection let's call them categories okay let's press next let's make the ID Auto and the field we want here an image and title okay so it will be image URL and it will be string let's add a value so now those are the images that I'm going to use okay and let's add another field with the title let's call this food okay let's press save let's add another document with a to ID image URL is going to be that image and the top title is going to be Pizza let's save let's add another document with AO ID it will be KFC image URL and title will be KFC now we are storing the our data in the database we were making that manually but in next lessons we're going to learn how to do that using our app I mean posting data to Firebase okay image URL with that string and the title will be french fries and let's press save now we want to Fitch those four documents from our categories okay so now let's type here react native Firebase and let's open that link let's go to down to fire store documentation let's press on usage with flat list and let's press on it let's go down go down and let's copy that code but wait let's go down okay let's copy that code first with that use effect let's copy it and go to our project here I would like to mention don't worry with those red lines here it's St typescript issues and in typescript course we're going to learn how to handle those fixes I just leave them to to make lessons about typescript with react native so don't worry okay so now let's import use effect and let's import our fire store and import fire store from react native Firebase fire store now we want the collection of categories not users if you see here the collection name is category so let's let's copy that string and put it here okay and let's rename that constant with categories here and here and here okay let's go to our documentation and copy that code the US state hook loading and users but we're not going to make them users we're going to make them categories okay let's make that categories and this set categories and here let's refactor that to make it set categories okay now let's press save and let's try to log our categories let's console console.log categories n c wow we have here the categories here the image URL the key the title kefc now I would like to mention that we have fetched our data correctly from Firebase so let's continue with the documentation and see transforming the data we've done that let's add that activity indicator when loading here before return let's add that code and let's not forget to import activity indicator okay let's press save I want to see our app okay now our flat last let's copy that code all all the code from Firebase documentation so no need to worries just copy the code from the documentation and handle it with your own okay so now no need to this scroll view with those categories anymore so let's comment them now we can't see them and let's paste our code let's import our flat list and let's replace users with categories and let's render our category item our category item that's the component we have created here don't worry that component in the description in the in it's provided in source code because it's not a UI lesson it's a fire based lesson okay if you want to learn UI I have a video in the in description that will take you from zero level react native UI to and make you export you'll be able to build any UI that you want so now let's import our category card and that card take two properties the title and it will be item do title and the second property is image and it's going going to be URI will be item do image URL and let's press save now we are fited our data but it's vertically so we want to make that flat list horizontally so just add that property horizontal and press save now we have fited our data from our Firebase not from not static like before we can get rid of that code if you see here that's the data we have added to Firebase if you want to make sure of that let's add another document to Firebase here in our categories let's add a new category let's let's make the ID Auto and let's add that field image URL let's add that image juice orange juice let's paste it here and let's add another field and it will be the title and the title is going to be juice let's press save great we have received that data juice now we have four five things french fries food pizza juice and KFC the same documents we have pasted here maybe that lesson is a little bit hard so we're going to recap it in the next lesson when we try to fetch our our main dishes here those dishes sandwich super sandwich at the special and so on so don't worry we're going to recap that lesson and you're going to be a Firebase expert in the future so don't worry and if you want my source code you can find it in the description thanks for watching now after we have got our categories it's time to get our food collection so now let's try to fetch them from our fire base first let's create a collection called Foods or whatever you want let's go to Firebase Firebase let's press on go to console and let's select our project let's press on firestore database wow we have created our collection before called foods and we have one item here so now let's add the other items so let's add some foods for example let's add new document with AO ID in our design we have here in our design in our product we have here an image and a title and a rating and price and add to card button so now we have to be aware to add those data the rating the title the image the price okay so now title of our food for example going to be Burger image URL is going to be let's pick that image that burger image let's copy that URL and paste it here the price is going to be a number and will be 12 for example and the rating or the rate let's make it also number and let's give him a rate of four okay and let's press save now we have two Foods here let's add another one now we have here three items of food every food has a a rating and price let's let's uh edit this because here rate rate and here rating so let's edit that oops it can't be edited so let's delete it and and let's add a field of rate and let's make it a number and let's make it four let's add look we have updated in our Firebase fire store now let's get those Foods okay here in our code as we have seen before we just need to add a US effect hook inside that use effect let's type that con subscriber equals to fir store do collection to get the our collection and let's put our collection name and our collection name is food okay and on Snapshot that's the response now let's create a variable con Foods equals to an M array and let's add our for each we can copy it from that okay this is going to be the response for each and inser let's replace categories with food with foods and that set categories is going to be set food so let's create a US state hook with foods and set Foods okay and now let's go down and set our foods to that Foods array is coming from our fire base and finally let's add our return function inside use effect hook now let's copy our foods to see have we successfully get our Foods data from Firebase or not so let's add console.log our foods and see in our terminal now we can see our data here image URL that's the image of hurger let's open it let's open it see we have our food correctly so now let's add it inside a flat list so let's add a flat list it's it's going to be horizontal too the data is going to be Foods the render item is going to be let's to create that component that component that food component but since it since I don't want to waste your time it's not a UI lesson it's a react native fire base so let me create that component real quick and you can copy it from the code that I give you in description you can use my code using GitHub page I push code there so to not waste our time and make the video taller let's create that component real quick okay let's name it here so now after we have created our food card so let's render it fold card now that's our card let's give it our data for example image is going to be item. image URL I wonder where is the first image so let's complete our let's give him the title item. title let's give it a price item dot price for the rating I have just removed it right now because we're going to build that rating bar in separate lesson so I removed it right now but I'm wonder why the first image here doesn't I can't get it is there a problem with our image oh now I know what's the problem here image URL should be like that it's my bad sorry so let's edit that we cannot edit the key so let's add a new Field image URL let's copy that string and add it here and let's update now let's get back now we can see our image right now what if we add a new food for example let's add the food with that image so now let's add a new document with title spaghetti now let's press save and see our great now we can see our new Dash here so now you have learned how to get data from fire base just you have to install the fire store package and to use the collection method and put here the collection name and don't worry about those red lines because those are Ty typescript issues and we're going to fix them inside our typescript course I don't want to confuse you but don't worry we're going to fix those red lines here thanks for watching and see you in next videos after we have learned how to get data from Firebase fire tore in that lesson we're going to learn how to post data or to save data in our database so now let's try to add a new category with those categories to do that we need to create a function const for example add category equals to fire store dot collection we need to add here The Collection name we can get the collection name for from our Firebase that's our Firebase go to console select our project and press fire store database that's the collection name categories so let's copy it and paste it here okay we need we have we have a method called add inside this method we just add an object inside that object we just add the properties for example the title and image URL okay the title is going to be meals or big meals okay and with image URL as we see here image URL let's add that link this image link let's copy it and paste it here and let's press save and let's add a a dummy button right now it will be a dummy button but in next lesson we're going to learn how to create a screen to handle this Pro this process using input okay so now let's add just a a test button let's add it here button title to add category and when we press that button on press on ADD let's copy the function name add category and now let's try to press here let's press add category and let's scroll to see our new category now we have it here category with big meals and with that image that we have put let's try to add another one for example let's try with that image okay so let let's copy that image URL and let's go here let's change the title to be vegetables vegetables and the image URL is going to be that link and let's press save and let's press add category when we press add category now we have our vegetables here so now we have the our our previous category and we have added a big meal category and vegetables category and in fire base we can see we have added new two collections now let's try to add a food we have here a four items of food let's try to add a food okay so now let's create a function like that const add food equals to fir store do collection and we have to select the right name of collection and the right name is Foods okay let's copy that collection name do add and let's add a new object and see what we need to add here we need to add the price and image URL and the title make sure we have to add it like those keys look here image URL price rate and title okay now let's add them image URL let's use that image okay title is going to be fish with salad price is going to be 9.20 when you need no need to add the rate right now okay let's copy that add food function and create a new button here to add food let's add it up here after main dishes so let's add a new button with title add food and when we press on it just paste the function add food okay so now let's try to add food we have here uh four items let's add food great we have here fish with salad has been added and it has been added also in our fire base so now let's try we have an important note we have to do and it's how to handle errors we have to call back two methods then and catch then return us the pro the response and we can do something here okay and catch if we have an error he can log us our error so now if you face any error when adding food you can log it here and you can also create alerts for example alert do alert food added and here alert for alert error happen Okay let's give it a try and let's add some let's add food let's change the image URL let's use that the big meal or hamburger so let's use it Burger $8 with that image URL and let's press save and now let's try to add food food addit and let's scroll now we have here burger and we have here another burger that we have just added right here that was our lesson today how to add or to Poe data to fire base in next lesson we're going to make that we're going to remove those two ugly buttons and we are going to add a model with inputs to allow user adding food in our app using the inputs and using the inputs so wait for the next lesson and don't forget subscribe and hit the like button hello guys in this lesson we're going to learn how to add food or categories but from inside the app dynamically not statically we have created our functions here add category and add food but those are static values like the title and the image URL now we want to make a new screen with the inputs to allow you user to add title and image URL and prices okay so now let's create that screen let's create a new screen with add food or category TSX and let's create a functional component okay let's change that button add category or to make it add category or food and when we press on it we're going to make a navigation when we press add that button add category or food let's let's move to adding screen navigation do navigate we need to use import the navigation property first so let's put here in props navigation. navigate and the screen is going to be navigate add category or food screen let's put the name here but we need to put it in our stack first inside navigation inside inside my stack let's copy that line and paste our add food or category and let's remove that button the add food button now when we press here we should go to add fot or category screen okay so now let's add here our inputs style justify content Center align items Center as well text input since it's not a UI course I'm going to use the core components of react native but if you want to create a custom wonderful text input I have left you a link in the description you can check it and this tutorial is going to make you from Zero to Hero in building UI okay let's add a text input of placeholder but let's make that Felix one placeholder category name and another one for category image URL okay and button with title add category okay now we have here a category name text input category image URL and a button to add that category okay so now let's control our inputs we can control them using us con if you're not familiar with us T hook I have a left a video in the description you can check it and learn how US state Hook is working in react native okay so now first category name and set category name equals to use State and it will be string okay that's just a spelling error okay let's duplicate this and make it image URL image URL okay now to control text input we have two important properties and those r value and it it's the initial value and like that like that init string if we put it here this text input have that input string if we put a AA log the text input is a a a but we want to leave it as M string and only change text only change text and it's a function that take the text we've entered as argument and we can set our category name to that text that t means the text let's type it like this to understand me now if we press a a a a a the value of that text input is a a AA I'm going to show you let's log that variable C name and save and look here a a a a that's the value of category name value of category name is a a a and we can change it for example to be o o now now we have controlled our the category name let's control our the image let's cut or copy those two lines and base them here let's remove those spaces and we are going to just replace the category name with category image URL and set category image URL okay now let's press save and let's add our function that we have written before look at that function we have created in the in the previous lesson let's copy it and put it here const add food let's import just our fire store we can just import it from like that import fire store from react native Firebase fire store okay and let's just add on press to be add the category when we press when add category a new category is going to post it in our database but look here we're going to post a new category with the title of vegetables and that image orl and we don't want that we don't want to make it static I want to post the data that we have written here so let's replace a vegetables with that variable category name and let's replace that image URL with that with that category image URL now when we press here we're going to post the data just just we type here let's test it for example let's use that image let's copy the image URL of it and let's add a salad salad in in the title and image URL we're going to paste the our the the link that we have copied from that image and let's finally let's please just add navigation to go back because I want to go back to home screen when I add something okay so let's add navigation let's add it first into props do go back and now let's test it let's press here now we have added the food we have just yes we have it here a salad a salad dish has been added in our category with the image that we have using okay now let's repeat those steps when adding food okay we we are here in add food or category screen just to scroll down and create let's first copy the function of add food here and paste it here that function we have made it in the previous lesson please check the previous lesson to have a good understanding of that lesson please okay now let's add that alert that's to handle errors okay we we need here three properties image URL title and price so let's create three use States hook 1 two 3 the first is going to be food title okay the second is going to be food image URL the thir is going to be food price great isn't them and let's also create uh three text inputs with a button of add food let's copy that text input and just replace that with food title and the value is going to be food title and set food title let's create another one for the price or for image URL it's going to be food imageurl and that's it food image URL and this is going to be image URL and let's create the last one the the last text input food price set food price and that's going to be food price and finally let's add our button add food add food with a function add food okay I think my code is not format it if if you want to format it just highlight it all and press command and key and F or control and k&f if you're using Windows so now let's press save let's add just some margin here to separate the food from the category I know it's the the bad UI but it's not a UI course it's a Firebase course Firebase fire store course so I don't want to waste the time of of reactnative developer who can implement the screens and so okay so now our last thing we just need to replace those Statics data for example that price is going to be food price that title is going to be food title that image URL is going to be food image URL and let's press save and now let's testing add food but don't forget to navigation. go back first navigation do go back when we add food okay so now let's try to add that food with that image since we don't have a french fries so let's add it fries with that image URL here let's copy it and paste it here and the food price is going to be 1,000 it's just for testing now let's press on add food great food add it and let's wow our fries is here with $1,000 it's the most expensive food I see here let's try to add another one let's use that steak image to add that food steak and with that image URL and the price is going to be for example 23 or 233 and let's add food food added and let's scroll to see our food great that's our stake with $233 wait for next lesson to learn how to delete those foods and delete those categories I hope that lesson was easy to you and if you have any troubles or anything please just let me know in the comments thanks for watching in this lesson we're going to learn how to delete items from Firebase fire store okay let's try to delete KFC and use first we don't need those functions anymore add category and add food so let's delete those functions and let's create a function const test delete item just you have to type fir store do collection and you have to use to select the collection name you can get the collection name from Firebase fire store as you see here for example we want to delete something from categories so let's copy it and paste it here okay then we have to select the document key here we should add the document key where can we get it we can get it from the from our flatlist data for example let's log those categories loged that's the data of our categories I want to format them so to format them or to pre to beautify them just stringify them first and add those two parameters now and three now they are formatted I mention we want to delete the KFC the key of KFC is that key okay let's copy it and paste it here what next next we should select the method of delete here we can update here we can delete then you can use the then and catch methods and finally also to create a call packs if you want to show alert or something for example inside then alert alert category deleted and finally do catch alert do alert error happen now let's try to delete the KFC let's copy that function and add a test button right now with title test delete on press test to delete item now we will press on that item the KFC should be deleted let's try great category deleted now we want to delete the juice so let's copy the key of it let's search with juice that's the title of juice that's the image URL that's the key of it so let's cut it or copy it and paste it at the top here okay and let's try to delete that juice great we have deleted that category now let's try to delete some foods so instead of logging the categories let's log the food to see see which one we want to delete we have here the super dish let's delete it let's copy the key of it and paste it here but don't forget to replace the category collection name with Foods collection name the foods was yes like that that's the collection name of foods so let's paste it here let's replace that with food deleted now let's try to delete that super dish let's press here great it's deleted from our Firebase fire store let's delete also that duplicated one fish with salad so let's open our console and see fish with salad and fish with salad that's the key let's pick any one of them and let's paste it here and let's save and let's test to delete great we have deleted one of them but that it doesn't make any sense we want to add a close icon here or delete button when we press on it we delete that category so now let's create that close button or delete button let's remove that function we don't need it anymore and let's remove the button too let's go to category component just right click on it and go to go to definition and press here twice so now we are in category card let's add a button to delete now we want to increase the height of that component let's make it 120 and let's increase the flat list that contain it for example that view let's make it like that okay I know it's the it's not the best UI but it's not a UI course it's a Firebase course if you want to learn how to create a wonderful UI I left you the a link in the description you can check it and you can go and learn how to create an amazing UI using react native okay so now to not waste your time let's add our function by the way you can get the function from Firebase documentation if you open Google and just type react native Firebase and go here and just press on cloud fire store press on usage and go down until you reach the delete removing data yes it's here just press on here that's the removing data function that's to remove the full item and that's to remove a fi from the item okay so now let's copy that code let's import first and let's create our function const delete item and let's put inside that function let's put that code fir store. collection let's format it fir store. collection you have to add here the collection the the right collection name you can get it from our Firebase fire store but I remember it it's categories and here you should put your key your item key as we done that before from that data in flat list so to move to make that we want to pass it as props so let's add a property called key or item key and let's add it as a props to fix that that typescript warning we just add it like that and put the type of it to make it string if you're not familiar with typescript don't worry about that step and finally let's replace user with category and inside that button on press delete function finally in just in home screen we we need to pass the data of the key that property item key is going to be item. key we can get it from here item. key that's title MJ rate and that's the key okay so now let's press save and now let's test deleting from our Firebase let's delete that item when we press delete oops it's not deleted what's the wrong let's try to log our item key to see why it's not deleted maybe that collection name is it's wrong or something let's copy it from here oh the collection name was wrong we have to type it like that because it's like that in Firebase if you look at Firebase it named with that key with that collection name so let's copy it you you should copy it and paste it here like that so now let's remove that log and let's try to delete to delete that category okay so now let's press delete now it's deleted wonderful so now let's delete that pizza great we have deleted our pizza let's delete that french fries great we can delete it right now that's great now let's make that in the foot also so now let's go down here and let's go to our food card let's add that property item key equal to item. key okay now let's go to our food card don't worry about those things those readed lines those are typescript issues and we're going to fix them in the our typescript course okay so now let's add a property called item key and let's copy our function from here or from Firebase if you want you can c copy it from Firebase const delete food equals to Let's format it and don't forget to to import that okay let's replace food users with foods but now I'm going to take it from Firebase because I don't want to I don't want to face the previous error okay let's copy it and let's paste it here and here is going to be the item key and here we're going to type f deleted okay now let's add a button to fire that function so let's make it like like here down here now if we press delete here let's let's change it color to make it white now if we press here we should delete that food so now let's try to delete that steak great we have deleted let's delete that burger great we have deleted let's delete that priz great we have deleted it that was our lesson today I hope it's easy to you don't forget about this road lines because those are typescript issues and and I don't want to waste your time fixing them and I don't want you to get confused about them this is the function to delete from Firebase fir store thanks for watching and don't forget subscribe and hit the like button thank you in this lesson we're going to learn how to update data in Firebase okay so so let's change that big meals to make it for example Burger so let's create our function inside home screen test update equals to fir store dot doc and inside doc we just put the key okay dot update and inside update we just add an object for example we can add the title of it to change the title or we can change image URL so now let's first try to change the title to make it Burger but let's get the that the key of big meals okay to get the key let's log our categories so let's log our categories and press save we have here the key of big meals is that key let's copy it and paste it here and let's add a a dami buttton right now button with title test update and when press on it we just fire that function test update so now let's try to press on test update and big and change that big meals to Burger okay now let's press test update oops we get an error so what's the problem in our function oh we didn't we didn't add the collection name so we need to add dot collection and add the collection name and the collection name is categories now let's try one more time test update to change that name great we have changed it so we can change it for example to one meal and test again great we have changed it so let's try to change for example that food so let's log our Foods let's fish and salad that's the key of fish and salad and don't forget to change the The Collection name to be Foods okay and let's change the title to make it only salad and let's press test great it has been changed let's change the price let's make the price for example 1 and 5 Cent so let's press update great it be 10 and 5 cents let's make it 9 let's test great let's we can also try to change the image URL for example let's change the image URL to be like that to be to be that image from that link okay let's test great we have we have changed it so now you've learned how to update data in Firebase now let's create a new example with that add screen we want to add an edit button here beside the delete button and with it we can edit the product so let's go down let's close that and let's go to foot card and let's add a button here let's will put them inside view with felic directional row let's really make that edit and when we press on it let's fire function called edit food and that edit food function we're going to create it right now now const edit food equals to let's add the navigation property and let's navigate to add food screen that screen add food screen or add food or category screen okay but we're going to take some parameters and those parameters are the first parameter we want to put is is edit equals to true to know that when we go to that screen at photo category we want to edit something not to add something okay and we want to take the title with us the title is going to be the title and the price is going to be that that price property and finally the image and item key item key is going to be the item key and now in modern JavaScript especially in ESX if the title in object if the property equals to the key we can remove the value and just leave the key okay so we can remove that and remove that and remove that because we're using ESX or newer now when we press on edit oops we have a an error here navigation so let's use the navigation not use navigation property and let's use the navigation HS navigation hook okay let's type const navigation equals to use navigation okay now don't worry about those red lines because those are typescript issues and I don't want to hesitate you or I don't want to to make you confused about them okay so now let's press on edit now we are in edit screen let's take those params using that H const params equals to use route you can import it from react navigation native okay we can look our params to see now we have here the image and the item key and the price and the title okay so now we can first declare a variable constant to see to to see if we want to edit or to add let's call it is edit equals to params dot is edit okay let's delete that inside those values if is edit the full title is going to bars do title otherwise image string okay and in image URL if it is edit the food image URL is going to be params do image otherwise image string okay and finally food price if is if it is edit is going to be par RS do price otherwise an inut string okay what we got here number that's the number and it should be a string we can skip it right now okay or we can put in that and make it to string okay now let's create a function to edit food that's the function of add food let's create a button to edit food and with function to edit food okay so let's con let's copy that function okay let's make it edit food Ed it it's similar to add but we we're going to make some changes and those changes are the collection it's still the same we just need to add the dog the dock key the dock key is going to be pams do key let's make sure of that no of item key and this ad we're going to make it update not add okay so now we just need to add the document key and to change the the ad to be updated and finally let's change those messages those messages food edit food updated and this is going to be error having finally let's add a button to edit we're going to make a a condition if is ited it just return that button with edit food and the function edit food otherwise just add that button of add food function okay now let's try to change that only salad only salad let's make it with nine and let's make it salad okay so now let's change let's remove only and make it salad and let's change the price and make it five now let's press edit food great food updated and it has been salad with five let's change that spetti or spagetti let's press edit and let's change the name of it to make it sandwich sandwich and the price of that sandwich is 40 and let's replace that image URL with that okay now let's press on edit food now we have sandwich with $40 I hope that lesson was easy to you if you face any problems or errors just let me know in comments and feel free to contact me via LinkedIn or Twitter I I will help you as much as I can I hope you enjoyed that tutorial and see you in the next tutorial next tutorial is going to be Redux tool kit that's next month and in December we're going to create a tutorial a wonderful tutorial of no GS so don't forget subscribe to my channel if you want to to have a big chance to get a free courses and free tutorials thanks for watching and please share the video and don't forget the like button

Channel: HeroDev

Views: 4,474

Keywords: react native, react native firebase, react native firebase tutorial, firebase, react native tutorial for beginners, react native firestore tutorial, react native firebase firestore, tutorial, firebase tutorial, react js, react, firebase authentication, Firebase tutorial for React Native, Beginner's guide to React Native Firebase, Step-by-step React Native Firebase tutorial, Mastering React Native Firebase, Building apps with React Native and Firebase, herodev, hero dev, ahmed sawy

Id: xssGcSoX_io

Length: 138min 46sec (8326 seconds)

Published: Tue Oct 24 2023