Flex and Alignment in React Native

No, not that kind of flex!

Remember? In the web, flex changes the default main axis from horizontal to vertical.

Well, in React Native, the main axis is set to horizontal by default; so if you want to change it to vertical, you have to change flex itself.

I tried doing this with the trusty display property and the options of block or inline-block. I wasn't really surprised when it didn't work.

Fortunately, Hitesh's video covers this.

So, by default the flexDirection property for React Native is set to column. To change the layout from vertical to horizontal, you have to explicitly change this on whatever container you may be working with. In Hitesh's video, he creates three coloured boxes and lays them out horizontally by changing the flexDirection of the parent container to row. Obviously there are other options for the flexDirection property (for example, you could put row-reverse to still have them laid out horizontally but in reverse order).

I have to say, I am SUPER grateful to Hitesh for his videos, and to Hashnode for sponsoring the series!

Happy coding!