React-native: Setting text contains combination of Chinese and English with `lineHeight` style cause characters not on same baseline

[EvianZhow]

• [x] I have reviewed the documentation
• [x] I have searched existing issues
• [x] I am using the latest React Native version

Environment

Environment:
OS: macOS High Sierra 10.13.4
Node: 10.0.0
Yarn: 1.6.0
npm: 6.0.0
Watchman: 4.9.0
Xcode: Xcode 9.3 Build version 9E145
Android Studio: 3.1 AI-173.4720617

Packages: (wanted => installed)
react: 16.3.1 => 16.3.1
react-native: ~0.55.2 => 0.55.3

Steps to Reproduce

https://snack.expo.io/rkOLGklCG

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text
          style={styles.text}
          numberOfLines={2}>
          这里是中文 This is English 1234567890 这里是数字 This is numbers 123456789
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    maxWidth: '80%',
    fontSize: 17,
    color: '#4e4e4e',
    lineHeight: 24,
  },
});

Expected Behavior

I migrated my app from 0.52.3 and previous version works fine. All characters are on one baseline.

There's the screenshot.

Please note that I took this screenshot without lineHeight style applied, so the expected behavior should render larger line spacing.

Actual Behavior

Chinese characters on one baseline, while English and numbers on another.

There's the screenshot.

And seems the problem only affects the iOS.

[keech]

Any updates?

[joseph2002]

Any updates?

[markymc]

+1 I'm seeing this too on:

"react": "16.3.1",
"react-native": "~0.55.2",

e.g. (same styles except color):

[yusuke-nozoe]

+1 I'm seeing this too on:

 "react": "16.3.1",                                                                                                 
 "react-native": "0.55.4",  

[kgdev]

+1

[lynnic26]

Any updates?
---------------updates
I found a solution for this issue in iOS
set fontFamily: 'PingFang FC' in stylesheet will fix it
This issue may be caused by Chinese character and English are using different font family by default in iOS

[kaixiniOSTT]

@lynnic26 thank you for your wonder solution . other detail as below:
苹方-简 常规体 : PingFangSC-Regular
苹方-简 极细体 :PingFangSC-Ultralight
苹方-简 细体 : PingFangSC-Light
苹方-简 纤细体 :PingFangSC-Thin
苹方-简 中黑体 :PingFangSC-Medium
苹方-简 中粗体 : PingFangSC-Semibold

[GuoZhiQiang]

Great job ! @kaixiniOSTT

[januslo]

Any updates?
---------------updates
I found a solution for this issue in iOS
set fontFamily: 'PingFang FC' in stylesheet will fix it
This issue may be caused by Chinese character and English are using different font family by default in iOS

I found a hack for this workaround:
In App.js of my application:

constructor(props){
// ... super() and init state

if(Platform.OS == 'ios'){
            let oldRender = Text.render;
            Text.render = function (...args) {
                let origin = oldRender.call(this, ...args);
                return React.cloneElement(origin, {
                    style: [{fontFamily: 'PingFangSC-Regular'},origin.props.style]
                });
            };
        }
}

Replacing the render method of the Text make things works.

[Shangyunliang]

+1