react-nativereact-native-flatlistreact-native-swiper

I have issue that my swiper does not show images


I am using react-native-swiper-flatlist.Swiper and dots from swiper are there but images are not showing. I am pretty new to react-native. This is my code:

<SwiperFlatList
          autoplay
          autoplayDelay={2}
          autoplayLoop
          index={2}
          showPagination
          data={img}
          renderItem={({ item }) =>{
            return(
              <Image style={{width, height: 200, backgroundColor:"#f0ffff" }} source={{uri:item.uri}}/>
            )
          } }
        />

Solution

  • Otherwise Please Share Full Source Code.

    Your image data is not from the web, this is local data so use this code :

    <Image style={{width, height: 300, backgroundColor:"#f0ffff",flex: 1 }} source={item.uri}/>
    

    instead of

    <Image style={{width, height: 300, backgroundColor:"#f0ffff",flex: 1 }} source={{uri:item.uri}}/>
    

    also change data formate :

    const img=[
        {uri:'../../assets/image.png', key: '1'},
        {uri:'../../assets/image.png', key: '2'},
        {uri:'../../assets/image.png', key: '3'}
      ];
    

    to

    const img=[
        {uri:require('../../assets/image.png'), key: '1'},
        {uri:require('../../assets/image.png'), key: '2'},
        {uri:require('../../assets/image.png'), key: '3'}
      ];