How and why I built Most common mobile breakpoints for react native responsive design
About me
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.
The problem I wanted to solve
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');
What is Most common mobile breakpoints for react native responsive design?
Tech stack
The process of building Most common mobile breakpoints for react native responsive design
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,
},
});
}
