CODEWITHSUNDEEP
reactjsreact-nativeresponsivefont-sizedimensions
elle kay
elle kay

Reputation: 349

How to make font-size responsive in react native

How to change the font-size according to the view since flex-box doesn't allow changing its font-size in percent. I tried using dimension but that did not work.

Upvotes: 0

Views: 8177

Answers (1)

Tim
Tim

Reputation: 10719

You could scale your fontSize with this code snippet: 

SCREEN_WIDTH = Dimensions.get('window').width; // get current width
SCALE = 375; // constant, 375 is standard width of  iphone 6 / 7 / 8 

const scaleFontSize = (fontSize) => {
    const ratio = fontSize / SCALE; // get ratio based on your standard scale 
    const newSize = Math.round(ratio * SCREEN_WIDTH);
    return newSize; 
}

Now you can call scaleFontSize with your standard fontSize and it will automatically be scaled.

Upvotes: 8

Related Questions