CODEWITHSUNDEEP
javascriptreactjsreact-native
Rey
Rey

Reputation: 650

Why is default view width is 100% in react-native? and why there is no default width when using alignItems?

I don't have problem layouting in react-native right now, just want to know the reason of the default width concept

This script below is almost the same

<View
   style = {{
      flex: 1
   }}
>
   //The view below has default width "100%"
   <View
      style = {{
          backgroundColor: "red",
          height: 60
      }}
   />
</View>

<View
   style = {{
      alignItems: "flex-start", //Same render from left, using alignItems makes inside content having no default width 
      flex: 1
   }}
>
   //The view below has no width
   <View
      style = {{
          backgroundColor: "red",
          height: 60
      }}
   />
</View>

Should it have the same width behavior?

Upvotes: 0

Views: 291

Answers (1)

Medet Tleukabiluly
Medet Tleukabiluly

Reputation: 11930

View as analogy if div in html

  • It's display=block by default
  • display=block is width=100% by default

  • When you use alignItems, it's not display=block anymore, it's display=flex, hence width is not 100%

  • To make width=100% with alignItems, you have to use alignItems='stretch'. Or give flex=1 to child

Although View doesn't have display=block property, it's just default behavior

So problem is not in react-native, problem is in your understandings of flexbox

Upvotes: 1

Related Questions