mobilereact-nativewidthtabletdevice-detection

react-native-device-detection not working with Nexus 7


I had created an imageGallery application built over React-Native. The basic requirement is

Device detection is done using react-native-device-detection

The number of images per row is limited using Dimensions object.

const Device = require('react-native-device-detection');
 if(Device.isTablet) {
 Object.assign(styles, {
  image: {
    width: Dimensions.get('window').width / 5 - 10 ,
    height: Dimensions.get('window').width / 5 - 10,
  }
 });
}
if(Device.isPhone) {
 Object.assign(styles, {
  image: {
    width: Dimensions.get('window').width / 3 - 10 ,
    height: Dimensions.get('window').width / 3 - 10,
  }
 });
}

This works fine in mobile and also in the simulator (Nexus 7). Checked with https://material.io/devices/. Nexus 7 comes under Tablet. Nexus 7 Emulator Screenshot

Nexus 7 Emulator Screenshot

Nexus 7 Device Screenshot

Nexus 7 Device Screenshot But in the device (Nexus 7) it shows 3 images per row.(Mobile behavior).

How can this be fixed?


Solution

  • Nexus 7 is actually a mini tablet as per manufacturer. react-native-device-detection identifies the device on the basis of their height/width and pixelDensity like this.

      isPhoneOrTablet() {
        if(this.pixelDensity < 2 && (this.adjustedWidth >= 1000 || this.adjustedHeight >= 1000)) {
          this.isTablet = true;
          this.isPhone = false;
        } else if(this.pixelDensity === 2 && (this.adjustedWidth >= 1920 || this.adjustedHeight >= 1920)) {
          this.isTablet = true;
          this.isPhone = false;
        } else {
          this.isTablet = false;
          this.isPhone = true;
        }
      }
    

    There is a chance for wrong info if the device has unorthodox sizes, you can add your own custom calculations to make it more accurate.