Testing App Layout with Expo

Ever needed to make sure your Expo App’s UI doesn’t break across all of your target devices? Can’t be bothered having to deal with simulators/emulators for different devices?

Then these two methods might help save you some time.

Method 1: Expo Web

The first and possibly simplest method is to use Expo Web. By bundling your app for web you have a window that you can dynamically resize to the most extreme heights/widths and aspect ratios to test it all out (see below). This is built into any Expo project you create and your app can be launched from the CLI by pressing ‘w’ which will start a webpack server and open it in a new tab for you!

But there is a big caveat - if you use modules that aren’t react-native-web supported then you’ll just get a fatal error on start up... which is where method 2 might be a little better.

Method 2: Use a top-level View

It seems simple but only occurred to me the other day - why not just make your top level component a <View /> that you can set the height and width of to mimic the layout on any device. The obvious issue with this is you need a larger device with large screen dimensions than whatever layout you want to try out - I mainly develop for iPad at the minute and so this works quite well for me (see screenshot below).

// In App.tsx (or App.js if your still using vanilla JS)
// Define a test height and width to mimic any device
const testHeight = 400;
const testWidth = 250;
// ...
render() {
  return(
    <View style={{height: testHeight, width: testWidth}}>
     {/* The rest of your app here */}
    </View>
  );
}
// ...

Method 3: Just use a simulator...

If neither of these solutions fit your needs then you might be best sticking to using a standard simulator or emulator (or stealing all of your roommates’ phones to try your copy of flappy bird on). At the end of the day they give you a true representation of what the app will look and feel like on any device and more importantly let you ensure the functionality of your app works cross platform.

Thanks for reading! If you have any tricks for this let me know below!