react native - I have issue that my swiper does not show images

Question

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}}/>
            )
          } }
        />

question from:https://stackoverflow.com/questions/65879673/i-have-issue-that-my-swiper-does-not-show-images

Answer 1

• First try to keep your SwiperFlatList inside View Component & Style Should be flex:1.
• Double check what is your Data format & how you render inside Image.

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'}
  ];