React native check if tablet or screen in inches

Question

I've established a different render logic for tablets and mobile devices. I was wondering if there is a way to get the screen size in inches or maybe even any module to automatically detect if the device is a tablet or not.

The reason I am not using the dimensions api directly to get the screen resolution is that there are many android tablets with lower resolution than many of their mobile counterparts.

Thanks.

score 17 · Accepted Answer · answered Jun 15 '17 at 09:49

17

Based on @martinarroyo's answer, a way to go about it use the react-native-device-info package.

However the android implementation is based on screen resolution. That can be a problem as there are many tablet devices with a lower resolution than many mobile devices and this can cause problems.

The solution I will be using and am suggesting is use react-native-device-info for apple devices and for android devices go with a simple ratio logic of the type:

function isTabletBasedOnRatio(ratio){

if(ratio > 1.6){
    return false;
}else{
    return true;
}

}

This is not a perfect solution but there are many small tablets with phonelike ratios as well or even phablets ( android is blurry) and this solutions is inclusive towards those as well.

answered Jun 15 '17 at 09:49

Return-1

2,329
3
21
56

1

can you elaborate how this ratio type works and how many devices comes under this roof. – Kartiikeya Mar 12 '18 at 06:50
Can you explain why 1.6? – Slobodan Krasavčević Aug 26 '19 at 08:54
at the time it was a reasonable ratio but right now im still unsure as to handle this. was just a heuristic solution – Return-1 Aug 26 '19 at 09:15

score 12 · Answer 2 · answered Jun 15 '17 at 09:34

12

You can use the react-native-device-info package along with the Dimensions API. Check the isTablet() method and apply different styles according on the result.

answered Jun 15 '17 at 09:34

martinarroyo

9,389
3
38
75

Hey martin, i just looked into the package and i realised that even though it works well for apple devices, the logic for the android is based on screen resolution as well. I will use your answer and merge it with an answer of my own if you dont mind. – Return-1 Jun 15 '17 at 09:43
Sure thing, it would also be helpful if you could post your final solution :) – martinarroyo Jun 15 '17 at 09:44

score 8 · Answer 3 · answered Aug 17 '18 at 04:22

If you don't want to use library react-native-device-info use can use this code below, not sure it't work perfect but may be help

export const isTablet = () => {
  let pixelDensity = PixelRatio.get();
  const adjustedWidth = screenWidth * pixelDensity;
  const adjustedHeight = screenHeight * pixelDensity;
  if (pixelDensity < 2 && (adjustedWidth >= 1000 || adjustedHeight >= 1000)) {
    return true;
  } else
    return (
      pixelDensity === 2 && (adjustedWidth >= 1920 || adjustedHeight >= 1920)
    );
};

Similar solution is suggested [here by Adrian Hall](https://adrianhall.github.io/react%20native/2017/07/26/handling-orientation-changes-in-react-native/) — CyxouD, May 16 '22 at 14:26

score 0 · Answer 4 · answered Aug 07 '18 at 11:06

0

react-native-device-detection

if(Device.isTablet) {
  Object.assign(styles, {
    ...
  });
}

Based on PixelRatio and Screen's height,width.

answered Aug 07 '18 at 11:06

Mujtaba Zaidi

629
1
6
14

score 0 · Answer 5 · edited Aug 29 '22 at 10:13

0

use

npm install --save react-native-device-info

then

import Device from 'react-native-device-info';

const isTablet = Device.isTablet();

edited Aug 29 '22 at 10:13

Tim

522
1
5
18

answered Aug 24 '22 at 14:32

Naveed Shk

1

The most recent version of react-native-device-info reports foldable devices like the Galaxy Fold to report`Device.isTablet();` as true, even when they're folded and in "phone mode". I'm going to be switching to aspect-ratio detection instead of the `react-native-device-info` result so I can support those types of phones in both open and closed mode. – markrickert Feb 22 '23 at 19:08

score 0 · Answer 6 · answered Mar 31 '23 at 07:39

Using the below example you can find the device is ios, android, tablet or small device

import { Platform, Dimensions } from 'react-native';

const { width, height } = Dimensions.get('window');
const aspectRatio = height / width;

const isIOS = Platform.OS === 'ios';
const isAndroid = Platform.OS === 'android';

const isTablet = aspectRatio < 1.6; // Assumes 4:3 aspect ratio for tablets
const isSmallDevice = width < 375; // Assumes iPhone 6/7/8 width as small device

// Example usage in a component
const MyComponent = () => {
  const deviceType = isTablet ? 'tablet' : 'phone';
  const platformType = isIOS ? 'iOS' : 'Android';

  return (
    <View>
      <Text>Device Type: {deviceType}</Text>
      <Text>Platform Type: {platformType}</Text>
    </View>
  );
};

React native check if tablet or screen in inches

6 Answers6

Linked