I am making an application, which brings wordpress data, more specifically I export post from a news page.

When I bring the list of posts, everything is fine, but when I put the ScrollView on it so that the screen can scroll. the screen returns to the original position.

I do not know if I explain myself well, but when I try to slide the screen down, the screen returns up

This is my code

...   
 {({loading, error, data}) => {
                    if (loading){
                        return( 
                            <View style={styles.container}>
                                <Text>loading...</Text>
                            </View>
                        )
                    }
                    
                    console.log(data);
                    return (
                        <View style={styles.container}>
      
                        <ScrollView>
                            {data.posts.edges.map((post, key) => {
                                return(
                                    <View style={styles.vcontainer} key={key}>                                     
                                        <TouchableOpacity onPress={() => {
                                            navigation.navigate('Post', {id: post.node.id});
                                        }}>
                                        <Image style={styles.postimg} source={require('../../img/imgnotfound.jpeg')} resizeMode = 'cover'/> 
                                            <Text style={styles.title}>{post.node.title}</Text>
                                        </TouchableOpacity>
                                    </View>
                                )
                            }
                            )}
                        </ScrollView>
                        </View>
                    )
                }}
            </Query>
...

this is a short video of my case: https://drive.google.com/file/d/1oc0yYTbhQkz0lrRgNon_vNrUM1U8lZ3W/view?usp=sharing

my styles code:

const styles = StyleSheet.create({
    container:
    {
        flex: 1,
        padding:20
    },
    postimg:
    {
        width: '100%',
        height: '20%',
        borderRadius: 20,
        marginBottom: '1%'
    },
    titulo:
    {
        fontSize: 18,
        fontWeight: 'bold',
        marginBottom: '1%',
    }
})