[0.57.1][IOS] Nested Image will overlap the text if lineHeight is smaller than the image height.

[tikkichan4]

• Review the documentation: https://facebook.github.io/react-native
• Search for existing issues: https://github.com/facebook/react-native/issues
• Use the latest React Native release: https://github.com/facebook/react-native/releases

Environment

React Native Environment Info:
System:
OS: macOS High Sierra 10.13.4
CPU: x64 Intel(R) Core(TM) i7-4578U CPU @ 3.00GHz
Memory: 17.04 MB / 16.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 8.9.3 - /usr/local/bin/node
Yarn: 1.9.2 - /usr/local/bin/yarn
npm: 6.4.1 - /usr/local/bin/npm
SDKs:
iOS SDK:
Platforms: iOS 11.4, macOS 10.13, tvOS 11.4, watchOS 4.3
Android SDK:
Build Tools: 23.0.1, 23.0.2, 23.0.3, 25.0.0, 25.0.1, 25.0.2, 25.0.3, 26.0.1, 26.0.2, 26.0.3, 27.0.0, 27.0.2, 27.0.3
API Levels: 23, 25, 26, 27
IDEs:
Android Studio: 3.0 AI-171.4443003
Xcode: 9.4.1/9F2000 - /usr/bin/xcodebuild
npmPackages:
react: ^16.5.0 => 16.5.0
react-native: ^0.57.1 => 0.57.1
npmGlobalPackages:
create-react-native-app: 1.0.0
react-native-cli: 2.0.1

Description

Expected Result - lineHeight should be adjusted to image height because image height is actually larger than the lineHeight value.

Actual Result - lineHeight is still 20 even the image height is larger than its value. So the image is overlap the text.

This problem actually occurred after rewriting the Text component.
The old version of Text component actually implement the correct logic which can be see in :

    if (heightOfTallestSubview > lineHeight) {
      lineHeight = ceilf(heightOfTallestSubview);

https://github.com/facebook/react-native/blob/486dbe4e8f4e3710c258e22af00b2aa7155ef2f3/Libraries/Text/RCTShadowText.m

Reproducible Demo

import {Image, StyleSheet, Text, View} from 'react-native';
export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.text}>
          1234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890
          <Image
            resizeMode="contain"
            source={{uri: 'http://via.placeholder.com/65x94'}}
            style={{width: 65, height: 94}}
          />
        </Text>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  text: {
    backgroundColor: 'pink',
    lineHeight: 20,
    flexWrap: 'wrap'
  }
});

[wenkangzhou]

0.56.0 has same issue.

[tikkichan4]

Any workaround ? It is really important to me....

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as "For Discussion" or "Good first issue" and I will leave it open. Thank you for your contributions.

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[stale]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.