Image nested in Text only show half content part on Android.

Please provide all the information requested. Issues that do not follow this format are likely to stall.

Description

When an Image is nested in Text, only half part content would be showed on android.

React Native version:

Run react-native info in your terminal and copy the results here.

info
  React Native Environment Info:
    System:
      OS: macOS 10.15.5
      CPU: (4) x64 Intel(R) Core(TM) i5-4278U CPU @ 2.60GHz
      Memory: 30.19 MB / 8.00 GB
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 8.3.0 - ~/.nvm/versions/node/v8.3.0/bin/node
      Yarn: 1.22.4 - ~/.nvm/versions/node/v8.3.0/bin/yarn
      npm: 6.8.0 - ~/.nvm/versions/node/v8.3.0/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 13.5, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
      Android SDK:
        API Levels: 23, 24, 25, 26, 27, 28
        Build Tools: 23.0.1, 24.0.1, 25.0.0, 26.0.1, 26.0.2, 26.0.3, 27.0.1, 27.0.3, 28.0.3
        System Images: android-27 | Intel x86 Atom_64, android-28 | Google APIs Intel x86 Atom
    IDEs:
      Android Studio: 3.2 AI-181.5540.7.32.5056338
      Xcode: 11.5/11E608c - /usr/bin/xcodebuild
    npmPackages:
      react: ^16.10.2 => 16.10.2
      react-native: ^0.59.10 => 0.59.10
    npmGlobalPackages:
      create-react-native-module: 0.19.0
      react-native-cli: 2.0.1

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

1. put a <Image/> inside <Text/> component
2. run on android

Expected Results

Image would show full content.

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

render() {
    const uri = 'https://cdn.sspai.com//2020/08/01/f91d9770d0d5d2bb270fa9340384a274.png?imageView2/2/w/1120/q/90/interlace/1/ignore-error/1'
    const width = Dimensions.get('window').width
    const height = width * 0.6231481481481481 // h/w ratio of the example image

    return (<Text style={{ width, height, backgroundColor:'blue', }}>
            <Image source={{uri}} style={{
                width,
                height,
                resizeMode: 'contain',
            }}/>
            </Text>
           )
}

Extra

Everything is fine on iOS, this issue only occurs on Android.

[pperron]

I had the same issue, getting only half of my image. To solve my issue, I set a fontSize big enough to handle my image. My image was 100x100, so I gave <Text> a fontSize:150 and it display my image ok on Android. I did a condition to handle IOS and Android differently since IOS working fine without any fontsize.

Hope it can help someone else 😉

[keane032]

same