React-Native fill space

Question

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>

Answer 1

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>