Make Responsive React Native Text for any device

As we faced problems related to text responsiveness in a way that sometimes it looks bigger on low end devices and smaller on modern devices. What we want is to achieve accurate and fit text size with respect to every device.

Text on Low End Device

Text on Modern Device

As we can see text is fit and adjusted with all the device sizes.

How to achieve

Firstly import PixelRatio from react-native

import { PixelRatio } from ‘react-native’;

Then we have to get device Font scale and then divide some font size number by font scale.

const fontScale = PixelRatio.getFontScale();
const getFontSize = size => size / fontScale;

Then just use this like below

<Text style={{ fontSize: getFontSize(12) }}>
    Some Text Here
</Text>

By doing this, you’ll get responsive text in all the device sizes.

You can also check the responsiveness of app below which I created

https://play.google.com/store/apps/details?id=com.techbuzz.notepad

If it helped you then don’t forget to clap :)