Repository navigation
Image nested In Text with lineHeight specified overflows container #48727
Description
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 fixedheightand/orlineHeight - Wrapping the Image in another
<Text>with a fixedheightand/orlineHeight - Wrapping the image in another
<Text>with lineHeight set toundefinedornull
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:
Activity
react-native-bot commentedon Jan 16, 2025
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 commentedon Jan 16, 2025
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 commentedon Jan 20, 2025
I also tried reproducing this issue it is happening on both the platforms, looks like a valid issue
migueldaipre commentedon Jan 21, 2025
The same issue applies to the
Viewcomponent. As we can see in this reproducer. (Android only - new and old architecture.)rodriguescarson commentedon Jan 28, 2025
Fixed the issue
#48994
JASIM0021 commentedon May 1, 2025
Any update on this