How to make font-size responsive in react native

Question

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.

Fix some spacing.

rlandster
– rlandster

2018-03-28 12:09:57 +00:00
Commented Mar 28, 2018 at 12:09 — rlandster
– rlandster, Commented Mar 28, 2018 at 12:09

Tim · Accepted Answer · 2018-03-28 10:33:17Z

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.

can we change the fontsize according to the size of the view
If you know the width of your view, you can replace the SCREEN_WIDTH with your view width. From Dimensions you can't get the width of a specific view.
You can use the measure function to get the component width, however you must use ref which gets attached after the initial render. facebook.github.io/react-native/docs/…

Collectives™ on Stack Overflow

How to make font-size responsive in react native

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related