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>

use Flex:1 or add height in % – Naveed Khan Oct 08 '19 at 10:36 — Naveed Khan, Oct 08 '19 at 10:36

score 2 · Accepted Answer · answered Oct 08 '19 at 10:11

2

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>

answered Oct 08 '19 at 10:11

Ponleu

1,492
12
27

score 0 · Answer 2 · answered Oct 08 '19 at 11:06

0

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

answered Oct 08 '19 at 11:06

M.Hassam Yahya

382
2
7

React-Native fill space

2 Answers2