how to set font size for different IOS devices in react native

I've written the following code for my project:

export function getCorrectFontSizeForScreen(PixelRatio, screenWidth, screenHeight, currentFont){ let devRatio = PixelRatio.get(); let factor = (((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); }else if((factor>=1) && (factor<=1.6)){ return currentFont-float2int(maxFontDifferFactor*0.1); }else if((factor>=1.6) && (factor<=2)){ return currentFont; }else if((factor>=2) && (factor<=3)){ return currentFont+float2int(maxFontDifferFactor*0.65); }else if (factor>=3){ return currentFont+float2int(maxFontDifferFactor); } } function float2int (value) { return value | 0; } 

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

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

aStyleForAnElement:{ //this element will occupy width: w*0.55, //55% of the screen width height: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', }, 

Only a concept, but I'd try following:

const Dimensions = require('Dimensions'); const Viewport = Dimensions.get('window'); const IPHONE6_WIDTH = 750; // check this, since I'm not sure about iPhone 6 width class YourComponent extends React.Component { constructor(props) { super(props); } getFontSize() { return ({ fontSize: ((Viewport.width * Viewport.scale) === IPHONE6_WIDTH) ? 14 : 16 }); } render() { <View> <Text style={[styles.facebookText, this.getFontSize()]}>Continue with Facebook</Text> </View> } } 

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'); export const ColorPrimary = '#5CFE48'; export const SmallPhone = () => { if(width<=320) // Here you could use "react-native-device-info" to get device information. return true else return false } 

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.