How To Create Responsive Layouts In ReactNative

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.

There are few main properties provided by flexbox, so let’s get through them!
Flex describes how elements divide space between them. As mentioned above it’s limited to single numbers.

If all elements have flex: 1 they will have the same width.
In other cases they will split the sum of the flex among themselvesFlex direction — we can pick a row or a column (you can also set the reverse) to set your main axis along which your content will be placed. By default, flex-direction is set to a column instead of a row — which is caused by the nature of the screen on mobile devices.

2. Aspect Ratio

Another cool prop is aspect ratio (it’s available only in React Native) which helps keep proportions of your elements under control. If you know only one dimension of your element (width or height), it keeps the second dimension in relation to the one you already know.

3. Screen Dimensions

It is great when your designs are the same for both platforms, and all types of devices (mobile, tablets, ipads). However, sometimes we have to deal with different layouts for specific screen dimensions or device types.

By default React Native doesn’t provide properties which clearly answer which device or what screen size is. But there is a remedy for this.

4. Detect the Platform

Apart from screen size you can also change the layout depending on which platform app is launched. To achieve this we can use the Platform module.

5. Device Rotation

Many apps can work in portrait and landscape mode. If this is the case for your app you have to ensure that the layout doesn’t break when changing orientation. As you can expect sometimes the layout can change drastically when you flip the device.Your components may need different styling depending on the orientation. Unfortunately, by default rotation of the device does not trigger a rerender. That’s why it has to be handled manually. We already have the knowledge required to build our own and it’s quite easy!

If you need to support orientation change across the app, it’s a good idea to use HOC to inject orientation.const HOC = WrappedComponent => class extends PureComponent { constructor(props) { super(props); this.state = { orientation: ” }; } componentDidMount() { Dimensions.addEventListener(‘change’, this.getOrientation); } getOrientation = () => { if (Dimensions.get(‘window’).width Dimensions.get(‘window’).height) { this.setState({ orientation: ‘portrait’ }); } else { this.setState({ orientation: ‘landscape’ }); } }; render() { return; } };

That’s all! You can also pass getOrientation to onLayout prop exposed by View component. It is fired on every layout change, so it should be used carefully. The decision is yours!

If you want to take advantage of the orientation in your styles, remember that it should be inline styles. We already know how to trigger a rerender of the layout when the device is rotated, but the styles are loaded only once. That’s why styles which affect the layout on rotation should be placed inline.

As you might expect, a huge React Native community already provides packages which solve many of the issues mentioned here. You can check it here or here to name just a few.