Comment by Madhankumar on "Introducing React Native Design System (RNDS) 🎉🎉"

Thanks Mohd Shad Mirza for making a design system in React Native and appreciate your efforts.

Coming from the web background, I am just curious about how do you scale the font-size, spacing, height and width of an element. I hope even in the mobile also we have to support different media devices like landscape and portrait.

In the web, I used to set my base space-unit as 1em and then will calculate the remaining space units. Besides this will change the base unit for different devices. By this way I achieved the scaling.

Hi Madhan, Thank you for the kind words. This Design System is meant to work primarily on Android and iOS. For web, it needs extra configuration and uses React Native Web for that. While working on mobile, we use pixels and the main problem we deal with is when the default font size of device changes (say extra large). Normal Text element from React Native doesn't cover this issue. I am calculating font size based on PixelRatio here: github.com/iamshadmirza/react-native-design-syste…

It helps in achieving consistence font size. I'm using flex boxes so layout will just scale when the orientation is changed. I haven't worked a lot in that use cases but if please let me know if something can be improved. Here is a thread where you can drop suggestion: github.com/iamshadmirza/react-native-design-syste…

I have worked on 9 apps so far and I think I need help of more experienced people to make this library better. Please drop suggestion if see something not working as expected.

Mohd Shad Mirza

Did you think about setting font-size: 6.25%; As a base case? This makes each 1rem = 1 pixel, is scalable natively I believe as well. You could then just have each of your size definitions as rem instead of pixels and they will scale with a11y settings etc. Good luck!

MARK Thank you for the suggestion Mark. I'm gonna try it out.

Search Hashnode