CODEWITHSUNDEEP
androidreactjsreact-native
Dancer
Dancer

Reputation: 17651

React Native - Text Transform issue with Android Simulator

Is there a known issue with TextTransform:'uppercase' with Android?

I'm fairly new to React native and just finished building views, all looked great in Ios but on Android - no button text displaying. After a series of trial and error I found that the issue seems to be textTransform:'uppercase', if I remove this from the stylesheet the text displays fine.

Has anyone experienced this? I cant find any information about the bug on the web.

This is my Code:

return (
  <View style={AppStyles.buttonRect} >

    <View style={AppStyles.buttonRectWrap}>

      <Image style={AppStyles.buttonRectIcon} source={this.props.buttonIcon} />

      <Text style={AppStyles.btnText}>{this.props.buttonTxt}</Text>
    </View >
  </View>
);

with a style of :

btnText:{
color:'#fff',
marginRight:14,
marginLeft:10,
fontSize:20,
alignSelf: 'center',
marginTop:-3,
textTransform:'uppercase',
},

which results in -

enter image description here

If I remove the transform line:

enter image description here

I've tried with several simulators and get the same error.

Upvotes: 2

Views: 2174

Answers (4)

Gilson Viana
Gilson Viana

Reputation: 852

The workaround this issue I found was to create a component that renders the props.children and chain the .toUpperCase method.

react-native text-transform uppercase

Upvotes: 0

Ghazi M
Ghazi M

Reputation: 61

I'm facing the same issue with react native version 0.58.5, this seems to be a well known bug. Try using normal JS to capitalize strings for now:

capitalizeString = (text: string) => typeof text === 'string' && text.length > 0 && ${text[0].toUpperCase()}${text.slice(1)}

capitalizeString('mystring')

or just: string.toUpperCase();

ref: https://github.com/facebook/react-native/issues/21966

Upvotes: 1

Nunchucks
Nunchucks

Reputation: 1230

There is a known issue. Basically using textTransform breaks text styling for android. Even textTransform: none will break your styling. Issue link: https://github.com/facebook/react-native/issues/21966

Upvotes: 1

Chris Stillwell
Chris Stillwell

Reputation: 10547

This is currently a bug with React Native. A fix appears to be in 0.59.0 release, since the 0.59.0 release candidates don't contain the bug. Source: https://github.com/facebook/react-native/issues/21966

Upvotes: 2

Related Questions