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

[jacoolee]

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.

[github-actions]

⚠️	Using Old Version
ℹ️	It looks like you are using an older version of React Native. Please upgrade to the latest version, and verify if the issue persists. If it does not, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the current release.

[chrisglein]

Created a Snack for this: https://snack.expo.io/@chrisglein/repro29559
Repros as you say on Android, but not on iOS or Web, where the image fills the text dimensions:

[chrisglein]

Tried hosting inside a View instead of Text and there on Android it shows the same size as the parent container. So does seem to be related to Text hosting.

[jacoolee]

Tried hosting inside a View instead of Text and there on Android it shows the same size as the parent container. So does seem to be related to Text hosting.

Yep, <View><Image/></View> works well.

[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.

[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 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

[github-actions]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions]

This issue was closed because it has been stalled for 7 days with no activity.

[fabOnReact]

@jacoolee Do you still experience this issue? If yes, I will publish the fix in the react-native-improved package https://github.com/fabriziobertoglio1987/react-native-improved. Thanks a lot