How to Fetch Data from Firebase Realtime Database in React Native App

Question

How can I fetch data from Firebase Realtime Database using the below method? please suggest me. Thanks for your support I attached here my Realtime Database please check the image link https://i.stack.imgur.com/BagkZ.png

import React, { useEffect, useState, useContext, } from 'react';
import { View, Text, Image, StyleSheet, ScrollView, SafeAreaView, ActivityIndicator, FlatList, } from 'react-native';
export default function App() {

    const [isLoading, setLoading] = useState(true);
    const [data, setData] = useState([]);

    const getMovies = async () => {
        try {
            const response = await fetch('https://reactnative.dev/movies.json');
            const json = await response.json();
            setData(json.movies);
        } catch (error) {
            console.error(error);
        } finally {
            setLoading(false);
        }
    }

    useEffect(() => {
        getMovies();
    }, [])

    return (
       <View style={{ backgroundColor: theme.viewOne, }}>
                    {isLoading ? <ActivityIndicator /> : (
                        <FlatList
                        ListHeaderComponent={
                            <Image source={require('./AllImage/qq2.jpg')}
                            style={{ width: "auto", height: 150, resizeMode: "cover", }} />
                        }
                            data={data}
                            keyExtractor={({ id }, index) => id}
                            renderItem={({ item }) => (


                                <View style={styles.container}>
                                    <View style={styles.item}>
                                        <Text style={styles.mainText}>{item.title}</Text>
                                    </View>

                                    <View style={styles.item}>
                                        <Text style={styles.mainText}>{item.releaseYear}</Text>
                                    </View>
                                </View>
                            )}
                        />
                    )}
                </View>
    );
};

Answer 1

Rahul for react-native you can implement it like this instead of using async-await. You need to connect your app to database like this -

import { firebase } from '@react-native-firebase/database';

const reference = firebase
  .app()
  .database('https://<databaseName>.<region>.firebasedatabase.app/')
  .ref('/users/123');

Then you can perform read-write transactions like this -

import database from '@react-native-firebase/database';

database()
  .ref('/users/123')
  .once('value')
  .then(snapshot => {
    console.log('User data: ', snapshot.val());
  });

The article has a detailed implementation and you can choose to persist data easily as well. Hope it helps!