I have worked on the react native app to create cross platform mobile application. On that I have faced the issue in the width and height and font size related. Those issue are occured based on mobile device display size and font size.
I have created one card design and it is perfectly suited in my testing device. But after app published in user mobile based on settings like font and display size card looks inconsistent.
Core problem is need to handle the width,height,font-size based on the display and font-size.
enter image description here User mobile with large display size.
enter image description here Test mobile with default settings.
Note : This is old project.
> "react": "18.2.0", > "react-native": "0.71.6",
Accepted Answer
Your question about "handling font-size based on font-size" sounds as if you might think, the solution here was to recognize that the user configured their device to use a larger font size - and then in turn lower the font-size you are setting, so that effectively it will look the same again, as on your device ...?
That is not a proper "solution" - the user changed the font size on their device for a reason.
You should rather aim for a different layout then in such a situation. You could f.e. make the actual data content take full width - and place the "Approved" / "Rejected" badges, and the ">>" (whatever that is for, if it isn't mere decoration to begin with?) in one line above or below, instead of on the right.
Or, if the meaning will still be clear to the user from context (or supplied via an added legend), you could remove the text Approved/Rejected, and use the icons only to convey this status - thus reducing the width needed for the right column by quite a bit.
C3roe