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?

I think the algorithm works based on the dpi of each devices. You can see the category on which your device belongs (density query vech row fix chyy, appo correct akum) https://material.io/devices/ — Manoj Perumarath, Mar 29 '17 at 04:59
Checked with https://material.io/devices/. Nexus 7 comes under Tablet. — Geethu Jose, Mar 29 '17 at 05:25

score 0 · Accepted Answer · answered Mar 29 '17 at 06:02

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.

Checked if (Device.pixelDensity === 1 && (Device.adjustedWidth == 600 || Device.adjustedHeight == 960)) { Device.isTablet = true; Device.isPhone = false; } inside the render function and it worked. — Geethu Jose, Mar 30 '17 at 07:15

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

1 Answers1