how to fetch objects in array in react native using swiper flatlist

Question

___Here is My 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 >= 200 && response.status < 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 (
      <View style={styles.container}>
        <SwiperFlatList
        paginationStyle={styles.dotStyle}
          // autoplay
          //autoplayDelay={2}
          // autoplayLoop
          //index={2}
           showPagination
        >

                    <FlatList
          data={this.state.achhamall}
          keyExtractor= {(item) => {
            return item.id.toString();
          }}

          renderItem={(post) => {
         const item = post.item;
          return(
          <View style={[styles.child, {  }]}>
          <View
                      style={{
                        height: 30,
                        width: 30,
                        backgroundColor: 'red',
                        borderRadius: 15,
                        justifyContent: 'center',
                        alignItems: 'center',
                        top:-70,
                        right:10,
                      }}>
                      <Text style={{fontSize: 12, color: '#FFFFFF'}}>20%</Text>
                      <Text style={{fontSize: 10, color: '#FFFFFF'}}>OFF</Text>
                    </View>
                 <Image
                      style={{height:height/4, width:width/2, resizeMode: 'cover'}}
                      source={{uri: item.src}}
                    />
                     <View style={{ top:-70,left:10}}>
                    <Icon name="favorite" />
                    </View>
          </View>

       )
        }}/>

        </SwiperFlatList>
      </View>
    );
  }
}

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',
  },
});

my response in json to show in react native ___

"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"
        }
    ],

how to use Flatlist condition in swiperflatlist and fetch the image and make it swipeable...

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?

score 1 · Answer 1 · answered Jan 15 '20 at 14:43

There is some error in your code , while setting the image in state. In your response, image is coming as responseJson.product.image but you are using it as responseJson.image. Here is your code

 this.setState({
     achhamall : responseJson.images                   
  })

It should be like below

this.setState({
          achhamall : responseJson.product.images                   
 })

score 0 · Answer 2 · answered Jan 11 '20 at 07:20

0

achhamall : responseJson.product.images response is in products ? so add this ....

answered Jan 11 '20 at 07:20

Aoudesh Jaiswal

148
2
13

score 0 · Answer 3 · answered Jan 11 '20 at 08:58

  <View style={styles.container}>
          <SwiperFlatList
         autoplay
        autoplayDelay={2}
        autoplayLoop
        data={this.state.achhamall}
        renderItem={({item}) => // Standard Image
                       <View style={[styles.child, {  }]}>
          <View
                      style={{
                        height: 30,
                        width: 30,
                        backgroundColor: 'red',
                        borderRadius: 15,
                        justifyContent: 'center',
                        alignItems: 'center',
                        top:-70,
                        right:10,
                      }}>
                      <Text style={{fontSize: 12, color: '#FFFFFF'}}>20%</Text>
                      <Text style={{fontSize: 10, color: '#FFFFFF'}}>OFF</Text>
                    </View>
                 <Image
                      style={{height:height/4, width:width/2, resizeMode: 'cover'}}
                      source={{uri: item.src}}
                    />
                     <View style={{ top:-70,left:10}}>
                    <Icon name="favorite" />
                    </View>
                    </View>
                        }
        showPagination
      />
      </View>

u can use data as state in swiper flatlist and fetch the images

how to fetch objects in array in react native using swiper flatlist

3 Answers3