How To Set Font Size For Different Ios Devices In React Native

In react-native i design a sample,when i check it in different IOS devices here is my code: render() { return ( &l

Solution 1:

I've written the following code for my project:

On the file: multiResolution.js I have:

exportfunction getCorrectFontSizeForScreen(PixelRatio, screenWidth, screenHeight, currentFont){
  let devRatio = PixelRatio.get();
  letfactor = (((screenWidth*devRatio)/320)+((screenHeight*devRatio)/640))/2.0;
  let maxFontDifferFactor = 5; //the maximum pixels of font size we can go up or down
  // console.log("The factor is: "+factor);
  if(factor<=1){
    return currentFont-float2int(maxFontDifferFactor*0.3);
  }elseif((factor>=1) && (factor<=1.6)){
    return currentFont-float2int(maxFontDifferFactor*0.1);
  }elseif((factor>=1.6) && (factor<=2)){
    return currentFont;
  }elseif((factor>=2) && (factor<=3)){
    return currentFont+float2int(maxFontDifferFactor*0.65);
  }elseif (factor>=3){
    return currentFont+float2int(maxFontDifferFactor);
  }

}

function float2int (value) {
  return value | 0;
}

Then on each react-native component I do:

import { PixelRatio } from'react-native';
import {getCorrectFontSizeForScreen} from'./multiResolution'importDimensionsfrom'Dimensions';
const {height:h, width:w} = Dimensions.get('window'); // Screen dimensions in current orientation

and then on my styles I do:

var portraitStyles = StyleSheet.create({
  titleText: {
    fontSize: getCorrectFontSizeForScreen(PixelRatio, w,h,27),//magic takes place here
  },
});

It's custom but it has worked very well for me.

Also (irrelevant to your question but I'm going to say it anyway), I use widths and heights relevant to the screenWidth and screenHeight like so:

aStyleForAnElement:{    //this element will occupy
    width: w*0.55, //55% of the screen widthheight:h*0.05//5% of the screen height
}

This is how I support different screen sizes in my project till now.

NEW ANSWER:

As time passes we learn. At the time I wrote this post I had no other solution to manage font sizes rather than use custom code, but right now I don't have to do any of this:

I simply tell our designer to design for the lowest resolution available 320x480 (and give me the font sizes in points instead of pixels) and then I just use points instead of pixels while designing for 320x480.

All the screens above 320x480 will be taken care of automatically with react-native, I don't have to write ANY fancy code at all to automatically manage that.

My components now simply look like that:

BUTTON_TEXT: {
  textAlign: 'center',
  fontSize: 16, // this is 16 points
  color: 'white',
  backgroundColor: 'transparent',
},

Solution 2:

Only a concept, but I'd try following:

constDimensions = require('Dimensions');
constViewport = Dimensions.get('window');

constIPHONE6_WIDTH = 750; // check this, since I'm not sure about iPhone 6 widthclassYourComponentextendsReact.Component {
  constructor(props) {
    super(props);
  }

  getFontSize() {
    return ({
      fontSize: ((Viewport.width * Viewport.scale) === IPHONE6_WIDTH) ? 14 : 16
    });
  }

  render() {
    <View><Textstyle={[styles.facebookText,this.getFontSize()]}>Continue with Facebook</Text></View>
  }
}

Solution 3:

Create a common style for an Application. Reuse this default style properties in all the style components.

src/common/style.js

import { Dimensions } from'react-native';
const { width, height } = Dimensions.get('window');

exportconstColorPrimary  = '#5CFE48';
exportconstSmallPhone = () => {
  if(width<=320) // Here you could use "react-native-device-info" to get device information.returntrueelsereturnfalse
}

In Component style import the common style file.

import { SmallPhone, ColorPrimary } from'../../common/style';
... 
...
const styles =  StyleSheet.create({
  headerLabel: {
    fontSize: SmallPhone() ? 14:26,
    color: ColorPrimary
  }
});

You could also directly assign specific font size for each device in common style.js and just simply call the SmallPhone function instead of using ternary operators.