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 Device Screenshot
But in the device (Nexus 7) it shows 3 images per row.(Mobile behavior).
How can this be fixed?
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.