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

Question

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?

EDIT: I have changed scrollview to flatlist and still face the same problem, can you suggest what else to do?

EDIT 2: realised that the <Header /> and <Stories /> above the flatlist are not letting it scroll completely, that is the height that it is not scrolling is proportional to height of <Header /> and <Stories />

post.js

const Post = ({post}) => {
    
    return (
        <View  style={{flex:1}}>
            <Divider width = {0.5}/>
            <PostHeader post={post}/>
            <PostImage post={post} />
            <PostFooter post={post}/>
        </View>
    )
}


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',
        
    }

})

homescreen.js

const HomeScreen = () => {
    return (
        <SafeAreaView >
            <Header />
            <Stories />
            {/* <ScrollView>
                {
                    POSTS.map((post, index) => {
                        return (
                            <Post key={index} post={post} />
                        )
                    })
                }
            </ScrollView> */}

            
            <FlatList data={POSTS} renderItem={({item}) => <Post post={item} />} />
        </SafeAreaView>
    )
}

Answer 1

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,
},

}); 

Answer 2

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}}>
        <View style={{height: "90%"}}>
           <Flatlist
              data={POSTS}
              renderItem={renderItemHandler}
              keyExtractor={item => item.id}
           />
       </View>
      </SafeAreaView>
    )
}