Why my code is not scrolling flatlist in android emultor

Question

Why my code is not scrolling flat list in the android emulator as well as a normal real device but it does work well in iOS, I've been trying to fix this problem from past few hours but i can't able to find a working solution that states my mistake, this code is a basic reproduction of my original code, however i used this code to in a renderitem in a flatlist.

using latest version of react native import { Dimensions, FlatList, Image, StyleSheet, Text, View } from 'react-native' import React from 'react'

const { height, width } = Dimensions.get('window');

const App = (props: Props) => {

    const data = [
        { id: '1', title: 'Item 1' },
        { id: '2', title: 'Item 2' },
        { id: '3', title: 'Item 1' },
        { id: '243', title: 'Item 2' },
        { id: '14dff3', title: 'Item 1' },
        { id: '256436', title: 'Item 2' },
        { id: '2321', title: 'Item 1' },
        { id: '2324', title: 'Item 2' },
        { id: '143252324', title: 'Item 1' },
        { id: '3442', title: 'Item 2' },
        { id: '13423ere43', title: 'Item 1' },
        { id: '2453463452432', title: 'Item 1' },
        { id: '245242352353443', title: 'Item 2' },
        { id: '233534521', title: 'Item 1' },
        { id: '234524', title: 'Item 2' },
        { id: '143325224', title: 'Item 1' },
        { id: '3442342342', title: 'Item 2' },
        { id: '13e423423re43', title: 'Item 1' },
        { id: '24353454', title: 'Item 2' },
        { id: '14345345342432', title: 'Item 1' },
        { id: '24353453443', title: 'Item 2' },
        { id: '23435345321', title: 'Item 1' },
        { id: '234534534524', title: 'Item 2' },
        { id: '15345434324', title: 'Item 1' },
        { id: '342423542', title: 'Item 2' },
        { id: '134234234ere43', title: 'Item 1' },
        { id: '24355345242344', title: 'Item 2' },
        { id: '142345353432', title: 'Item 1' },
        { id: '245345343443', title: 'Item 2' }
    ];

    return (
        <View style={{ backgroundColor: 'gray', }}>
            <Image
                source={{ uri: 'https://www.southernliving.com/thmb/Rz-dYEhwq_82C5_Y9GLH2ZlEoYw=/1500x0/filters:no_upscale():max_bytes(150000):strip_icc()/gettyimages-837898820-1-4deae142d4d0403dbb6cb542bfc56934.jpg' }}
                style={styles.backgroundVideo}
            />
            <View style={{
                height: '50%',
                position: 'absolute',
                width: '98%',
                marginTop: 300,
                backgroundColor: 'black',
                borderRadius: 40,
            }}>
                <View style={styles.container}>
                    <FlatList
                        data={data}
                        contentContainerStyle={{ bottom: 80, marginTop: 45, padding: 12 }}
                        renderItem={({ item }) => (
                            <>
                                <Text style={styles.comment}>
                                    Write Code!
                                    Write Code!
                                    Write Code!
                                    Write Code!
                                    Write Code!
                                    Write Code!
                                    Write Code!
                                    Write Code!
                                    Write Code!
                                    Write Code!
                                </Text>
                            </>
                        )}
                        keyExtractor={(item) => item.id}
                    />
                </View>
            </View>
        </View>
    );
}

export default App;

const styles = StyleSheet.create({
    backgroundVideo: {
        height,
        width,
    },
    container: {
        backgroundColor: 'black',
        borderRadius: 40,
        height: '93%',
    },
    head: {
        color: 'white',
        fontWeight: 'bold',
        fontSize: 28,
        textAlign: 'center',
        marginTop: 15
    },
    commenterName: {
        color: 'white',
        fontWeight: 'bold',
        fontSize: 15,
        left: '15%'
    },
    commenterUsername: {
        color: 'gray',
        fontWeight: '500',
        fontSize: 12,
        top: '5%',
        right: '100%'
    },
    comment: {
        color: 'gray',
        fontWeight: '500',
        fontSize: 14,
        left: '5%',
        textAlign: 'left',
        width: '90%',
        padding: 6
    },
});

Answer 1

The main issue is my Flatlist is nested, I'm using flatlist inside flatlist so what I did is I used flashlist instead of flatlist and enabled nestedScrollEnabled={true} And it works fine!