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.
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.