How to create responsive layouts in React Native

Native Apps developers always put a lot of effort into making beautiful apps with a rich UI and which are stable on every supported device. For iOS, this means just a few devices. For Android it could be over a dozen. When you code an app with React Native you can add up these numbers and then multiply it by two, since every device can be rotated. In this short article I’ll try to show you a few tools and tricks which can help you deal with the huge range of devices without going crazy!

1. First of all, FLEXBOX

Components can control layout with a flexbox algorithm. It’s created to keep the proportions and consistency of the layout on different screen sizes.

Flexbox works very similar to CSS on the Web with just a few exceptions which are really easy to learn. When flex prop is a positive number, then components become flexible and will adjust to the screen respective to its flex value. That means that flex equates to flexGrow: [number], flexShrink: 1, flexBasis: 0.

When flex: 0 — it’s sized accordingly to the height and width and is inflexible.
If flex is a negative number it also uses height and width but if there is not enough space it will shrink to its minHeight and minWidth.