Introducing React Native Design System (RNDS) 🎉🎉

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.