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

Question

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

• Mobile View shows 3 images per row.
• Tablet View shows 5 images per row.

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 Device Screenshot

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

How can this be fixed?

Answer 1

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.