Search code examples
react-nativeviewflexboxreact-native-stylesheet

Top view and Bottom view heights are fixed, middle view need to fit in remaining space

I have 3 views top view, middle view, bottom view. The top view and bottom view has it's components and they are fixed in height in a vertically aligned container view. Now, I need the middle view to be flexible in height, i.e., the height of middle view can be vary based on screen height, it needs to be fit in remaining space. Can you please help me to figure out this.

Solution

  • This might help

    <View style={{flex:1}}>

  <View> ... </View> <!-- Top View ->

  <View style={{flex:1}}> ... </View> <!-- Middle View ->

  <View> ... </View> <!-- Bottom View ->

</View>