React Native Text component bug on Android with numberOfLines & textAlign properties

Question

I have Text component in react-native 0.71.3 with numberOfLines > 1 & textAlign = 'center' properties:

<View style={{flex: 1, paddingHorizontal: 10}}>
  <Text numberOfLines={2} style={{ textAlign: 'center', color: 'black' }} />
</View>

On IOS it looks with out any bugs:

But on Android text cuts off and not aligns to the center:

I have found many topics with similar issues here and on GitHub and tried many solutions like:

• Changed layout of Text and parent View components;
• Added renderToHardwareTextureAndroid property for the parent View;
• Changed value of Text component properties like: ellipsizeMode, selectable, disabled, android_hyphenationFrequency, textBreakStrategy.

But nothing works for me. This bug happens only with numberOfLines > 1 & textAlign = 'center' properties. It would be great if somebody could share an experience with working solution.

Answer 1

I found the solution for android text to set letterSpacing: 0

import { Platform } from 'react-native';

const IS_IOS = Platform.OS === 'ios';

export const App = () => {
  return (
     <View style={{flex: 1, paddingHorizontal: 10}}>
       <Text numberOfLines={2} style={{ textAlign: 'center', color: 'black', letterSpacing: IS_IOS ? 0.4 : 0 }} />
     </View>
  )
}