113

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

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

Need to show that Test as TEST.

Penny Liu
  • 15,447
  • 5
  • 79
  • 98
Thivya
  • 2,922
  • 4
  • 17
  • 20

8 Answers8

189

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>
Black
  • 9,541
  • 3
  • 54
  • 54
118

@Cherniv Thanks for the answer

<Text style={{}}> {'Test'.toUpperCase()} </Text>
Thivya
  • 2,922
  • 4
  • 17
  • 20
  • 6
    This is not really a solution. What if I want to animate text to uppercase? – Michal Aug 04 '17 at 19:32
  • 19
    @Michal what would text animation to upper case look like, it sounds like a super cool effect I just can't imagine it right now. – Noitidart Nov 01 '17 at 16:04
  • 2
    @Michal Use [Lottie](https://github.com/airbnb/lottie-react-native) to do cool animations, even with text. You can create custom animations via Adobe After Effects, [Example](https://raw.githubusercontent.com/airbnb/lottie-react-native/master/docs/gifs/Example4.gif). – Yeshan Jay Feb 16 '18 at 09:02
  • 7
    This is not correct answer anymore. There is default style in React Native for text transformation. Please check my answer bellow. – Black Apr 09 '19 at 12:43
  • It works only with hardcoded text. But in my options text taken from api with {} doesn't works. – jE Droid Feb 21 '22 at 16:45
  • That should work well {link} – jE Droid Feb 21 '22 at 16:46
20

use text transform property in your style tag

textTransform:'uppercase'
Bisma Azher
  • 689
  • 8
  • 9
6

React Native .toUpperCase() function works fine in a string but if you used the numbers or other non-string data types, it doesn't work. The error will have occurred.

Below Two are string properties: 

<Text>{props.complexity.toUpperCase()}</Text>

<Text>{props.affordability.toUpperCase()}</Text>
Najathi
  • 2,529
  • 24
  • 23
3

There are 2 ways to make text to uppercase in React Native

1. use textTransform in styles of text to change the text in uppercase

e.g

<Text style={{ textTransform: 'uppercase'}}>
    Some text
 </Text>

textTransform may have following 4 possible value

  • none (default)
  • uppercase
  • lowercase
  • capitalize

2. you can also make text to upper or lower case by using Javascript's method i.e .toUpperCase() and .toLowerCase() to do so

e.g

<Text>{'Some text'.toUpperCase()}</Text>
راجہ مخلص
  • 1,177
  • 6
  • 15
1

use <Text style={{textTransform: 'uppercase'}}>Test

vishal Sharma
  • 21
  • 2
0

I am using "` `" and "${}" referenced to the variable, this is will turn it to the string, after that by using .toUppercase() function.

`${todo.title}`.toUppercase() }

For example:

import React from 'react';

const Todo = ({ todo }) => {
    console.log("DEBUG:<components/todo.js>:",todo)
    return (
        <article className="Todo" style={{ backgroundColor: todo.completed ? 'aqua' : '#f9a1a1' }}>
            <div className="Todo-info">
                <h3>{ typeof todo.title === "string" && `${todo.title}`.toUpperCase() }</h3>
            </div>
        </article>
    );
};

export default Todo;
yAnGwAwA
  • 89
  • 1
  • 6
0
<Text style={{}}> {'Test'.toUpperCase()} </Text>

you can right this field in react-native

Ai9398
  • 33
  • 5