Flatlist not scrolling react native

Question

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!

Nensi Kardani · Accepted Answer · 2022-04-08 08:35:18Z

0

Directly give you component in Stack.Screen and props will automatically access your screen.

export default function ({ navigation }) {
    return (
            <NavigationContainer independent={true}>
                <Stack.Navigator initialRouteName="Explore">
                    <Stack.Screen name="Explore" options={{headerShown: false}} component={Explore}/>
                    <Stack.Screen name="FullCard" options={{headerShown: false}} component={FullCard}/>
                </Stack.Navigator>
            </NavigationContainer>
        );
}

FlatList contentContainerStyle style should be as below

const styles = StyleSheet.create({
  header: {
    padding: 10,
    display: "flex",
    marginBottom: 10
  },
  cards: {
      flex:1,
      alignItems: "center",
  },
});

answered Apr 8, 2022 at 8:35

Nensi Kardani

2,4207 gold badges25 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Rachel Who Over a year ago

Hmm... I followed your suggestions but scroll still isn't working. Could there be some other factor causing this?

Nensi Kardani Over a year ago

use <View> instead of <Layout> and check it

Rachel Who Over a year ago

That did the trick along with setting flex=1 in the view container! Thank you!

Collectives™ on Stack Overflow

Flatlist not scrolling react native

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related