DEV Community

Cover image for Guide to understand Flex-box in react-native (if you are a web developer)
Midha
Midha

Posted on

Guide to understand Flex-box in react-native (if you are a web developer)

If you are coming from web development background and your ultimate goal is to learn react-native now then this flex-box cheat sheet guide is surely for you.

cheatsheet-reactNative-flexbox

As a react developer, I got slightly confused working with flex-box in react-native, so I created this cheat sheet 👆

There are few differences I want to conclude:

  1. Flex-direction: row (by default in browser), Flex-direction: column (by default in react-native).
  2. By default 'div' doesn't have flex in browser, whereas in react native's 'View' flex-box is already applied.
  3. As you can see main points in cheat sheet, if you want to align things in main-axis then use justifyContent.
  4. If you want to align things in cross-axis then use alignItems.

That's all for now, I hope you have enjoyed this :)

Top comments (0)