ScrollView with FlatList inside not working?

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.