Adjust font size based on screen size of smartphone React native

Question

Hey guys im using const {width,height} = Dimensions.get('window'); to adjust my font based on screen width size. using like this....

fontSize:width/24

its looks good in iPhone and android device like 5.5 inch device but in my Galaxy s9 it looks horrible I want to set my font based on screen which can be adjust by itself.. how can I do it

I think this library is the best option for scaling https://github.com/vitalets/react-native-extended-stylesheet — Nima, Oct 23 '18 at 05:35
one option is to use `rem` or `em` instead of px for your font-size — Raymond Tey, Oct 23 '18 at 05:53

score 0 · Answer 1 · answered Oct 23 '18 at 05:47

0

Then the best option is to use vmax and vmin units.

vmin: 1/100th of the smallest side, vmax: 1/100th of the largest side

take a look at it here

answered Oct 23 '18 at 05:47

Dulara Malindu

1,477
4
18
37

Victor · Answer 2 · 2018-10-23T06:38:12.527

Use a responsive ilibrary like this that will handle things better.

react-native-size-matters

Eg:

import { scale, verticalScale, moderateScale } from 'react-native-size-matters';

const Component = props =>
    <View style={{
        width: scale(30),
        height: verticalScale(50),
        padding: moderateScale(5)
    }}/>;

Thus things will look better in all devices. Use verticalScale for defining things relative to height of the device. scale can be used for normal things .. then there is a custom option moderateScale where u can manually define the scaling ratio as well.

For more details refer : Scaling React Native apps

PS: there are other options as well where u can manually define a custom class to get the PixelRatio and everything. but this is a straight forward approach.

Refer PixelRatio Approach

how can I use this PixelRatio.get() to implement based on there screen size — Tanveerbyn, Oct 23 '18 at 06:03
something like this: https://stackoverflow.com/questions/33628677/react-native-responsive-font-size — Victor, Oct 23 '18 at 06:05

score 0 · Answer 3 · answered Apr 05 '20 at 11:44

In order to get access to the device's pixel density and font scale, you can benefit from PixelRatio according to the docs.

As indicated in the docs, PixelRatio.get() provides you with the device pixel density:

var dynamic_fontSize = 20;
if(PixelRatio.get() === 1) {  // mdpi Android devices
    dynamic_fontSize = 12; 
} else if(PixelRatio.get() === 1.5) {  // hdpi Android devices
    ... 
}
else { ...

Another idea is to make use of the layout size using roundToNearestPixel(). Let's imagine you want to adjust the size of an element to take over 98% of the screen’s width in dp and 10% of the screen’s height in dp:

export const widthPercentageToDP = widthPercent => {
  const screenWidth = Dimensions.get('window').width;
  // Convert string input to decimal number
  const elemWidth = parseFloat(widthPercent);  
  return PixelRatio.roundToNearestPixel(screenWidth * elemWidth / 100);
};

export const heightPercentageToDP = heightPercent => {
  const screenHeight = Dimensions.get('window').height;
  // Convert string input to decimal number
  const elemHeight = parseFloat(heightPercent); 
  return PixelRatio.roundToNearestPixel(screenHeight * elemHeight / 100);
};

This thread provides you with a clear example: https://stackoverflow.com/a/35074379/4687359

Adjust font size based on screen size of smartphone React native

3 Answers3