Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to set <Text> text to upper case in react native

How to set <Text> some text </Text> as upper case in react native?

<Text style={{}}> Test </Text> 

Need to show that Test as TEST.

like image 471
Thivya Avatar asked Mar 05 '16 10:03

Thivya


People also ask

How do you make text uppercase in React Native?

This is an Example to Convert Text to Upper or Lower Case in React Native. To do this we will use the string property toUpperCase() and toLowerCase() which will convert your text to Upper case and lower case respectively.

How do I change text from all to upper case?

To use a keyboard shortcut to change between lowercase, UPPERCASE, and Capitalize Each Word, select the text and press SHIFT + F3 until the case you want is applied.

How do I convert a string to lowercase in React Native?

Converting text to upper case or to lower case is pretty easy in react native. You can use JavaScript methods toLowerCase() as well as toUpperCase() on strings. The usage case of toLowerCase and toUpperCase in react native is as given below: const sentence = "Hello World!"; const toLower = sentence.


2 Answers

iOS textTransform support has been added to react-native in 0.56 version. Android textTransform support has been added in 0.59 version. It accepts one of these options:

  • none
  • uppercase
  • lowercase
  • capitalize

The actual iOS commit, Android commit and documentation

Example:

<View>   <Text style={{ textTransform: 'uppercase'}}>     This text should be uppercased.   </Text>   <Text style={{ textTransform: 'capitalize'}}>     Mixed:{' '}     <Text style={{ textTransform: 'lowercase'}}>       lowercase{' '}     </Text>   </Text> </View> 
like image 127
Black Avatar answered Nov 04 '22 04:11

Black


@Cherniv Thanks for the answer

<Text style={{}}> {'Test'.toUpperCase()} </Text> 
like image 43
Thivya Avatar answered Nov 04 '22 05:11

Thivya