for some reason my flatlist is not scrolling and I'm not sure why. Would love any tips! Here is the code for the flatlist:
return (
<Layout>
<View style={styles.header}>
<Text size="h1">Explore</Text>
</View>
<FlatList contentContainerStyle={styles.cards} data={events} renderItem={({item}) =>
<EventCard event={item} keyExtractor={event => event.id} click={() => {
navigation.navigate("FullCard", {
event: item
});
}}/>
} />
</Layout>
);
}
const styles = StyleSheet.create({
header: {
padding: 10,
display: "flex",
marginBottom: 10
},
cards: {
alignItems: "center",
height: Dimensions.get('window').height/1.2
},
});
Here is the main page where the flatlist gets imported:
export default function ({ navigation }) {
return (
<NavigationContainer independent={true}>
<Stack.Navigator initialRouteName="Explore">
<Stack.Screen name="Explore" options={{headerShown: false}}>
{props => <Explore {...props}/>}
</Stack.Screen>
<Stack.Screen name="FullCard" options={{headerShown: false}}>
{props => <FullCard {...props}/>}
</Stack.Screen>
</Stack.Navigator>
</NavigationContainer>
);
}
Thank you so much!
Directly give you component in
Stack.Screen
andprops
will automatically access your screen.FlatList
contentContainerStyle
style should be as below