Image nested In Text with lineHeight specified overflows container

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:

先从所提供的 Expo Snack 和替代复现环境中的 App 组件与样式开始，然后比较 iOS 和 Android 上未指定 lineHeight 与指定非默认 lineHeight 时的布局。当嵌套在 Text 中的 Image 在两个平台上都保持在父容器内时，即表示完成。