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

React NativeUppercase

React Native Problem Overview

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

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

Need to show that Test as TEST.

React Native Solutions

Solution 1 - React Native

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: This text should be uppercased. Mixed:{' '} lowercase{' '}

Solution 2 - React Native

@Cherniv Thanks for the answer

<Text style={{}}> {'Test'.toUpperCase()} </Text>

Solution 3 - React Native

use text transform property in your style tag

textTransform:'uppercase'

Solution 4 - React Native

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>

Solution 5 - React Native

use Test

Solution 6 - React Native

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;
Categories
Recommended React Native Solutions
Recommended Uppercase Solutions

Previous Solution:

kubernetes list all running pods name

Kubernetes

Next Solution:

How can I change Sourcetree theme?

ThemesAtlassian Sourcetree

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionThivyaView Question on Stackoverflow
Solution 1 - React NativeBlackView Answer on Stackoverflow
Solution 2 - React NativeThivyaView Answer on Stackoverflow
Solution 3 - React NativebismaView Answer on Stackoverflow
Solution 4 - React NativeNajathiView Answer on Stackoverflow
Solution 5 - React Nativevishal SharmaView Answer on Stackoverflow
Solution 6 - React NativeyAnGwAwAView Answer on Stackoverflow