React Native: Flex for ScrollView doesn't work

Question

I have a simple View which has two children, another View and a ScrollView. The ScrollView should be 5x higher than the View on the same level, using flexbox.

<View style={{ flex: 1}}>
    <View style={{flex: 1, backgroundColor: 'powderblue'}}>
      <Text>Add new stuff</Text>
      <Button title="Browse Gallery" onPress={ openGallery } />
    </View>
    <ScrollView style={{flex: 5, backgroundColor: 'skyblue'}}>
          <Text style={{ fontSize: 100}}>Scroll me plz</Text>
          <Text style={{ fontSize: 100}}>Scroll me plz</Text>
    </ScrollView>
  </View>

So I simply added flex:1 and flex:5 to the children Views, but the in the rendered view both of them fit exactly to half of the screen. It looks as if the two flex attributes are ignored...

Btw, using a second View instead of the ScrollView works just fine!

Any ideas how to achieve the 1:5 ratio with a ScrollView?

Salahi

Answer 1

ScrollView is a component which doesn't inherit the use of flex. What you want to do is wrap the ScrollView in a View which will create the flex ratio you desire.

  <View style={{flex: 1}}>
    <View style={{flex: 1, backgroundColor: 'powderblue'}}>
      <Text>Add new stuff</Text>
      <Button title="Browse Gallery" onPress={ openGallery } />
    </View>
    <View style={{flex: 5}}>
      <ScrollView style={{backgroundColor: 'skyblue'}}>
            <Text style={{ fontSize: 100}}>Scroll me plz</Text>
            <Text style={{ fontSize: 100}}>Scroll me plz</Text>
      </ScrollView>
    </View>
  </View>

Borchers

Answer 2

To achieve 1:5 screen ratio, having child component View and ScrollView with respect to parent View, you can code it in following manner:

<View style={{ flex: 1}}>
    <View style={{flex: 1/5, backgroundColor: 'powderblue'}}>
      <Text>Add new stuff</Text>
      <Button title="Browse Gallery" onPress={ openGallery } />
    </View>
    <ScrollView style={{flex: 4/5, backgroundColor: 'skyblue'}}>
          <Text style={{ fontSize: 100}}>Scroll me plz</Text>
          <Text style={{ fontSize: 100}}>Scroll me plz</Text>
          <Text style={{ fontSize: 100}}>Scroll me plz</Text>
    </ScrollView>
  </View>

Manaker

Works just as fine as the answer marked as correct :) – Salahi