What are the different parameters to take in account to scale fonts correctly, for different screens for iOS and Android, using React Native Paper?

Question

I'm currently implementing tons of conditions in the rendering of my components because it seems that there is hudge differences of font size between the devices.

It is not clear for from now what are the different factors. On smaller Android devices, I get smaller fonts than on larger iOS devices, resulting into words strangely cutted on iOS. For instance...

I browsed the web and found several tips:

Creating a utility custom hook that return a function that can scale according to screen width. But it appears that this create a lot of issues since useWindowsDimensions does not update correctly after screen rotation on React 0.63 on Android.
Some people scale according to the pixel density, using PixelRatio, suggesting that screens that have a pixel ration >= 2 are bigger. Seems to be very approximative, is it ???
Font scale is also clearly an issue. My bet is that I need to reset it on large titles or these will become enormous.

Is there a simple and universal approach to adapt to the different screens, using React Native Paper? Or maybe some important tips I can make use of?

Thanks

score 1 · Answer 1 · answered Jan 22 '21 at 18:09

Try this utility function for scaling fonts:-

import { PixelRatio, Dimensions } from 'react-native';

const pixelRatio = PixelRatio.get();
const deviceHeight = Dimensions.get('window').height;
const deviceWidth = Dimensions.get('window').width;


const normalize = (size) => {
  if (pixelRatio >= 2 && pixelRatio < 3) {
    // iphone 5s and older Androids
    if (deviceWidth < 360) {
      return size * 0.95;
    }
    // iphone 5
    if (deviceHeight < 667) {
      return size;
      // iphone 6-6s
    } if (deviceHeight >= 667 && deviceHeight <= 735) {
      return size * 1.15;
    }
    // older phablets
    return size * 1.25;
  } if (pixelRatio >= 3 && pixelRatio < 3.5) {
    // catch Android font scaling on small machines
    // where pixel ratio / font scale ratio => 3:3
    if (deviceWidth <= 360) {
      return size;
    }
    // Catch other weird android width sizings
    if (deviceHeight < 667) {
      return size * 1.15;
      // catch in-between size Androids and scale font up
      // a tad but not too much
    }
    if (deviceHeight >= 667 && deviceHeight <= 735) {
      return size * 1.2;
    }
    // catch larger devices
    // ie iphone 6s plus / 7 plus / mi note 等等
    return size * 1.27;
  } if (pixelRatio >= 3.5) {
    // catch Android font scaling on small machines
    // where pixel ratio / font scale ratio => 3:3
    if (deviceWidth <= 360) {
      return size;
      // Catch other smaller android height sizings
    }
    if (deviceHeight < 667) {
      return size * 1.2;
      // catch in-between size Androids and scale font up
      // a tad but not too much
    }
    if (deviceHeight >= 667 && deviceHeight <= 735) {
      return size * 1.25;
    }
    // catch larger phablet devices
    return size * 1.4;
  } return size;
};

export default normalize;

What are the different parameters to take in account to scale fonts correctly, for different screens for iOS and Android, using React Native Paper?

1 Answers1