Most common mobile breakpoints for react native responsive design1 min read


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,
		},
	});
}
Spread the love

Published by

Youssef

Youssef

less is more