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!

score 0 · Answer 1 · answered Apr 08 '22 at 08:35

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 08 '22 at 08:35

Nensi Kasundra

1,980
6
21
34

Hmm... I followed your suggestions but scroll still isn't working. Could there be some other factor causing this? – Rachel Who Apr 10 '22 at 00:56
use instead of and check it – Nensi Kasundra Apr 12 '22 at 05:42
1

That did the trick along with setting flex=1 in the view container! Thank you! – Rachel Who Apr 13 '22 at 15:49

Flatlist not scrolling react native

1 Answers1