7

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;
devedv
  • 562
  • 2
  • 15
  • 45
  • 1
    Sorry but why you have voted it down? It seems to be a genuine issue. – devedv Feb 09 '18 at 15:31
  • 5
    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 Feb 09 '18 at 15:39
  • 2
    Possible duplicate of [React Native Responsive Font Size](https://stackoverflow.com/questions/33628677/react-native-responsive-font-size) – Travis White Feb 09 '18 at 15:40
  • Thank you Travis. I've added below what worked for me. – devedv Feb 12 '18 at 13:40

1 Answers1

3

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

 <Text allowFontScaling={false}  style={styles.TitleText}>
           {this.state.testLabel.toUpperCase()}
            </Text>
devedv
  • 562
  • 2
  • 15
  • 45
  • 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? – Madhavi Jayasinghe Dec 17 '18 at 11:33