0

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}}/>
            )
          } }
        />
Raj Bhagat
  • 81
  • 5
  • what is width and is your data img is correct? check [this](https://snack.expo.io/@avhishekydv/smart-fudge) Its working – Abhi Jan 25 '21 at 06:11
  • Issue seems to be with the source image image you are using. Check with smaller dimension first maybe 100*100. – gourav.singhal Jan 25 '21 at 06:20
  • here width is the width of the screen which i get from const { width } = Dimensions.get('window'); – Raj Bhagat Jan 25 '21 at 06:22
  • i have checked with smaller dimensions it is still not showing – Raj Bhagat Jan 25 '21 at 06:27
  • Can you please also specify how data would be provided to the swiper list I mean to say can you provide the data array format you are specifying to the swiper list with an example of data with actual values? – Jignesh Mayani Jan 25 '21 at 07:33

1 Answers1

0
  • 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'}
  ];
Rashed
  • 231
  • 2
  • 7
  • https://github.com/raj-bhagat/stackoverflow/blob/main/HomeScreen.js This is the link to the code – Raj Bhagat Jan 28 '21 at 05:12
  • Your image data is not from the web, this is local data so use this code : instead of – Rashed Jan 28 '21 at 06:12
  • 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'} ]; – Rashed Jan 28 '21 at 06:16
  • Thank you the image is loaded now i just need to align it. – Raj Bhagat Jan 29 '21 at 04:18
  • Show me a ScreenShot & What align You want? (Horizontal or Vertical) – Rashed Jan 31 '21 at 07:51