Text when there is only one line on Android

[bashen1]

React Native version:

React Native Environment Info:
    System:
    OS: macOS 10.14.6
    CPU: (4) x64 Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz
    Memory: 123.38 MB / 8.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 12.5.0 - /usr/local/bin/node
    Yarn: 1.13.0 - /usr/local/bin/yarn
    npm: 6.10.3 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 12.4, macOS 10.14, tvOS 12.4, watchOS 5.3
    Android SDK:
      API Levels: 22, 23, 24, 25, 26, 27, 28
      Build Tools: 24.0.1, 25.0.2, 27.0.3, 28.0.2, 28.0.3, 29.0.0
  IDEs:
    Xcode: 10.3/10G8 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.8.6 => 16.8.6 
    react-native: 0.60.5 => 0.60.5 
  npmGlobalPackages:
    react-native-cli: 2.0.1
    react-native-create-library: 3.1.2
    react-native-git-upgrade: 0.2.7

Steps To Reproduce

Just add punctuation or change the color of the font. Under Android, there will be a BUG in the current situation.

Describe what you expected to happen:

Snack, code example, screenshot, or link to a repository:

<View style={{borderWidth: 1, borderColor: '#FF6600', marginVertical: 5}}>
    <Text style={{fontSize: 14, lineHeight: 20}}>
        <Text style={{color: '#617095'}}>我</Text>
        <Text style={{color: '#353535'}}>:&nbsp;的</Text>
    </Text>
</View>
<View style={{borderWidth: 1, borderColor: '#FF6600', marginVertical: 5}}>
    <Text style={{fontSize: 14, lineHeight: 20}}>
        <Text style={{color: '#617095'}}>我</Text>
        <Text style={{color: '#353535'}}>：&nbsp;的</Text>
    </Text>
</View>
<View style={{borderWidth: 1, borderColor: '#FF6600', marginVertical: 5}}>
    <Text style={{fontSize: 14, lineHeight: 20}}>
        <Text style={{color: '#617095'}}>我</Text>
        <Text style={{color: '#ED0000'}}>:&nbsp;的</Text>
    </Text>
</View>
<View style={{borderWidth: 1, borderColor: '#FF6600', marginVertical: 5}}>
    <Text style={{fontSize: 14, lineHeight: 20}}>
        <Text style={{color: '#617095'}}>我</Text>
        <Text style={{color: '#617095'}}>:&nbsp;的</Text>
    </Text>
</View>

[react-native-bot]

It looks like you are using an older version of React Native. Please update to the latest release, v0.60 and verify if the issue still exists.

The "Resolution: Old Version" label will be removed automatically once you edit your original post with the results of running `react-native info` on a project using the latest release.

[RobinCsl]

Hello @bashen1 👋

I could reproduce your issue on Android in this Expo Snack: https://snack.expo.io/@robincsl/e378d4 and using the emulator provided by Appetize.io through Expo Snack.

On a fresh npx react-native init MyAwesomeApp or npx expo init MyAwesomeApp (with "blank" template), I could not reproduce it with my Android emulator under API version 28 (Android 9). This is what it looks like:

But, on my emulator under API version 27 (Android 8.1), I can observe the same issue you're reporting. This is what it looks like:

I'm not much of an Android expert, so someone else would have to jump in, but it looks related to the Android API version. Maybe @ferrannp would know something about that?

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[stale]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.