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

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>
)
}
}