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:

Commencez par le composant App et les styles dans l’Expo Snack fourni et le reproducteur alternatif, puis comparez la mise en page avec et sans un lineHeight non défini par défaut sur iOS et Android. Le travail est terminé lorsqu’un Image imbriqué dans Text reste dans le conteneur parent sur les deux plateformes.