How to forbid Tablet usage in expo / react-native?

Question

I have developed an app with Expo and react-native for Smartphones - now I am trying to upload the ".aab" file to the Google Play Store - however it seems like it will be available for tablet and wearables, too. I could not really find out how to either code it into the "app.json" or into the code itself, that only a smartphone must be supported.

Furthermore, it should not be possible to even download the app from any other device than a smartphone, cause that would cause bad ux

I tried the device catalogue but could only choose to block by processor or RAM - is there an easy goto solution?

Detrusion

You can use react-native-device-info isTablet method to know if there is a tablet at the app start and display a message that the app does not support tablets. – Meandrous

but then they would still be able to download it right? and just see something like "it is not supported..." – Detrusion

Yes that's correct. You can though exclude devices in Google Play Store, but not by universal form factor which means that you'll have to add every tablet model in your exclude list: View & restrict your app's compatible devices. – Meandrous

Answer 1

To forbid your app from Tablet/TV support you just need to add the following tag to AndroidManifestFile.xml.

If you're using expo try to eject and do it.

<manifest ... >
    <supports-screens android:smallScreens="true"
                      android:normalScreens="true"       
                      android:largeScreens="false"         <- forbid for tablets
                      android:xlargeScreens="false"/>      <- forbid for tv
    ...
</manifest>

Note: The below things said by the expo so don't worry about eject(If you do not want to modify native files) but know about completely.

After you eject, all your JS files will stay the same, but we'll additionally create ios and android directories in your project folder. These will contain Xcode and Android Studio projects respectively, and they'll have dependencies on React Native and on Expo's core SDK. You'll still be able to develop and test your project with Expo CLI, and you'll still be able to publish your Expo JS code the same way. However, if you add native dependencies that aren't included in Expo, other users won't be able to run those features of your app with the main Expo app. You'll need to distribute the native project yourself.

Doubleacting

Answer 2

you can remove support for tablet by adding ios configuration in app.json and set "supportsTablet": false

you can see the documenatation

app.json

{
  "expo": {
    "name": "appname",
    "description": "No description",
    //Any Other properties
    "ios": {
      "supportsTablet": false
    }
  }
}

Note: this will work when you eject project in ExpoKit

you can also tablet on runtime by expo-devices package

import * as Device from 'expo-device';

consle.log(Device.DeviceType);// tablet

Device.DeviceType output Ref

you can also stop support for android after ejecting expo by changing in AndroidManifest.xml file

<manifest ... >
<compatible-screens>
    <!-- all small size screens -->
    <screen android:screenSize="small" android:screenDensity="ldpi" />
    <screen android:screenSize="small" android:screenDensity="mdpi" />
    <screen android:screenSize="small" android:screenDensity="hdpi" />
    <screen android:screenSize="small" android:screenDensity="xhdpi" />
    <screen android:screenSize="small" android:screenDensity="xxhdpi" />
    <screen android:screenSize="small" android:screenDensity="xxxhdpi" />
    <!-- all normal size screens -->
    <screen android:screenSize="normal" android:screenDensity="ldpi" />
    <screen android:screenSize="normal" android:screenDensity="mdpi" />
    <screen android:screenSize="normal" android:screenDensity="hdpi" />
    <screen android:screenSize="normal" android:screenDensity="xhdpi" />
    <screen android:screenSize="normal" android:screenDensity="xxhdpi" />
    <screen android:screenSize="normal" android:screenDensity="xxxhdpi" />
</compatible-screens>
</manifest>

Azal

how can i use this for android? – Detrusion

Thank you really much, i have expo managed project and I cannot find the AndroidManifest.xml file, I spmly do expo build:android -t app:bundle and then it creates the bundle for me ... – Detrusion

@Detrusion you have to do expo eject if you want to remove support for tablet in android manifest docs.expo.io/introduction/managed-vs-bare/… – Azal

if you want to remove support for tablet in managed project hen you can use expo-device to check if it is a tablet or not and on this condition, you can quit app programaticallt – Azal

you can read managed vs bare forums.expo.io/t/the-hard-truth-about-managed-v-bare/20746. – Azal

Answer 3

You Can't!

There is just no good way to do this within Expo managed workflow. Expo will allow you to disable iOS tablets in the package.json, but it will not affect Android.

You can disable specific devices in the Google Play console, but this isn't a good solution because you have to select every tablet device individually and disable them manually (there are hundreds). If a new Tablet type is added to the play store, you will have to update your supported devices to exclude it.

It's very unfortunate since it's such a common use case. I'm not sure why Expo still doesn't support this but it just does not. Just eject your application and use the bare workflow.

Bridgeman

Answer 4

Hi there I am not familiar at all with the React native framework but I did a quick search and there must be an AndroidManifest.xml file in your project somewhere; most likely at android > app > src > main

There or wherever you manage to find the AndroidManfiest.xml file, you can restrict your app to support only normal screen sizes by adding:

<supports-screens android:normalScreens="true"
                  android:largeScreens="false"
                  android:xlargeScreens="false"
                  android:largestWidthLimitDp="600"/>

More on <supports-screens> tag here

More on screen sizes here Look here if 600 is not what you are looking for, maybe you want to support some phablet form factors ;)

When you declare those in your manifest file, the uploaded apk or bundle automatically is shown to devices with only selected screen configurations. You can even see, the devices supported by your app on the Device Catlog section on Play Console.

I hope it helps. Let me know.

Fortieth

I do not have a AndroidManifest.xml since it is a expo managed project (sorry i am very new to this) – Detrusion

Oh. I just came to know that Expo is built on top of React native and does not allow much tinkering with native code. https://mcmap.net/q/209173/-react-native-ios-and-android-folders-not-present If you absolutely want to do what you mentioned, maybe this will help: docs.expo.io/expokit/eject – Fortieth

Answer 5

You can remove devices while publishing your app on play-store too. Follow this documentation.

To review your app's supported and excluded devices:

Sign in to your Play Console. Select an app. On the left menu, click Release management > Device catalog. If you haven't already, review and accept the Terms of Service. Select the All, Supported, or Excluded tabs. If you want to download a list of devices as a CSV file, near the right side of the page, click Download device list.

Reiko

The problem with this approach is that there are hundreds of tablet devices and you have to select them individually. Plus if a new device type is added then you'll have to manually add it as well. – Bridgeman