-
Notifications
You must be signed in to change notification settings - Fork 110
Open
Labels
Description
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>
