CODEWITHSUNDEEP
react-nativeflexboxreact-native-scrollview
gkeenley
gkeenley

Reputation: 7388

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?

Upvotes: 0

Views: 1177

Answers (1)

turnrye
turnrye

Reputation: 36

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

Upvotes: 1

Related Questions