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.