ScrollView disappears along with content when adding flex:1 to contentContainerStyle

Question

When I add a fixed height style it works and the content is there but when I set it to flex:1 (the correct way) the scrollview disappears along with the content.

My code:

<ScrollView contentContainerStyle={{flex:1}} showsVerticalScrollIndicator={false}>
          <View style={{padding: 5}}>
            <Text>search</Text>
          </View>
          <View style={{padding: 5}}>
            <Text>New Matches</Text>
            <ScrollView contentContainerStyle={{flex:1}} horizontal={true} showsHorizontalScrollIndicator={false}>
              <View style={{padding: 10}}>
                <Thumbnail medium circle source={require('../assets/placeholders/profile1.jpg')}/>
                <Text>Christian</Text>
              </View>
              <Text>works</Text>
              <Text>works</Text>
              <Text>works</Text>
              <Text>works</Text>
              <Text>works</Text>
            </ScrollView> 

Also, as you can see I have two scrollviews. I am referring to the outermost (the vertical scrollview).

Answer 1

Wrap your outer ScrollView to a View component with flex:1 style.

<View style={{flex: 1}>
  <ScrollView contentContainerStyle={{flex:1}} showsVerticalScrollIndicator={false}>
...
  </ScrollView>
</View>