Image nested In Text with lineHeight specified overflows container

[tomkelsey]

Description

An <Image> nested within <Text> with a lineHeight specified causes the image to overflow the parent container.

Workarounds attempted:

• Specifying a fixed height on the image
• Wrapping the image in a <View> with a fixed height and/or lineHeight
• Wrapping the Image in another <Text> with a fixed height and/or lineHeight
• Wrapping the image in another <Text> with lineHeight set to undefined or null

Expected behaviour:

To be able to nest images in Text with a non-default lineHeight.

(Please let me know if any more details are required for this issue. Thanks!)

Steps to reproduce

Please see expo snack.

Code below:

export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.box}>
        <Text style={styles.text}>
          Hello
          <Image style={styles.image} source={require('./assets/snack-icon.png')} />
        </Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  box: {
    backgroundColor: 'red',
  },
  text: {
    backgroundColor: 'blue',
    // lineHeight: 20,
  },
  image: {
    height: 300,
  }
});

React Native Version

0.76.0

Affected Platforms

Runtime - iOS, Runtime - Android

Output of npx react-native info

Please see expo snack.

Stacktrace or Logs

N/A

Reproducer

https://snack.expo.dev/@tomkelsey/image-nested-in-text-lineheight-bug

Alternative reproducer:
https://github.com/OzymandiasTheGreat/rn-view-in-text-bug

Screenshots and Videos

Without lineHeight specified:

With lineHeight specified:

[react-native-bot]

Warning

Could not parse version: We could not find or parse the version number of React Native in your issue report. Please use the template, and report your version including major, minor, and patch numbers - e.g. 0.76.2.

[react-native-bot]

Warning

Could not parse version: We could not find or parse the version number of React Native in your issue report. Please use the template, and report your version including major, minor, and patch numbers - e.g. 0.76.2.

[devanshsaini11]

I also tried reproducing this issue it is happening on both the platforms, looks like a valid issue

[migueldaipre]

The same issue applies to the View component. As we can see in this reproducer. (Android only - new and old architecture.)