FaltList scroll does not work

[BKazimy]

Description

I used a FlatList and it does not work

This is my code snipet of implementing the FlatList

  return ( 
       <View style={{ flex: 1 }}>
           <FlatList 
               data={Entries} 
               keyExtractor={(item) => item.id} 
               renderItem={renderCategoryItem}
               numColumns={1}
               contentContainerStyle={{paddingBottom: 10}}
               style={styles.flatlist}
               scrollEnabled={true}
           />
       </View>
   );
}

export default AllQuote;

const styles = StyleSheet.create({
   flatlist: {
       flex: 1,
       marginVertical: 8,
   },
});

And this is the component Im using:

return (
        <View style={styles.gridItem}>
            <Pressable 
                android_ripple={{color: colors}}
                style={({ pressed }) => [
                    styles.button,
                    pressed ? styles.buttonPress : null,
                ]}  
                onPress={onPress}
            >
                <View style={styles.innerContainer}>
                    <Text style={styles.title}>{title}</Text>
                    {subtitle && <Text style={styles.authorText}> -{subtitle}</Text>}
                </View>
            </Pressable>
        </View>
    );
}

export default CompButton;

const styles = StyleSheet.create({
    gridItem: {
        flex: 1,
        margin: 16,
        marginVertical: 8,
        borderRadius: 8,
        elevation: 4,
        backgroundColor: 'white',
        shadowColor: 'black',
        shadowOpacity: 0.25,
        shadowOffset: { width: 0, height: 2},
        shadowRadius: 8,
        overflow: Platform.OS === 'android' ? 'hidden' : 'visible',
    },

    button: {
        flex: 1,
        shadowColor: 'black',
        shadowOpacity: 0.25,
        shadowOffset: { width: 0, height: 2},
        shadowRadius: 8,
        overflow: Platform.OS === 'android' ? 'hidden' : 'visible',
    },

    buttonPress: {
        opacity: .75,
    },

    innerContainer: {
        flex: 1,
        padding: 16,
        borderRadius: 8,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: colors.darkOliveGreen,
    },

    title: {
        fontWeight: 'bold',
        fontSize: 18,
        color: colors.khaki,
    },

    authorText: {
        fontSize: 20,
        color: colors.darkKhaki,
        fontStyle: 'italic',
    },
})

Expected behavior

It shoul scroll without any problem, but it does not.
it stayes as if its a static element.

Steps to reproduce

this is the link to the repository

BTW im using web for development since I cant use my phone for network AND testing device.

React Native Version

0.76.3

Output of npx react-native info

⚠️ react-native depends on @react-native-community/cli for cli commands. To fix update your package.json to include:


  "devDependencies": {
    "@react-native-community/cli": "latest",
  }

Screenshots and Videos

No response

[react-native-bot]

Tip

Newer version available: You are on a supported minor version, but it looks like there's a newer patch available - 0.76.5. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

[react-native-bot]

Tip

Newer version available: You are on a supported minor version, but it looks like there's a newer patch available - undefined. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

[ralph1233]

I tested it on Android, and it is scrolling