ScrollView with FlatList inside not working? - react-native

Question

This is the code I have for the ScrollView
<ScrollView contentContainerStyle={{ flexGrow: 1 }} scrollEnabled>
<View style={{ maxHeight: 280 }}>
<FlatList
style={{ backgroundColor: '#eee' }}
data={suppliers}
keyExtractor={supplier => supplier}
renderItem={({ item, index }) => {
const style = index % 2 === 0 ? { backgroundColor: '#fff' } : null;
return (
<TouchableOpacity
style={{
...style,
height: height / 14,
borderColor: '#333',
borderWidth: 0.5,
alignItems: 'center',
flexDirection: 'row',
justifyContent: 'space-between',
}}
>
<Text style={{ fontSize: 14 }}>{item}</Text>
<Feather name="chevron-right" size={21} />
</TouchableOpacity>
);
}}
/>
</View>
</ScrollView>
The content of the FlatList is dynamic meaning that the length of the supplier array can change at anytime so I have a maxHeight and want it to simply be a list you can scroll through if the content extends the maxHeight. I have tried messing around with a lot of different things but nothing seems to work. You can see the outcome here
I get a list that is not scrollable.

Answer 1

In your first line remove the contentContainerStyle with flex-grow
your code
<ScrollView contentContainerStyle={{ flexGrow: 1 }} scrollEnabled>
change to
<ScrollView contentContainerStyle={{ }} scrollEnabled>
if you need flex then wrap the components with another view tag
For example
<ScrollView scrollEnabled>
<View style={{flexGrow: 1}}>
<FlatList/>
</View>
</ScrollView>
It worked for me.