How to Add Tablet and iPad Support in any React Native App

Tablet/iPad Support in Cross-Platform App

We all know we can create a cross-platform app using React Native. In other words, with React Native we can create an app that can support not only iPhone or Android phones but also iPad, Android tablets. We always plan for Android and iPhone but how to add Tablet and iPad Support in any React Native App? This is exactly what we are going to cover in this post.

How to Scale the UI for different devices?

According to the official document

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.

Have you got anything?

React Native app support flex and takes unitless numerical value for width, height, margin and padding, which means if you plan your app properly then it is by default support tablets and iPhones. You just need to manage somethings like fontSize, lineHeight or SVGs.

In this post, I am not going to provide the details about the scaling of layout but yeah I want to share react-native-size-matters. This is a very good library which provides the utility for scaling the size of your apps UI across different sized devices.

My main focus in this post is to add the support of tablet and iPad in React Native App. So let’s see how to do that?

Android Tablet Support

To add the Android Tablet Support in React Native App you don’t have to do very much just need to run the application in your tablet and if it gives any error like

tablet do not support feature: android.hardware.telephony

You need to add the following in your AndroidManifest

<uses-feature android:name="android.hardware.telephony" android:required="false" />

After adding this run the app again and you will see it running in the tablet.

To release the same in the production or if I say to release the application for the tablet on Google Play store

1. Open Google Play Console: https://play.google.com/apps/publish/
2. After login, click the app
3. Click Release management > Device catalog on the left menu and you will see some screens. if you see the agreement page, click Agree
4. Click Store presence > Store listing and add images for TABLET

This is how you can release the same application for the Tablet as well.

iPad Support

To add the support for the iPad first you have to open the project in the Xcode and need to follow the following steps:

1. Click and open the project from [project name]/ios/[project name].xcworkspace or [project name]/ios/[project name].xcodeproj
2. Now click on the project from the left menu and click on the project name from the target section
3. In the Deployment Info section select the devices iPhone and iPad both

This is how you can add the support of the iPad in the React Native iOS application.

This is how to add Tablet/iPad support in any React Native App. If you have any doubts or you want to share something about the topic you can comment below or contact us here. There will be more posts coming soon. Stay tuned!

Hope you liked it. 🙂