React-Native: how to scale the font size to support many different resolutions and screens in Android and iOS?

Question

I have a huge problem trying to determine the correct font size on the different screens that exist.

I currently have a helper function called getCorrectFontSizeForScreen .

 export function getCorrectFontSizeForScreen(currentFontSize){ const maxFontDifferFactor = 6; //the maximum pixels of font size we can go up or if(Platform.OS === 'ios'){ //iOS part let devRatio = PixelRatio.get(); this.fontFactor = (((screenWidth*devRatio)/320)*0.55+((screenHeight*devRatio)/640)*0.45) if(this.fontFactor<=1){ return currentFontSize-float2int(maxFontDifferFactor*0.3); }else if((this.fontFactor>=1) && (this.fontFactor<=1.6)){ return currentFontSize-float2int(maxFontDifferFactor*0.1); }else if((this.fontFactor>=1.6) && (this.fontFactor<=2)){ return currentFontSize; }else if((this.fontFactor>=2) && (this.fontFactor<=3)){ return currentFontSize+float2int(maxFontDifferFactor*0.85); }else if (this.fontFactor>=3){ return currentFontSize+float2int(maxFontDifferFactor); } }else{ //Android part let scale = screenWidth/375; //got this from the f8 facebook project this.fontFactor = (((screenWidth)/320)*0.65+((screenHeight)/640)*0.35) if(this.fontFactor<=1){ //for 0.8 until 1.0 use 8 (800x600 phone this.fontFactor == 0.961) return float2int(scale * (currentFontSize+8)); }else if((this.fontFactor>=1) && (this.fontFactor<=1.6)){ //for 1.0 until 1.5 use 4 (NEXUS 5 this.fontFactor == 1.055) return float2int(scale * (currentFontSize+4)); } else{ return float2int(scale * (currentFontSize+2)); } } function float2int (value) { return value | 0; //Converts a float to an integer } 

and then normalize the font size as follows:

 const styles = StyleSheet.create({ aText:{ color: 'white', fontFamily: 'Whatever', fontSize: getCorrectFontSizeForScreen(14), } }); 

It seems to work well on iOS, but not so good on Android ... I think I need more fontFactor groups to create this list with a trial version and an error!

But I wonder if there is a better way to do this? What are others doing about this?

Thanks!

Answer 1

The dimensions in React Native are based on dots, not pixels, so you don’t need such complicated logic to change the font size to fit the dpi resolution. Conversely, if you want to cancel scaling automatically, you must divide the pixel size by the pixel ratio.