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

Question

In react-native i design a sample,when i check it in different IOS devices here is my code:

render() {
      return (
        

        

Answer 1

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.