Search code examples
react-nativeflexboxreact-native-scrollview

React Native: Why doesn't setting flexGrow on a <View> inside a <ScrollView> work?

In my React Native app I have the following code:

  <View style={{flex: 1}}>
    <View style={{backgroundColor: 'black', height: 50}}/>
    <ScrollView style={{borderWidth: 1, borderColor: 'red', flex: 1}}>
      <Text style={{
        borderWidth: 1,
        borderColor: 'blue',
        flexGrow: 1
      }}>aaa</Text>
      <Text style={{
        borderWidth: 1,
        borderColor: 'blue',
        flexGrow: 1
      }}>bbb</Text>
    </ScrollView>
  </View>

enter image description here

Note that I have flexGrow: 1 on the aaa and bbb <View>s, but they don't grow to fill the vertical space. If I swap the <ScrollView> for a <View>, the children do fill it. Why is this?

Solution

  • Take a look at the ScrollView docs here: https://facebook.github.io/react-native/docs/scrollview.html#contentcontainerstyle

    The key you're missing is specifying what the containers style should be. The maintainers make no assumption to what you expect, especially since it can be confusing depending on what your past experience is. You can definitely get what you want to work.

    Here's an example of it added to your code: https://snack.expo.io/SkeLDj4EH