Testing your React Native app looks good in every screen resolution

tl;dr;

I built a React Native component that allows you to wrap your iPhone application’s view, and test it in all kinds of resolutions using an iPad simulator instead of restarting the iPhone or Android simulator each time.

Rationale

When a mobile application doesn’t look good in different screen sizes, it’s usually either a problem with the font size, or with how you are building your screen’s layout.

Fonts in React Native, work like in any other development platform, you will have to define a font size for different screen sizes if you want to make sure content will fit and will be readable.

Defining layouts in React Native is easy thanks to it’s simplified implementation of flex box. It allows for you to style your application in a much more declarative way than other more typical approaches.

Just like with fonts, even when flex box is convenient for building layouts, making sure it’s going to look good is still a pretty manual process. You have to see for yourself that the text and controls adjust properly on different screen sizes.

Normally the way one would go about this, is you pick a default screen size. It’s not a bad idea to choose something in the middle. It’s even better idea if the designer did use this as the baseline screen. After the app is built and before testing starts, developers (if lucky with the help of a designer) will go through the app making sure things adapt well to smaller and bigger screen sizes.

Unfortunately, when something is fixed for a smaller screen size, it also has to be tested to make sure nothing broke on a bigger size and vice versa. Doing this is particularly painful, since every time you want to test on a different resolution, you have to start a new simulator/emulator from scratch, which is obviously very time consuming. Needless to say, this process is, at the very least, tedious (if not a royal PITA).

Enter React Native Layout Tester

For this reason I built React Native Layout Tester. A component that allows you to wrap your iPhone’s view, and test it in different screen resolutions using an iPad simulator.

The process is simple, you install the module:

npm install — save react-native-layout-tester

You wrap your app with the component.

import LayoutTester from “react-native-layout-tester”;//…render() {
 return (
 <LayoutTester>
 <Provider store={ store }>
 <Router
 initialRoute={ this._initialRoute }
 ref={ this._setRouter }
 />
 </Provider>
 </LayoutTester>
 );
 }

And then you run your app with the iPad Air simulator.

If you need to test for other resolutions, you can also pass screen configurations through props.

Caveats

I just released the module, it’s a work in progress, so there are some rough edges to look out for.

  • Because you are not actually rotating the device, if you added logic to listen for this event, it will not be fired when clicking the “rotate” button.
  • It doesn’t play very well with ‘absolute’
  • It doesn’t play very well with styles that depend on physical screen sizes.
  • I have tested it with custom resolutions, but not yet on an android emulator.

Having said that, I still think that for testing simple layouts it’s good enough and might actually save some time.

The React Native Log

All things React Native — tutorials, experiments, tips & tricks, snippets

Gustavo Machado

Written by

The React Native Log

All things React Native — tutorials, experiments, tips & tricks, snippets