Skip to content

iOSUIKit will cut the bottom of Text if contains Chinese characters #29

@peteroid

Description

@peteroid

The bottom of texts seem to be cut out on Android using iOSUIKit if the texts contain Chinese characters. You may refer to the part A of the screenshot.

I have also tested out with different line heights to get workaround. You may refer to part B for the result.

Environment

  • One plus 6T / Android 9
  • react-native: 0.59.5
  • react-native-typography: 1.4.0

Here is my code for the screenshot.

          <View style={{ marginBottom: 20 }}>
            {/* Part A */}
            <Text style={{ color: '#000' }}>{'Android使用\nnone style (Mg排版)'}</Text>
            <Text style={[material.title]}>{'Android使用\nmaterial.title (Mg排版)'}</Text>
            <Text style={[iOSUIKit.title3, {  }]}>{'Android使用\niOSUIKit.title3 (Mg排版)'}</Text>
            <Text style={[iOSUIKit.body, {  }]}>{'Android使用\niOSUIKit.body (Mg排版)'}</Text>
            <Text style={[iOSUIKit.callout, {  }]}>{'Android使用\niOSUIKit.callout (Mg排版)'}</Text>
            <Text style={[iOSUIKit.subhead, {  }]}>{'Android使用\niOSUIKit.subhead (Mg排版)'}</Text>
            <Text style={[iOSUIKit.footnote, {  }]}>{'Android使用\niOSUIKit.footnote (Mg排版)'}</Text>
            <Text style={[iOSUIKit.caption2, {  }]}>{'Android使用\niOSUIKit.caption2 (Mg排版)'}</Text>
          </View>
          <View>
            {/* Part B */}
            <Text style={{ color: '#000' }}>{'Android使用\nnone style (Mg排版)'}</Text>
            <Text style={[material.title]}>{'Android使用\nmaterial.title (Mg排版)'}</Text>
            <Text style={[iOSUIKit.title3, { lineHeight: iOSUIKit.title3.lineHeight + 2 }]}>{'Android使用\niOSUIKit.title3 (Mg排版)'}</Text>
            <Text style={[iOSUIKit.body, { lineHeight: iOSUIKit.body.lineHeight + 1 }]}>{'Android使用\niOSUIKit.body (Mg排版)'}</Text>
            <Text style={[iOSUIKit.callout, { lineHeight: iOSUIKit.callout.lineHeight + 1 }]}>{'Android使用\niOSUIKit.callout (Mg排版)'}</Text>
            <Text style={[iOSUIKit.subhead, { lineHeight: iOSUIKit.subhead.lineHeight + 1 }]}>{'Android使用\niOSUIKit.subhead (Mg排版)'}</Text>
            <Text style={[iOSUIKit.footnote, { lineHeight: iOSUIKit.footnote.lineHeight + 1 }]}>{'Android使用\niOSUIKit.footnote (Mg排版)'}</Text>
            <Text style={[iOSUIKit.caption2, { lineHeight: iOSUIKit.caption2.lineHeight + 2 }]}>{'Android使用\niOSUIKit.caption2 (Mg排版)'}</Text>
          </View>

Screenshot_20190429-105823

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions