React Native flex-box concepts

#react #reactnative #flex #mobile

By default every view in react native uses flexbox.
BY default every view organizes its children in a column.
if we add height and width in the parent view, the child element will align themself along the cross axis by stretching.
eg: if the main axis is row, then all the child element will take the height of the parent and the width has no impact.
So inorder to give width to the child elements, we can use flex property.flex property works along main axis.
The default value of alignItems is 'stretch'.
flexDirection - values: row, column, row-reverse, column-reverse.
justifyContent(to organize elements along main axis.) - values: center, flex-end, flex-start, space-between, space-around
alignItems(to organize elements along cross axis.)
For child elements.
flex - flex will define how your items are going to “fill” over the available space along your main axis. Space will be divided according to each element's flex property.