Last Image is being cropped, when using ScrollView in react-native-CodePudding

I am trying to build something like instagram posts, that is continuous images that can be scrolled. But the last image is being cropped, that is only the upper half of it is being visible, there are several posts, regarding the same, but those didnt help, (contentContainerStyle={{flexGrow: 1,}}, adding height to a invisible view). Can someone please point out what is going wrong?

const Post = () => {
    
    return (
        
        
        <ScrollView
        showsVerticalScrollIndicator={false}
        >
            {
                POSTS.map((post, index) => {
                    return (
                        <View key={index} >
                        <Divider width = {0.5}/>
                        <PostHeader post={post}/>
                        <PostImage post={post} />
                        
                        </View>
                    )
                })
            }
        </ScrollView>
         
        
    )
}




const PostImage = ({post}) => {
    return (
        <View style={styles.postContainer}>
            
            <Image style={styles.image} source={{uri: post.post_url}}></Image>
        </View>
        
        
        
    )
}

const styles = StyleSheet.create({
    container: {
        

    },
    dp: {
        width: 35,
        height: 35,
        margin:5,
        borderRadius: 20,
        
        
        borderWidth : 1,
        borderColor : '#ff8501'
    },
    postContainer: {
        width: '100%',
        height: 400,
    },
    image: {
        height: '100%',
        resizeMode: 'cover',
        
    }

})

CodePudding user response：

If you want to render repetitive view so why you are not using Faltlist instead of Scrollview. For repetitive view react native provide one component which is called Flatlist and pass you array data in render item it will give you better performance as well.

<SafeAreaView style={styles.container}>
  <FlatList
    data={DATA}
    renderItem={renderItem}
    keyExtractor={item => item.id}
  />
</SafeAreaView>

 const renderItem = ({ item }) => (
   
  <Divider width = {0.5}/>
  <PostHeader post={item}/>
  <PostImage post={item} />
  </View>
 );

const styles = StyleSheet.create({
 container: {
  flex: 1,
   
},
 item: {
  backgroundColor: '#f9c2ff',
  padding: 20,
  marginVertical: 8,
  marginHorizontal: 16,
},

});

CodePudding user response：

According to React Native docs FlatList is the Component you should use:

ScrollView renders all its react child components at once, but this has a performance downside.

Imagine you have a very long list of items you want to display, maybe several screens worth of content. Creating JS components and native views for everything all at once, much of which may not even be shown, will contribute to slow rendering and increased memory usage.

This is where FlatList comes into play. FlatList renders items lazily, when they are about to appear, and removes items that scroll way off screen to save memory and processing time.

FlatList is also handy if you want to render separators between your items, multiple columns, infinite scroll loading, or any number of other features it supports out of the box.

const Post = () => {
   renderItemHandler = ({post, index}) => (
            <View key={index} >
                 <Divider width={0.5}/>
                 <PostHeader post={post}/>
                 <PostImage post={post} />        
            </View>
   )

    return (
      <SafeAreaView style={{flex: 1}}>
        <Flatlist
           data={POSTS}
           renderItem={renderItemHandler}
           keyExtractor={item => item.id}
        />
      </SafeAreaView>
    )
}