Open
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 fixedheight
and/orlineHeight
- Wrapping the Image in another
<Text>
with a fixedheight
and/orlineHeight
- Wrapping the image in another
<Text>
with lineHeight set toundefined
ornull
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:
