React Native font size differs on Xcode/Simulator vs physical device

Question

I have been having trouble getting my React Native app layout to look the same on a physical iPhone 11 Pro as it does on an iOS simulator of an iPhone 11 Pro. Specifically the issue is with text rendering. It seems like the font size is simply not the same on the two.

Xcode and Simulator are version 11.7, and iOS 13.7 is on both the phone and the simulator. React Native is version 0.61.5.

Since I can't share the entire screen I have cropped to the relevant area. I have left part of the adjacent graphics in to indicate the dimensions of the space.

iPhone 11 Pro simulator rendering:

iPhone 11 Pro device rendering:

RN View:

    <View style={styles.container}>
      <Image source={require('./assets/tophalf.jpg')}
          style={{width: '100%', height: '50%'}}
          imageStyle={{resizeMode: 'contain'}} />
      <View style={styles.container2}>
      <View style={{flex:1}} />
      <View style={{flex:8}}>
          <View style={{flex:4, alignSelf:'center', width: '85%'}}>
            <Text style={styles.aboutfont}>{loremtext}</Text>
          </View>
          <View style={{flex:2}}>
            <Image source={require('./assets/blob.png')}
                  style={{flex:1, width:'50%', height:'50%', alignSelf: 'flex-end'}}
                  resizeMode="contain" />
          </View>
          <View style={{flex:1}} />
        </View>
      </View>
      <Image source={require('./assets/middlebox.png')}
        style={{position:'absolute', alignItems: 'center',
                width:100, height:100,
                borderWidth:1, borderColor:'#eeeeee', borderRadius:5,
                aspectRatio:1}}
      />
    </View>

And the style elements:

  container: {
    flex: 1,
    backgroundColor: '#ffffff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  container2: {
    flex: 1,
    backgroundColor: 'white',
    justifyContent: 'space-around',
  },
  aboutfont: {
    fontSize: 14,
    fontFamily: Platform.OS === 'ios' ? 'Futura' : 'Roboto',
    color: 'black',
    textAlign: 'center',
  },

Any help would be appreciated. I don't know enough to say if this is a React Native issue specifically or something with Xcode/Simulator.

Answer 1

my first intuition is that you probably have different settings for text size and/or display zoom on your physical device and your simulator. React Native's Text Component is smart enough to scale with the users' settings, both on iOS and Android.

Try checking the values in Settings > Display & Brightness > Text Size and in Settings > Display & Brightness > Display Zoom > View

Hope that solves your problem!

Answer 2

Thanks a lot @Jaakko that was the case for me as well,

however you can fix that by setting the property of the text

<Text .... allowFontScaling ={false}></Text>

to keep its size standard

or

<Text .... maxFontSizeMultiplier={number} minimumFontScale={number} ></Text>

to only allow certain range of scaling that doesn't break your design.

Happy Coding To All.