How to use React Native PixelRatio utility class?

Question

I have an app written initially for iPhone 6 symulator which has a componend syled with following example values:

const styles = StyleSheet.create({
  headerNav: {
    width: 40,
    height: 40
  },
  headerLogoImage: {
    width: 140,
    height: 140
  },
  footerNavText: {
    padding: 15,
    fontSize: 25
  }
});

Unfortunately when I launched the app on iPad symulator, the size proportions completely collapsed. I know that there is something like PixelRation but documentation is very limited and unclear.

Any idea / suggestions how can I translate these width / height / padding & fontSize to proper values using this PixelRatio class?

Answer 1

fontSize needs to be divided by PixelRatio.getFontScale(). This will account for different screen densities in iOS and Android.

footerNavText: {
  fontSize: 25 / PixelRatio.getFontScale()
}

https://facebook.github.io/react-native/docs/pixelratio.html