CODEWITHSUNDEEP
reactjsreact-nativeheightflexbox
Sood
Sood

Reputation: 121

React Native: Height vs flex

While setting height of multiple components in a view, is there any difference between setting the height in terms of flex or height?

For eg,

1) <View>
       <View style={{flex:1}}>
       </View>
       <View style={{flex:3}}>
       </View>
   </View

2) var windowSize = Dimensions.get('window');
   <View>
       <View style={{height:windowSize.height/4}}>
       </View>
       <View style={{height:windowSize.height*3/4}}>
       </View>
   </View>

Upvotes: 1

Views: 1365

Answers (2)

A-Man
A-Man

Reputation: 505

Yes, when you rotate a device flex is responsive where as window isn't.

For example if the device dimension is 1280 x 720, it would result in the following:

Flex: portrait mode height = 1280. Landscape mode height = 720

Window: portrait mode height = 1280. Landscape mode height = 1280

Window retrieves your dimensions once when the component mounts. Yes you can manually add detectors for window when a screen rotates, but i don't see why you want to go through that much effort when flex is short and simple.

Upvotes: 4

agenthunt
agenthunt

Reputation: 8678

Yes. For flex the size reference is its parent views layout size, whereas if you use window dimensions , it takes the whole window size as the reference. Try setting some height and width in 1) and see.

Upvotes: 1

Related Questions