title: Render list item using FlatList in React Native and Firebase
body: <p>Very new to react-native. I am not sure how data is passed into the Flatlist and how to render it. I am passing in the Restaurants array from firebase database to this.restaurantRef. listenForRestaurants is called when first rendered to push all the referenced items into an array called restaurants. Not quite sure how I should put the logic for rendering the list of restaurants from firebase database. </p>
  
  <pre><code>import React from 'react'
  import {Component} from 'react'
  import {
  ScrollView,
  Text,
  FlatList,
  
  } from 'react-native'
  import firebase from '../firebase'
  import ListItem from './ListItem'
  
  
  export default class Location extends Component {
  
   constructor(props){
   super(props)
    this.restaurantRef = firebase.database().ref().
                        child('Restaurants')
    }
  
  
   listenForRestaurants(restaurantRef) {
    restaurantRef.on('value', (snapshot) =&gt; {
     var restaurants = [];
     snapshot.forEach((child) =&gt; {
      restaurants.push({
       name: child.val().name,
        _key: child.val().key
      })
     })
    })
  }
  componentDidMount(){
   this.listenForRestaurants(this.restaurantRef)
  }
  
  _renderItem(item){
   return(
    &lt;ListItem item={item} onPress={() =&gt; {}} /&gt;
   )
  }
  render(){
   return(
    &lt;ScrollView&gt;
     &lt;FlatList
      data={this.restaurantRef}
      renderItem={this._renderItem}
     /&gt;
    &lt;/ScrollView&gt;
   )
   }
  }
  
  //This the ListItem component
  import React, {Component} from 'react'
  import {
    View,
    TouchableHighlight,
    Text,
  } from 'react-native';
  
  
  export default class ListItem extends Component {
   render() {
    return (
     &lt;TouchableHighlight onPress={this.props.onPress}&gt;
      &lt;View&gt;
       &lt;Text&gt;{this.props.item.name}&lt;/Text&gt;
      &lt;/View&gt;
     &lt;/TouchableHighlight&gt;
    );
   }
  }
  </code></pre>