Fetch data from firebase realtime database, React Native (expo)

Question

I have that code, I need to fetch data instead of the static array here. Note: have connected to firebase realtime database and all that stuff, I just need to fetch data and map them, I will need to render them in a list.

const rec = [
    {
        name: 'Brothers Restaurant',
        avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',
        address: 'Address St. Random Number',
        link: 'Home'
    },
    {
        name: 'Example Restaurant',
        avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
        address: 'Address St. Random Number 23',
        link: 'About'
    },
    {
        name: 'Example Restaurant',
        avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
        address: 'Address St. Random Number 23',
        link: 'About'
    },
    {
        name: 'Example Restaurant',
        avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
        address: 'Address St. Random Number 23',
        link: 'About'
    },
]

const discover = [
    {
        name: 'Discover Restaurant',
        avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',
        address: 'Address St. Random Number',
        link: 'Home'
    },
    {
        name: 'Example Discover Restaurant',
        avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
        address: 'Address St. Random Number 23',
        link: 'About'
    },
    {
        name: 'Discover Restaurant',
        avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',
        address: 'Address St. Random Number',
        link: 'Home'
    },
    {
        name: 'Example Discover Restaurant',
        avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
        address: 'Address St. Random Number 23',
        link: 'About'
    },
    {
        name: 'Discover Restaurant',
        avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',
        address: 'Address St. Random Number',
        link: 'Home'
    },
    {
        name: 'Example Discover Restaurant',
        avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
        address: 'Address St. Random Number 23',
        link: 'About'
    },
]

export default class RestaurantScreen extends Component {
    static navigationOptions = {
        title: 'Restaurants',
        headerStyle: {
            backgroundColor: '#c4463d',
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
            fontWeight: 'bold',
        },
    }

    render() {
        return (
            <View style={styles.container}>
                <Text style={{ fontSize: 24, fontWeight: '700', color: '#c4463d' }}>Recommendations</Text>
                <ScrollView
                    style={styles.categories}>
                    <View>
                        {
                            rec.map((l, i) => (
                                <ListItem
                                    key={i}
                                    leftAvatar={{ source: { uri: l.avatar_url } }}
                                    title={l.name}
                                    address={l.subtitle}
                                    onPress={() => this.props.navigation.navigate(`${l.link}`)}
                                    bottomDivider
                                />
                            ))
                        }
                    </View>
                </ScrollView>
                <View style={styles.recommendations}>
                    <Text style={{ fontSize: 24, fontWeight: '700', color: '#c4463d' }}>Discover</Text>
                    <ScrollView>
                        {
                            discover.map((l, i) => (
                                <ListItem
                                    key={i}
                                    leftAvatar={{ source: { uri: l.avatar_url } }}
                                    title={l.name}
                                    address={l.subtitle}
                                    bottomDivider
                                />
                            ))
                        }
                    </ScrollView>
                </View>
            </View>
        )
    }
}

official documentation from expo didn't help a lot to be honest ^^ and I can't get this thing posted because I have a lot of code in here? -.-

Answer 1

Basically if everything is set up, you just need to put listener at lifecycle method (componentDidMount) and set the data inside state. for more info, you can check firebase js sdk

https://firebase.google.com/docs/web/setup

export default class RestaurantScreen extends Component {
    
    state = {
      rec: [],
      discover: []
    }
    
    static navigationOptions = {
        title: 'Restaurants',
        headerStyle: {
            backgroundColor: '#c4463d',
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
            fontWeight: 'bold',
        },
    }
    
    componentDidMount() {
      firebase.database().ref('places').on('value', (snapshot) => {
        const rec = snapshot.val();
        this.setState({ rec, discover: rec })
      });
    
    }

    render() {
      const { rec, discover } = this.state;
    
        return (
            <View style={styles.container}>
                <Text style={{ fontSize: 24, fontWeight: '700', color: '#c4463d' }}>Recommendations</Text>
                <ScrollView
                    style={styles.categories}>
                    <View>
                        {
                            rec.map((l, i) => (
                                <ListItem
                                    key={i}
                                    leftAvatar={{ source: { uri: l.avatar_url } }}
                                    title={l.name}
                                    address={l.subtitle}
                                    onPress={() => this.props.navigation.navigate(`${l.link}`)}
                                    bottomDivider
                                />
                            ))
                        }
                    </View>
                </ScrollView>
                <View style={styles.recommendations}>
                    <Text style={{ fontSize: 24, fontWeight: '700', color: '#c4463d' }}>Discover</Text>
                    <ScrollView>
                        {
                            discover.map((l, i) => (
                                <ListItem
                                    key={i}
                                    leftAvatar={{ source: { uri: l.avatar_url } }}
                                    title={l.name}
                                    address={l.subtitle}
                                    bottomDivider
                                />
                            ))
                        }
                    </ScrollView>
                </View>
            </View>
        )
    }
}