title: Getting error Invariant Violation tried to get frame out of range index?
body: <p>I have create VenueList component. I want to display list using FlatList component in react native app. I am getting error: Invariant Violation tried to get frame out of range index (See screenshot).</p>
  <p>Code:</p>
  <p>VenueList.js:</p>
  <pre><code>import React, { Component } from 'react';
  import PropTypes from 'prop-types';
  import { View, Text, FlatList, StyleSheet } from 'react-native';
  import { connect } from 'react-redux';
  import { fetchVenues } from '../actions/venueAction';
  
  class VenueList extends Component {
  
      componentWillMount () {
          this.props.fetchVenues();
      }
  
      renderItem = ({ item }) =&gt; (
          &lt;View style={styles.item}&gt;
            &lt;Text&gt;{item.attributes.name}&lt;/Text&gt;
          &lt;/View&gt;
      );
  
      render() {
  
          return (
              &lt;FlatList
                  styles={styles.container}
                  data={this.props.venues}
                  renderItem={this.renderItem}
              /&gt;
          );
      }
  }  
  
  const styles = StyleSheet.create({
      container: {
        flex: 1
      },
      item: {
        padding: 16,
        borderBottomWidth: 1,
        borderBottomColor: '#ccc'
      }
  });
  
  VenueList.propTypes = {
      fetchVenues: PropTypes.func.isRequired,
      venues: PropTypes.array.isRequired
  }
  
  const mapStateToProps = state =&gt; ({
      venues: state.venues.items
  })
  
  export default connect (mapStateToProps, { fetchVenues })(VenueList);
  </code></pre>
  <p>venueReducer.js:</p>
  <pre><code>import { FETCH_VENUES } from '../actions/types';
  
  const initialState = {
      items: []
  }
  
  export default function (state = initialState, action) {
      switch (action.type) {
          case FETCH_VENUES:
              return {
                  ...state,
                  items: action.payload
              };
          default:
              return state;
      }
  }
  </code></pre>
  <p>venueAction.js:</p>
  <pre><code>import { FETCH_VENUES } from './types';
  import axios from 'axios';
  
  export const fetchVenues = () =&gt; dispatch =&gt; {
      axios.get(`my_api_link`)
      .then( venues =&gt; 
          dispatch({
              type: FETCH_VENUES,
              payload: venues
          })
      )
      .catch( error =&gt; {
          console.log(error);
      });
  };
  </code></pre>
  <p>The data which I want to display from API endpoint has json data as follows:</p>
  <pre><code>{
    &quot;data&quot;: [
      {
        &quot;type&quot;: &quot;venues&quot;,
        &quot;id&quot;: &quot;nb&quot;,
        &quot;attributes&quot;: {
          &quot;name&quot;: &quot;Barasti Beach&quot;,
          &quot;description&quot;: &quot;Barasti Beach is lotacated in the awesome barasti beach&quot;,
          &quot;price_range&quot;: &quot;$$$&quot;,
          &quot;opening_hours&quot;: &quot;10:30-12:40/16:00-2:00&quot;,
          &quot;organization&quot;: {
            &quot;id&quot;: &quot;GD&quot;,
            &quot;legal_name&quot;: &quot;Barasti&quot;,
            &quot;brand&quot;: &quot;Barasti&quot;
          },
          &quot;place&quot;: {
            &quot;address&quot;: &quot;Le Meridien Mina Seyahi Beach Resort &amp; Marina, Dubai Marina - Dubai - United Arab Emirates&quot;,
            &quot;latitude&quot;: &quot;25.092648&quot;,
            &quot;location&quot;: [
              &quot;Marina Bay&quot;,
              &quot;Dubai&quot;,
              &quot;Arab Emirate United&quot;
            ]
          }
        }
      }
    ],
    &quot;meta&quot;: {
      &quot;total&quot;: 1,
      &quot;cursor&quot;: {
        &quot;current&quot;: 1,
        &quot;prev&quot;: null,
        &quot;next&quot;: null,
        &quot;count&quot;: 25
      }
    }
  } 
  </code></pre>
  <p>See screenshot:</p>
  <p><img src="https://i.stack.imgur.com/RQidP.png" alt="" /></p>