React Native - Create custom iPad screen

React Native - Create custom iPad screen

Last week I was improving my own React Native application. It works great on mobile devices. However, I wanted to bring support for iPad because all the screens could allow fewer steps. And we can take advantage of side menus of it.

But in the current mobile flow, I have different screens for executing a specific task. The goal of a custom iPad screen is to put a list (HTTP requests in this case) to the left and the content screen to the right.

Since I’m using the React Native Navigation. The only solution that I found is to create a custom screen only for iPad devices. But can React Native detect if a device is an iPad? Well, here is the solution.

The isPad value

This value is only available if Platform is an iOS device. So be careful with it and add a validation method before.


import { Platform } from "react-native";
import IosMobileScreen from "your-mobile-screen";
import IosTabletScreen from "your-tablet-screen";
import AndroidScreen from " your-android-screen";
const MainScreen = () => {
const isIos = Platform.OS === "ios";
let isTablet = false;
if (isIos) {
isTablet = Platform.isPad;
return isIos ? isTablet ? <IosTabletScreen /> : <IosMobileScreen /> : <AndroidScreen />;
export default MainScreen;

I tried to make the code longer for better understanding. And assuming that you have three different screen components. One for mobile iOS devices, another for iPad and the last if you want a custom Android screen.

So, first, we validate if the device is really an iOS device, and we prepare the isTablet variable as false default. We only enter the conditional if it matches the iOS condition. The Platform.isPad constant is a boolean. Once we have that value as true, we can render our iPad component. Only for the example, I named it IosTabletScreen. We have the other two components if no condition was validated and returns whether it is an Android device or a mobile iOS device.

My posts are not AI generated, they might be only AI corrected. The first draft is always my creation



Written by Helmer Davila

In other languages

Usando React Native y React Navigation

React Native - Creando una pantalla especial para iPad

Avec React Native et React Navigation

React Native - Créer un écran iPad personnalisé dans React Native

Related posts

Testing the code as iOS, iPad and Android device. Light mode and dark mode

React Native & Jest: Mock Platform OS and color scheme