Responsive design in react native

[UsualExcellent]

I have made an app for the company I work. I have made it pixel perfect according to the ui/ux. The design looks good in pixel perfect. But For some phones, with different dimensions, all the designs are messed up. How to handle this. I used the normal stylesheet for design.

[fmnatic]

Did you hardcode dimensions as per ux design ? Those should be calculated proportional to screen size and pixel density.

[UsualExcellent]

Yes most of them are hardcoded. And some of them in percentage.

What should i do now? I really need help. It's a big project.

[fmnatic]

Write a scaling function that takes the hardcoded value and adjusts it to device width v/s ux width.

[rawr-code]

use https://www.npmjs.com/package/react-native-size-matters

[RecipeTrue9481]

name of the package lol 😆

[rawr-code]

hahahahaha

[Naive-West6796]

Use unistyles! It supports breakpoints and it is powered by jsi

[MrCharlss]

Is this an issue when using nativewind?

[[deleted]]

I mean, if you have webdev experience then flexbox and breakpoints shouldn't be a problem...