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:

Bắt đầu với component App và các style trong Expo Snack được cung cấp cũng như trình tái hiện thay thế, sau đó so sánh layout khi có và không có lineHeight khác mặc định trên iOS và Android. Hoàn thành khi một Image được lồng trong Text vẫn nằm trong container cha trên cả hai nền tảng.