React Native responsive font-size - react-native

Question

I am writing react-native app. The font size should be dynamically changed based on the screen resolution. Is there any approach to achieve this? In web world I am using rem values but in this case is not possible.
To get some help? It's very important.

Answer 1

You can create some helper function that will update the font size based on the device screen size using the standard device width and height as base to resize from. Or use this library https://www.npmjs.com/package/react-native-responsive-fontsize which is doing something similar.
import {Dimensions} from 'react-native';
const screenWidth = Dimensions.get('window').width;
const screenHeight = Dimensions.get('window').height;
const GuidelineBaseHeight = 844;
const GuidelineBaseWidth = 390;
const verticalScale = (size, floor = true, setMax = false) => {
size = parseFloat(size);
let result = Dimensions.common.WINDOW_HEIGHT / GuidelineBaseHeight * size;
let newSize = floor ? Math.floor(result) : result;
return setMax && newSize > size ? size : newSize;
};
const horizontalScale = (size, floor = true, setMax = false) => {
size = parseFloat(size);
let result = Dimensions.common.WINDOW_WIDTH / GuidelineBaseWidth * size;
let newSize = floor ? Math.floor(result) : result;
return setMax && newSize > size ? size : newSize;
};
export {verticalScale, horizontalScale};
<Text fontSize={verticalScale(14)} />
Also, you can create your Text component which will wrap React's text component and apply the vertical scale to the font size style.