CODEWITHSUNDEEP
cssreact-nativelayoutflexbox
nikel
nikel

Reputation: 3564

ReactNative Layout Process & how flex impacts it?

I am trying to understand why the below layouts work differently.

Can someone explain how the internal layout process happen, in terms of rules? And why below examples behave differently. Except just saying that this is how it is.

Example1:

return (
<View style = {{borderWidth : 1, borderColor : 'red'}}>
    <View style = {{borderWidth : 1, borderColor : 'black'}}>
        <Text>TestText</Text>
    </View>
</View>
    )

This renders the red box around the black box around the Text. Which means that View resizes based on its content. inner view resizes to consider the text, outer view considers inner view(which already has considered inner text to determine its dimensions), hence everything is as expected.

Example2:

return (
<View style = {{borderWidth : 1, borderColor : 'red'}}>
    <View style = {{flex:1,borderWidth : 1, borderColor : 'black'}}>
        <Text>TestText</Text>
    </View>
</View>
    )

The text now comes outside both the Views. The inner view still rests inside the outer view though.

Now i tried a little different variation:

Example3:

    return <View style = {{borderWidth:1, borderColor:'red', height:10}}>
        <View style = {{flex:1, borderWidth:1, borderColor:'black'}}>
        <Text>HelloWorld</Text>
        </View>
    </View>

This one renders a little better, i.e the text atleast seems to start inside both the views. But still not as expected.

Questions i have:

1) in case #2 above, Why does the text flow outside both the views? Whereas inner View still stays inside outer?

Can some content ever go beyond the bounds of its parent View? Shouldn't the parent View expand to contain it, as long as we haven't provided specific dimensions to it?

2)In case #3, things behave a little bit as expected..Text is inside the views somewhat, but still overflows..

3)How does this rendering happen in ReactNative internally & how does it determine the effective heights of these views above?

Upvotes: 0

Views: 34

Answers (2)

Wilson
Wilson

Reputation: 9136

Example with flex

flex: 1, obligates child to follow parent's height, "Black view" will fill all the space available of the "Red view", which is height:60.

enter image description here

<View style={{   borderColor: "red",     height: 60 }}>
  <View style={{ borderColor: "black", flex: 1 }}>
    <Text>HelloWorld</Text>
    ...
  </View>
</View>

Example without flex:1

Here without flex, "Black view" will occupy all space of its children, it won't matter height of the parent ("Red view").

enter image description here

<View style={{   borderColor: "red",  height: 60 }}>
  <View style={{ borderColor: "black"  }}>
    <Text>HelloWorld</Text>
    ...
  </View>
</View>

Upvotes: 1

Gaurav Roy
Gaurav Roy

Reputation: 12215

The thing is in simple terms the outline misbehaves in case of 2nd one , i.e :

<View style = {{borderWidth : 1, borderColor : 'red'}}>
    <View style = {{flex:1,borderWidth : 1, borderColor : 'black'}}>
        <Text>TestText</Text>
    </View>
</View>

Is because the parent View component doesnt have a flex property so it doesnt take up whole the space and since you have added flex:1 in the child View it tries to take up as whole space as its alloted , hence black border Dominates and TestText is below it.

But if you provide flex:1 , to parent View you will see the same structure as it was with no flex given at all. Try :

<View style = {{flex:1,borderWidth : 1, borderColor : 'red'}}>
    <View style = {{flex:1,borderWidth : 1, borderColor : 'black'}}>
        <Text>TestText</Text>
    </View>
</View>

Hope it helps . feel free for doubts

Upvotes: 0

Related Questions