CODEWITHSUNDEEP
react-nativereact-native-flexbox
Vito Lipari
Vito Lipari

Reputation: 869

React-Native fill space

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>

Upvotes: 1

Views: 2085

Answers (2)

M.Hassam Yahya
M.Hassam Yahya

Reputation: 442

I would recommend you to use 'flex' in each View tag that are inside the main View tag, And give main View a flex:1 this would help you adjust the size and location of each View tag

Upvotes: 0

Ponleu
Ponleu

Reputation: 1618

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>

Upvotes: 3

Related Questions