CODEWITHSUNDEEP
react-nativereact-native-scrollview
user3452568
user3452568

Reputation: 283

Scrollview and child with flex: 1

Is it possible to have a layout which is wrapped with ScrollView:

<ScrollView>
  <View>dynamic height</View>
  <View>flex with minHeight</View>
  <View>static height</View>
</ScrollView>

and meets below prerequisites:

Height of the first View is dynamic (depends on text length). Height of the third View is static (always three buttons inside). Rest of the screen should be filled with View with map, but the minimal height is set to 250.

Now the tricky part: if there is a lot of text in first View, so that map doesn't fit, a scroll should appear. I couldn't achieve that. I was trying to give the map View flex: 1 and minHeight: 250, but it's not rendered at all.

Solution

Ok, I've found a way to fix it. In first render, I get screen height (Dimensions) and height of first and third view (onLayout). Then, I calculate the height of second view (screenHeight - view1 - view3 - naviagtionHeight) and forceUpdate() to re-render it.

enter image description here

Upvotes: 11

Views: 4338

Answers (1)

gentlee
gentlee

Reputation: 3717

Add contentContainerStyle={{flexGrow: 1}} prop to ScrollView and its children's flex:1 would work. So you don't need to calculate it manually.

Upvotes: 27

Related Questions