title: React-Native Rendering json flatlist
body: <p>I am new to react-native. I'm building up complexity but have gotten stuck on rendering FlatList items from a json list. This was working fine for ListView but not able to figure out what I am missing on FlatList.</p>
  
  <pre><code>import React, { Component } from 'react';
  import { ActivityIndicator, ListView, Text, View, StyleSheet,TouchableOpacity, FlatList  } from 'react-native';
  
  export default class Movies extends Component {
    constructor(props) {
      super(props);
      this.state = {
        isLoading: true
      }
    }
  
    componentDidMount() {
      return fetch('https://gnosisdevelopment.com/office/list.json')
        .then((response) =&gt; response.json())
        .then((responseJson) =&gt; {
          let data_source = new ListView.DataSource({rowHasChanged: (r1, r2) =&gt; r1 !== r2});
          this.setState({
            isLoading: false,
            dataSource: data_source.cloneWithRows(responseJson.office_staff),
          }, function() {
            // do something with new state
          });
        })
        .catch((error) =&gt; {
          console.error(error);
        });
    }
  
    render() {
      if (this.state.isLoading) {
        return (
          &lt;View style={{flex: 1, paddingTop: 20}}&gt;
            &lt;ActivityIndicator /&gt;
          &lt;/View&gt;
        );
      }
  
      return (
        &lt;View style={styles.container}&gt;
          &lt;FlatList
            data={this.state.dataSource}
            renderItem={({item}) =&gt;
                      &lt;Text style={styles.touchButtonText}&gt;{item.staff_name} &lt;/Text&gt;
            }
          /&gt;
        &lt;/View&gt;
      );
    }
  }
  const styles = StyleSheet.create({
  container: {
      flex:1,
      alignItems: 'center',
      alignContent:'center',
      flexDirection: 'row',
      flexWrap:'wrap',
      justifyContent:'center',
  },
  touchButton:{
      alignSelf:'center',
      backgroundColor:'#2980b9',
      paddingVertical: 25,
      width:295,
      margin:15,
  },
  touchButtonText:{
    textAlign:'center',
    color:'#ffffff',
    fontWeight:'bold'
  },
  
  })
  </code></pre>
  
  <p>The text field will be in a touchable and I'll be adding function to the buttons but I wanted to get the listing correct first.
  Any suggestions are welcome. Thanks for the help :)</p>
  
  <p><a href="https://gnosisdevelopment.com/office/list.json" rel="noreferrer">https://gnosisdevelopment.com/office/list.json</a></p>
  
  <pre><code> {
    "title": "Welcome to our office",
    "description": "Your smart office assistant",
    "office_staff": [
      { "staff_name": "Dr. Bob"},
      { "staff_name": "Dr. Xavior"},
      { "staff_name": "Dr. Sanchez"},
      { "staff_name": "Dr. Robert"},
      { "staff_name": "Dr. Albert"}
    ]
  }
  </code></pre>
  
  <p>UPDATE with new datasource load:</p>
  
  <pre><code>    import React, { Component } from 'react';
      import { ActivityIndicator, ListView, Text, View, StyleSheet,TouchableOpacity, FlatList  } from 'react-native';
  
      export default class Office extends Component {
        constructor(props) {
          super(props);
          this.state = {
            isLoading: true,
            dataSource: [],
          } 
        }
  
        componentDidMount() {
            return fetch('https://gnosisdevelopment.com/office/list.json')
              .then((response) =&gt; response.json())
              .then((responseJson) =&gt; {
               // just setState here e.g.
               this.setState({ dataSource: responseJson.office_staff, isLoading:false,});
              })
              .catch((error) =&gt; {
                console.error(error);
              });
          }
        render() {
          if (this.state.isLoading) {
            return (
              &lt;View style={{flex: 1, paddingTop: 20}}&gt;
                &lt;ActivityIndicator /&gt;
              &lt;/View&gt;
            );
          }
  
         return (
        &lt;View style={styles.container}&gt;
          &lt;FlatList
            data={this.state.dataSource}
            renderItem={({item}) =&gt;&lt;Text style={styles.touchButtonText}&gt;{item.staff_name}&lt;/Text&gt;
            }
            keyExtractor={(item, index) =&gt; index}
          /&gt;
        &lt;/View&gt;
      );
    }
  }
      const styles = StyleSheet.create({
      container: {
          flex:1,
          alignItems: 'center',
          alignContent:'center',
          flexDirection: 'row',
          flexWrap:'wrap',
          justifyContent:'center',
      },
      touchButton:{
          alignSelf:'center',
          backgroundColor:'#2980b9',
        paddingVertical: 25,
          width:295,
          margin:15,
      },
      touchButtonText:{
        textAlign:'center',
        color:'#ffffff',
        fontWeight:'bold'
      },
  
      })
  </code></pre>
  
  <p>Final working version:</p>
  
  <pre><code>import React, { Component } from 'react';
  import { ActivityIndicator, Text, View, StyleSheet,TouchableOpacity, FlatList  } from 'react-native';
  
  export default class Office extends Component {
    constructor(props) {
      super(props);
      this.state = {
        isLoading: true,
        dataSource: [],
      }
    }
  
    componentDidMount() {
        return fetch('https://gnosisdevelopment.com/office/list.json')
          .then((response) =&gt; response.json())
          .then((responseJson) =&gt; {
           // just setState here e.g.
           this.setState({ dataSource: responseJson.office_staff,isLoading: false });
          })
          .catch((error) =&gt; {
            console.error(error);
          });
      }
    render() {
      if (this.state.isLoading) {
        return (
          &lt;View style={{flex: 1, paddingTop: 20}}&gt;
            &lt;ActivityIndicator /&gt;
          &lt;/View&gt;
        );
      }
  
      return (
        &lt;View style={styles.container}&gt;
          &lt;FlatList
            data={this.state.dataSource}
            renderItem={({item}) =&gt;&lt;Text&gt;{item.staff_name}&lt;/Text&gt;}
            keyExtractor={(item, index) =&gt; index}
          /&gt;
        &lt;/View&gt;
      );
    }
  }
  const styles = StyleSheet.create({
  container: {
      flex:1,
      alignItems: 'center',
      alignContent:'center',
      flexDirection: 'row',
      flexWrap:'wrap',
      justifyContent:'center',
  },
  touchButton:{
      alignSelf:'center',
      backgroundColor:'#2980b9',
    paddingVertical: 25,
      width:295,
      margin:15,
  },
  touchButtonText:{
    textAlign:'center',
    color:'#ffffff',
    fontWeight:'bold'
  },
  
  })
  </code></pre>