Recently a client asked me to design a unique layout using absolute positioning, the layout was very unique and the only way I could make it work on every device is by using breakpoint that way I could target and tweak separate block of code.

You’ll need to install this library to detect the device used, It’s optional but you may probably need pixelDensity props if you’re reading this.

const Device = require('react-native-device-detection');

Below are the most common breakpoints I used:


// Old smartphones

if (Device.adjustedWidth >= 640) {
	Object.assign(styles, {
		compName: {
			flex: 1,
		},
	});
}

// iPhone 6 / 7 / 8

if (Device.adjustedWidth >= 750) {
	Object.assign(styles, {
		compName: {
			flex: 1
		},
	});
}

// Full HD

if (Device.adjustedWidth >= 1080) {
	Object.assign(styles, {
		compName: {
			flex: 1,
		},
	});
}

// iPhone X / XS 

if (Device.adjustedWidth >= 1125) {
	Object.assign(styles, {
		compName: {
			flex: 1,
		},
	});
}

// iPhone 6 Plus / 7 Plus / 8 Plus 

if (Device.adjustedWidth == 1242 && Device.adjustedHeight == 2208) {
	Object.assign(styles, {
		compName: {
			flex: 1,
		},
	});
}

// iPhone XS Max

if (Device.adjustedWidth == 1242 && Device.adjustedHeight == 2688) {
	Object.assign(styles, {
		compName: {
			flex: 1,
		},
	});
}


// Galaxy S6 / S7 / S8 / S9 / S10

if (Device.adjustedWidth >= 1440) {
	Object.assign(styles, {
		compName: {
			flex: 1,
		},
	});
}
Buy me a coffeeBuy me a coffee
Spread the love
Share this post

Start typing and press Enter to search

Shopping Cart