Font Size React native

Question

In react native app whats the best way to deal with font size.

I've a kind of weird issue, if font size is increased from mobile device display settings it changes the fontSize of app as well. I have used fontSize:14(whatever value), so it picks the size 14 according to mobile device font size & the font size of entire app get increased and UI looks horrible.

I've also tried to adjust the fontSize using width and height but it also not looks good on all devices.

const WIDTH = Dimensions.get('window').width; const HEIGHT = Dimensions.get('window').height;

Sorry but why you have voted it down? It seems to be a genuine issue. — devedv
– devedv, Commented Feb 9, 2018 at 15:31
What you're asking to do is effectively ignore accessibility options on a device and fix the font size so you don't have to worry about your UI enlarging. Larger font sizes are controllable from the device for vision impaired individuals and your UI should respect those settings. — ajthyng
– ajthyng, Commented Feb 9, 2018 at 15:39

devedv · Accepted Answer · 2018-02-12 13:42:02Z

3

Adding allowFontScaling={false} to Text ignores the device font scaling.

 <Text allowFontScaling={false} style={styles.TitleText}> {this.state.testLabel.toUpperCase()} </Text>

answered Feb 12, 2018 at 13:42

devedv

6323 gold badges20 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Madhavi Jayasinghe Over a year ago

I used React-Native-Snackbar for display error messages. The font of snackbar is not fixed though I used 'allowFontScaling={false}'. Is there a way to fix the font size of snackbar as well?

Collectives™ on Stack Overflow

Font Size React native

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related