title: how to fetch objects in array in react native using swiper flatlist
body: <p>___Here is My Code____</p>
  
  <pre><code>import React, { PureComponent } from 'react';
  import { Text, Dimensions, Image, StyleSheet, View ,FlatList} from 'react-native';
  
  import SwiperFlatList from 'react-native-swiper-flatlist';
  import { Icon } from 'react-native-elements';
  const URI = 'some Url';
  
  export default class ProductDetailsSwiper extends PureComponent {
      constructor(props) {
      super(props);
          //this.params = this.props.navigation.state.params;
  
      this.state = {
        achhamall: []
      };
    }
    componentDidMount() {
      this.fetchData();
    }
  
   async fetchData() {
  //let AccessToken = this.params.AccessToken;
      try {
      let response = await fetch(URI ,{
                                method: 'Post',
                                headers: {
                                  'Accept': 'application/json',
                                  'Content-Type': 'application/x-www-form-urlencoded', 
                                },
  
                                   body: 'product_id=83',
  
                              });
           let responseJson = await response.json();
            if (response.status &gt;= 200 &amp;&amp; response.status &lt; 300) {
  
                       this.setState({
                        achhamall : responseJson.images                   
                       })
            console.log('data fetch ' + responseJson.products);
                                 let images = responseJson.images;
                                  console.log('data' + images);
            }else{
               console.log('responseJson');
            }
          } catch(error) {
             console.log("error response: " + error);
            }
     }
  
    render() {
      return (
        &lt;View style={styles.container}&gt;
          &lt;SwiperFlatList
          paginationStyle={styles.dotStyle}
            // autoplay
            //autoplayDelay={2}
            // autoplayLoop
            //index={2}
             showPagination
          &gt;
  
                      &lt;FlatList
            data={this.state.achhamall}
            keyExtractor= {(item) =&gt; {
              return item.id.toString();
            }}
  
            renderItem={(post) =&gt; {
           const item = post.item;
            return(
            &lt;View style={[styles.child, {  }]}&gt;
            &lt;View
                        style={{
                          height: 30,
                          width: 30,
                          backgroundColor: 'red',
                          borderRadius: 15,
                          justifyContent: 'center',
                          alignItems: 'center',
                          top:-70,
                          right:10,
                        }}&gt;
                        &lt;Text style={{fontSize: 12, color: '#FFFFFF'}}&gt;20%&lt;/Text&gt;
                        &lt;Text style={{fontSize: 10, color: '#FFFFFF'}}&gt;OFF&lt;/Text&gt;
                      &lt;/View&gt;
                   &lt;Image
                        style={{height:height/4, width:width/2, resizeMode: 'cover'}}
                        source={{uri: item.src}}
                      /&gt;
                       &lt;View style={{ top:-70,left:10}}&gt;
                      &lt;Icon name="favorite" /&gt;
                      &lt;/View&gt;
            &lt;/View&gt;
  
         )
          }}/&gt;
  
          &lt;/SwiperFlatList&gt;
        &lt;/View&gt;
      );
    }
  }
  
  export const { width, height } = Dimensions.get('window');
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent:"center",
      alignItems:"center",
      backgroundColor: 'white',
    },
    dotStyle:{
  // width:0,
  // height:height/4,
  color:"green",
  //backgroundColor:"red",
  top:180
  
    },
    child: {
     // height: height * 0.5,
      width,
      justifyContent:"center",
      alignItems:"center",
      flexDirection:"row"
    },
    text: {
     // fontSize: width * 0.5,
      textAlign: 'center',
    },
  });
  </code></pre>
  
  <p>my response in json to show in react native ___</p>
  
  <pre><code>"product": {
      "id_product": "83",
      "quantity": "0",
      "allow_out_of_stock": 0,
      "name": "Mini USB Cable - Android",
      "price": "₹109.00",
      "discount_price": "",
      "discount_percentage": "",
      "minimal_quantity": "1",
      "images": [
          {
              "src": "https://www.achhamall.com/staging-achhamall.com/image/cache/catalog/usbcable/DSC_8902-200x200.jpg"
          },
          {
              "src": "https://www.achhamall.com/staging-achhamall.com/image/cache/catalog/microusb/MiniUSBGreeAThumbnail-200x200.jpg"
          },
          {
              "src": "https://www.achhamall.com/staging-achhamall.com/image/cache/catalog/microusb/DSC_8904-200x200.jpg"
          },
          {
              "src": "https://www.achhamall.com/staging-achhamall.com/image/cache/catalog/microusb/DSC_8903-200x200.jpg"
          },
          {
              "src": "https://www.achhamall.com/staging-achhamall.com/image/cache/catalog/microusb/DSC_8902-200x200.png"
          }
      ],
  </code></pre>
  
  <p>how to use Flatlist condition in swiperflatlist and fetch the image and make it swipeable...</p>
  
  <p>and how to asign key in and in swiperflatlist to fetch coz while searching many ways i found but while implementing it shows the error
  Invariant Violation: Tried to get frame for out of range index NaN
  so how to fix this?</p>