Issue with images styling inside a FlatList - React Native

Question

I'm trying to design an application screen (I used React Navigation) where several images are displayed vertically inside a FlatList. Each image takes up around 90% of the screen, is centered and has some border-radius, to see the other images, the user has to scroll down.

All these things I was able to do myself, the only problem is, when I scroll down the first image, there is a huge empty gap at the top before showing image 2, and when I scroll down again to see image 3, the bottom bit of image 2 is still showing in the upper part of the screen, separated by another huge gap and the bottom of image 3 is cut out of the screen.

What I've been trying to do is to show exactly one full image at a time, and I don't know whether there's something wrong with the scrolling itself, or the styling I applied to the components.

Here's the code:

import {View, FlatList, Image, Dimensions} from 'react-native';
import {pictures} from './pictures.js';

const ImageScreen = () => { 

  const deviceWidth = Dimensions.get('window').width;
  const deviceHeight = Dimensions.get('screen').height;

  function renderImages(pictures){
    return(
      <View style={{ width: deviceWidth, height: deviceHeight, alignItems:'center'}}>

      <Image source={{uri: pictures.item.imageId}} 
      style={{height:'90%',width:'90%', borderRadius:22 }}/> 

      </View>
    );}

return(

    <FlatList data={pictures} keyExtractor={(item)=> item.id} renderItem={renderImages}
    pagingEnabled={true} />    
  
);
};

export default SightOverview;

score 1 · Answer 1 · answered Nov 07 '22 at 14:32

please find below code to display list:

    import * as React from 'react';
    import { View, FlatList, Image, Dimensions } from 'react-native';
    
    const App = () => {
      const pictures = [{
        imageId: 'https://picsum.photos/id/1/200/300'
      }]
      const deviceWidth = Dimensions.get('window').width;
      const deviceHeight = Dimensions.get('screen').height;
    
      function renderImages({ item }) {
        console.log(item)
        return (
          <View style={{ flex: 1, width: deviceWidth, height: deviceHeight, alignItems: 'center' }}>
            <Image source={{ uri: item.imageId }}
              style={{ width: deviceWidth * 0.8, height: deviceHeight * 0.5, borderRadius: 22 }} />
    
          </View>
        );
      }
    
      return (
        <View style={{ flex: 1 }}>
          <FlatList data={pictures} keyExtractor={(item) => item.id} renderItem={renderImages}
            pagingEnabled={true} />
        </View>
      );
    };

export default App;

Issue with images styling inside a FlatList - React Native

1 Answers1