Mendix Native - Custom styling that support different screen sizes
Hi All, We are using custom styling in native mobile applications and we are having a hard time especially when it comes to the alignment of different components since we are having a lot many different screen sizes in inches and pixel ratios. Based on our understanding, there is only a single unit in Mendix native styling which is pixels. But our problem is if we are having two devices both are of the same screen size say 6 inches and have different pixel ratios, If I set a container width as 100, it will show very smaller in the phone which is having higher pixels. What would be the optimal way of do styling a native mobile application so that it will look good on the majority of mobile devices?
Since Mendix Native leverages React Native under the hood, the styling strategies are the same. All measurements are done in pixels, as you suggest: https://reactnative.dev/docs/height-and-width. If you’d like to style components relative to screensize and/or available space, I’d suggest looking into using Flex Dimensions (described lower down in the above link).