React Native responsive scaling on the web
If you’re a React-Native developer you might already be familiar with the concept of “scaling” views in your apps to look good on devices of different pixel densities and sizes.
There are many ways to do it: from using existing libraries like react-native-reponsive-screen to rolling your custom solution.
Please notice that if you’re trying to follow the iOS and Android design guidelines in your apps, you shouldn’t scale all your views, otherwise users won’t get any benefit from using devices with bigger screens.
This approach works fine for the most common use cases, but it has one major flaw: although dimensions are available immediately, they may change so any rendering logic or styles that depend on these constants won’t be updated automatically when the device dimensions are updated.
There are only a handful of cases when Android and iOS device dimensions change (e.g. device rotation, foldable devices), but this issue is particularly evident if you’re using React Native on the web because each time you resize your browser windows you’re technically updating the dimensions.
