Android Screen zoom setting ruins React Native app arrangement

Question

My react native app looks out of scale if you increase "screen zoom" and font size in adroid settings. Though I use 'react-native-responsive-dimensions' library for every scale in the app, and I have

allowFontScaling={true} numberOfLines={1} adjustsFontSizeToFit={true}

for the main view of the app. if the font style and/or screen zoom are increased, the scale of the app is ruind. I'll add a bit of code used and side by side photos of a phone with and without enlarged settings.

<ImageBackground source={image} style={styles.container} allowFontScaling={true} numberOfLines={1} adjustsFontSizeToFit={true} >
          <ScrollView contentContainerStyle={styles.scrollContent}>
          <StatusBar barStyle="light-content" backgroundColor="transparent" translucent={true} />
          <TouchableOpacity style={styles.settingsButton} onPress=
          {goToSettings}>
            <Image 
            source={require('./assets/settingsButton.png')} 
            style={{ width: responsiveWidth(6.5), 
            height: responsiveHeight(6.5)}}
            resizeMode='contain'
            />
          </TouchableOpacity>
          <Text style={[styles.upperText, { color: textColour }]}>Right now in {place}, {country}</Text>
          {weather && weather.current ? (
            <Text allowFontScaling={false} numberOfLines={1} adjustsFontSizeToFit={true} style={[styles.text, {color: textColour}]}>{Math.round(unit ? weather.current.temp_c : weather.current.temp_f )}°{unit ? 'C' : 'F'}</Text>

Answer 1

I solved it. The problem wasn't the font size or screen zoom, but setting the font as 'Bold font' the the android settings. The solution was to create the text component with a manual setting as fontWeight: 'normal'

import { Text as RNText };
const Text = ({ style, ...props }) => {
  return (
    <RNText style={[{ fontWeight: 'normal' }, style]} allowFontScaling={false} {...props} />
  );
};