Flex and Alignment in React Native

Hey everyone! So, I just finished Hitesh's next video.

It's number 6 in the series, and it's all about styling. The styling is quite basic, but that's fine because we're still getting used to it, right? The syntax for styling in React and React Native is a bit different than CSS.

The main thing for me was the reminder about two positioning properties: alignItems (align-items in pure CSS) and justifyContent (justify-content).

There are two reasons why this is important:

UPDATE: By watching Hitesh's next videos, I realised that my original understanding was flawed so I've corrected this.

• Unlike the web or pure or 'old school' web development, React Native lays elements out vertically, but using the flex property: by default React Native displays flex (which changes the traditional vertical layout to horizontal), but has the flexDirection property set to 'column'; this means that by default the layout is still vertical, but the main axis is different.

• Neither of the two properties is specifically LTR or TTB, but depends on which is the main axis

Now, what on earth did that all mean?!

Well, by default, the web does TTB layout and React Native does flex layout. So far, so good.

So in the web, the main axis is vertical, and the cross-axis, as it's called, is horizontal. In React Native, it's the other way round.

So, when we do styling in React Native, it's really helpful to remember that alignItems will position the element(s) horizontally and justifyContent will position the element(s) vertically.

NB: Of course, that last paragraph is what happens by default. If we choose to change the layout of a particular area, it would flip; but because React Native has display flex set by default, we don't change display to block, rather we use the flexDirection property and set it to 'row' instead of the default 'column'.

I hope this all makes sense and may be of some help.

Happy coding!