title: FlatList in React Native does not display any content
body: <p>I just learned that there is a flatList in React Native. I have a list of services, when the user tap on each service, they are redirected to the address where those services are available. I am trying to display these addresses in FlatList. The screen shot of the list of services is below:</p>
  
  <p><a href="https://i.stack.imgur.com/1IqNK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1IqNK.png" alt="enter image description here"></a></p>
  
  <p>when the user taps on Test service, I want to show the address in the form of FlatList. I am not sure, but whatever I am displaying inside flatList is not showing on the page. Below is my entire code including flatlist:</p>
  
  <pre><code>     /**
   * Sample React Native App
   * https://github.com/facebook/react-native
   * @flow
   */
  import React, { Component } from 'react';
  import { Text, View, StyleSheet, Image, ScrollView, TouchableOpacity, Linking, Button, FlatList } from 'react-native';
  import { connect } from 'react-redux';
  import { getTheme } from 'react-native-material-kit';
  import EvilIcon from 'react-native-vector-icons/EvilIcons';
  import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
  import SimpleIcon from 'react-native-vector-icons/SimpleLineIcons';
  import * as actions from '../actions';
  import getDirections from 'react-native-google-maps-directions'
  const theme = getTheme();
  
  const styles = StyleSheet.create({
    card: {
      marginTop: 10,
      paddingBottom: 20,
      marginBottom: 20,
      borderColor: 'lightgrey',
      borderWidth: 0.5,
    },
  
    container: {     
      flex: 1, 
      justifyContent: 'center', 
      alignItems: 'center', 
      backgroundColor: '#4F6D7A', 
      height: 500,
      alignSelf:'center',
      width:500,
      position: 'relative',
      marginTop: 5,
      top: 10
    }, 
  
    title1: {
        top: 10,
        left: 80,
        fontSize: 24,
    },
    title2: {
        top: 35,
        left: 82,
        fontSize: 18,
    },
    image: {
        flex: 0,
        height: 100,
        width: 333,
        backgroundColor: 'transparent',
        justifyContent: 'center',
        alignItems: 'center',
    },
    closeIcon: {
        position: 'absolute',
        top: 5,
        left: 295,
        color: 'black'
  
    },  
    icon: {
        position: 'absolute',
        top: 15,
        left: 0
  
    },
    textArea: {
        flexDirection: 'row',
        paddingLeft: 20,
        paddingTop: 10,
        width: 260,
    },
    textIcons: {
        color: '#26a69a',
    },
    actionArea: {
        paddingTop: 10,
        flexDirection: 'row',
        justifyContent: 'space-around',
        alignItems: 'center',
    },
  
    title:{
      justifyContent: 'center',
      paddingTop: 10,
      alignItems: 'center',
      alignSelf: 'center',
      fontWeight: 'bold',
      fontSize: 22,
      color: 'black'
      },
  
      SerContent:{
          fontWeight: 'bold',
          fontSize: 16,
          paddingTop: 10,
          alignSelf: 'center',
          color: 'black'
      },
  
      underLineText: {
          fontSize: 17,
          textDecorationLine: 'underline',
          color: 'black',
          fontWeight: 'bold',
          alignSelf: 'center'
  
  
        },
  
        dir:{
          flexDirection:'row',
          paddingTop: 30,
          alignSelf: 'center',
  
  
  
      } , 
  
      dirAddr:{
          flexDirection:'column',
          paddingTop: 30,
  
          alignSelf: 'center'
  
  
      },
  
      Address1:{
          alignSelf: 'center',
          marginRight: 20,
          fontSize: 17,
          fontWeight: 'bold',
          color: 'black'
      },
  
      fullAddress:{
  
          marginRight: 20,
  
          fontWeight: 'bold',
          color: 'black'
      },
      toolbar:{
          flexDirection:'row' ,   //Step 1
  
      },
      toolbarTitle:{
          width: 10,
          top: 0,
          left: 0,
          bottom: 0,
          right: 0,
          flex:1                //Step 3
        },
        buttonShape:{
  
          margin: 40,
          width:160,
          marginLeft: 80,
          backgroundColor:'#00BCD4',
  
  
      },
  
  
  
  producetBox:{
          margin:10, 
          fontWeight:'bold',
          color:'#000',
          alignSelf:'center'
  
  },
  
  price:{
  
      padding:5,
      margin:10,
      borderColor:'orange',
      borderBottomWidth: StyleSheet.hairlineWidth,
  }
  
  });
  
  
  
  class ServiceDetail extends Component {
      handleClick = (link) =&gt; {
          Linking.canOpenURL(link).then(suppported =&gt; {
              if (supported) {
                  Linking.openURL(link);
              } else {
                  console.log('Don\'t know how to open URI: ' + link);
              }
          });
      };
  
  
      constructor(props) {
          super(props);
  
          this.state = {
            latitude: null,
            longitude: null,
            error: null,
          };
        }
  
   componentDidMount()
   {
      navigator.geolocation.getCurrentPosition(
          (position) =&gt; {
            this.setState({
              latitude: position.coords.latitude,
              longitude: position.coords.longitude,
              error: null,
            });
          },
          (error) =&gt; this.setState({ error: error.message }),
          { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 },
        );
  
   }
  
  
  
    render() {
  
  
  
  
  
  var online="";
  var destUrl = 'https://www.google.com/maps/dir/Current+Location/' +  this.props.services.destAddr1 ;
  
  var destUrl1 ='https://www.google.com/maps/dir/Current+Location/' +  this.props.services.destAddr2 ;
  
  
  var Online=  this.props.services.onlineURL;
  
  return (
  
  
       &lt;View&gt;
        &lt;View style={styles.toolbar}&gt;
              &lt;Image 
                   resizeMode='contain'
                   style={styles.toolbarTitle} 
                  source={require('../Resources/AcrLogoWithDesc.jpg')} /&gt;
           &lt;/View&gt;
           &lt;View&gt;
  
               &lt;Text  style={styles.title}&gt;{this.props.services.ser}&lt;/Text&gt;
              &lt;Text style={styles.SerContent} &gt;Service is available in the following locations:&lt;/Text&gt;
          &lt;/View&gt;
  
          &lt;View&gt;
          &lt;FlatList
             data={this.props.services}
              renderItem={({item})=&gt;
              &lt;View&gt;
                &lt;Text&gt;{item.ser}&lt;/Text&gt;
               &lt;/View&gt;
  
          }
          /&gt;
          &lt;/View&gt;
  
          &lt;View style={styles.buttonShape}&gt;
              &lt;Button  onPress={() =&gt; this.props.noneSelected()} title = 'Close'/&gt;
         &lt;/View&gt;
  
  
     &lt;/View&gt;
  
  
  
    );
  }
  }
  
  
  
  const mapStateToProps = state =&gt; {
      return { 
          services: state.serviceSelected
       };
    };
  
  
  
  export default connect(mapStateToProps, actions)(ServiceDetail);
  
  I can see the content of {this.props.services.ser}, but I cannot see the content of  &lt;Text&gt;{item.services.ser}&lt;/Text&gt; which is inside the flatList. below is the screen shot of the service details when the user taps on Test service:
  </code></pre>
  
  <p>Item.services.serv content is not appearing on my second screen shot. Below is my JSON and the screen shot of resulting screen file":</p>
  
  <p><a href="https://i.stack.imgur.com/N7FDe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/N7FDe.png" alt="enter image description here"></a></p>
  
  <p>[</p>
  
  <pre><code>{
      "id":0,
      "ser": "Test Service",
      "Location": "TestLoc",
      "Phone1":"(999)-999-5050",
      "SecondLoc": "TestLoc2",
      "email":"test@test.com",
      "sourceLat":"33.977806",
      "sourceLong":"-117.373261",
      "destLatL1":"33.613355",
      "destLongL1":"-114.596569",
      "destLatL2":"33.761693",
      "destLongL2":"-116.971169",
      "destAddr1": "Test Address, Test Drive",
      "destAddr2": "Test Address2, Test Drive2",
      "onlineURL":"",
      "Phone2": "(900)-900-3333"
    },
  </code></pre>
  
  <p>]</p>
  
  <pre><code>  [1]: https://i.stack.imgur.com/xiZMp.png
  </code></pre>
  
  <p>Any help will be highly appreciated. I tried below things for the flatList</p>
  
  <pre><code>&lt;View&gt;
          &lt;FlatList
             data={this.props.services}
             keyExtractor={(item, index) =&gt; item.services.id}
              renderItem={({item})=&gt;
              &lt;View&gt;
                &lt;Text&gt;{item.ser}&lt;/Text&gt;
               &lt;/View&gt;
  
          }
          /&gt;
          &lt;/View&gt;
  </code></pre>
  
  <p>This is another way that I tried:</p>
  
  <pre><code>  &lt;View&gt;
          &lt;FlatList
              style={{}}
                  data={this.props.services}
                  keyExtractor={(item, index) =&gt; item.key}
                  renderItem={(rowData) =&gt;this.RenderFeedCard(rowData)}
          /&gt;
          &lt;/View&gt;
  </code></pre>