How To Fetch or Retrieve Data From Firebase No SQL Realtime Database Using React Native & Expo Apps

Hello, My name is Rohit, and In this video, I will show you how to fetch data from the firebase real-time database using react native and expo applications. So, without wasting any time, start your expo project, select a blank template, name your application, and continue to dependencies-downloading. Now, install the firebase package. Here I am using Firebase version 9.6.11 because it is bug-free. Before writing the code, run the application to check that everything is working fine. We are going to fetch the data of this ‘posts’ node first. If you don’t know how to set up the firebase account and how to add the data to the firebase from the react native and expo applications. Then do check out the link in the description. I made a separate video on that. This video is the next part of the last video. Now to add the firebase web-based config keys. Make a config.js file in the root directory and follow the video. Perfect, Now, I am going to customize the project a little bit. Make a separate javascript file. In that file, we will write the code to fetch the data from the real-time firebase database. We are going to store the fetched data in an array. So, define it and set the initial state of the array to empty. Inside the useEffect hook, first, we set the reference to the posts node. Don’t worry about the variable name I used. You are free to customize it. When the data at that location is updated, the code will map the data to an array of objects and log the resulting array to the console. It will also update the component's state by calling setTodoData with the array of objects. Next, just render the data with a little bit of styling. You are free to experiment with the code. Something like this: Thanks for watching. See you in the next video.

Channel: Bug Ninza

Views: 9,236

Keywords: React Native Expo, Mobile App Development, iOS App Development, Android App Development, Native App Development, Javascript, Code, Programming, Technology, Software Engineering, Projects, ui-ux, cross platform framework, js, learn javascript, app development, react navigation, react navigation 6, firebase, React native Tutorial, react native tutorial in hindi, react js, android, ios, crud, beginners project, realtime, realtime db, no sql db, fetch, data

Id: 6wk1OrGKE1w

Length: 10min 12sec (612 seconds)

Published: Mon Jan 09 2023