If you’ve ever worked on a React Native app then you must’ve wondered how do I make this look good on Tablets. Worry not. This tutorial will teach you how to make your React Native app not look weird on Tablets or lets say any other device.

The Problem

When you make a React Native app, you just make it to work on Mobile Phones. The problem occurs when you try to make it work on Tablets. The reason is Tablets have more pixels than Mobile phones. So whatever dimensions you specify for Mobile are definitely not going to work for Tablets. In short, the bigger your device gets, the more pixels it will have.

From the docs,

All dimensions in React Native are unitless, and represent density-independent pixels. Setting dimensions this way is common for components that should always render at exactly the same size, regardless of screen dimensions.

The Solution

I created a simple Chat App for this tutorial which already looks good on Mobile & we will learn how to scale the app to make it look good on Tablets.

🔗 The complete source code can be found here.

Following picture shows how the App looks when you see it on Mobile (iPhone X) & when you see it on Tablet (iPad Air 2) —