Short Guide to Font Scaling & Styling Fixes in React Native

1import { Platform, PixelRatio, Dimensions } from 'react-native';
2import ExtraDimensions from 'react-native-extra-dimensions-android'
3import DeviceInfo from 'react-native-device-info';
4import { isIphoneX } from 'react-native-iphone-x-helper'
5const { width, height } = Dimensions.get("window");
6export default class DeviceUiInfo {
7  static platform = Platform.OS;  //gives the device platform iOS or Android
8  static screenSize = { width, height };  //gives the width & height of device
9  static screenSizeWithPixelRatio = { width: width * PixelRatio.get(), height: height * PixelRatio.get() }; //calculate the width & height based on device pixel ratio
10  static guidelineBaseWidth = 350; //standard width which will be used as base for calculating the scale.
11  static guidelineBaseHeight = 680; //standard height which will be used as base for calculating the scale.
12  static isIphoneX = isIphoneX() //check if device is iPhoneX
13  static isTablet = DeviceInfo.isTablet() //check if device is Tablet
14  static appVersion = DeviceInfo.getVersion();  //gives app version
15  static softBarHeight = ExtraDimensions.get('SOFT_MENU_BAR_HEIGHT'); //gives soft menu bar height
16  static statusBarHeight = ExtraDimensions.get('STATUS_BAR_HEIGHT');  //gives status bar height
17  static fontScale = PixelRatio.getFontScale()  //gives font scale based on pixel ratio
18  
19  static getPlatform() {
20    return this.platform
21  }
22  static getScreenSize() {
23    return this.screenSize
24  }
25  static getScreenSizeWithPixelRatio() {
26    return this.screenSizeWithPixelRatio
27  }
28  static isIphoneX() {
29    return this.isIphoneX
30  }
31  static scale(size) {
32    return this.screenSize.width / this.guidelineBaseWidth * size;
33  }
34  static verticalScale(size) {
35    return (this.screenSize.height) / this.guidelineBaseHeight * size;
36  }
37  static moderateScale(size, factor = 0.5) {
38    return size + (this.scale(size) - size) * factor;
39  }
40  static actualScale(size) {
41    const inputSize = DeviceUiInfo.moderateScale(size)
42    return inputSize / this.fontScale
43  }
44}
Copy

1if (Text.defaultProps == null) Text.defaultProps = {};
2if (NBText.defaultProps == null) NBText.defaultProps = {};
3Text.defaultProps.allowFontScaling = false;
4NBText.defaultProps.allowFontScaling = false;
5TextInput.defaultProps.allowFontScaling = false
Copy