I have some view in my app,
first and last have fixed dimension, but the middle view I would fill the remaining space.
How can I do it?
let probableView = (!someVariable) ? null : (<View style={{ height: "10%" }}/>);
...
<View
style={{
flex: 1,
flexDirection: "column",
justifyContent: "space-around",
height: "100%",
width: "100%",
}}
>
<View style={{ height: "10%" }}/>
{ probableView }
<View/> <------------------ How can I fill automatically the remain space?
<View style={{ height: "10%" }}/>
</View>
The answer is to add flex = 1. This will fill the remaining space.
<View style={ flex: 1 }}>
<View style={{ height: "10%" }}/>
{ probableView }
<View style={{flex: 1}}/> // Added here
<View style={{ height: "10%" }}/>
</View>