Is it possible to capitalize first letter of text/string in react native? How to do it?

Question

I have to capitalize first letter of text that i want to display. I searched for it but i cant found clear thing to do that, also there is no such props for text in react native official documentation.

I am showing my text with following format:

<Text style={styles.title}>{item.item.title}</Text>

or

<Text style={styles.title}>{this.state.title}</Text>

How can I do it?

Suggestions are welcome?

score 75 · Accepted Answer · answered Jan 22 '18 at 18:49

75

Write a function like this

Capitalize(str){
return str.charAt(0).toUpperCase() + str.slice(1);
}

then call it from <Text> tag By passing text as parameter

<Text>{this.Capitalize(this.state.title)} </Text>

answered Jan 22 '18 at 18:49

Mayuresh Patil

2,072
1
21
44

How can it possible using style sheet, – Varun Chandran May 10 '19 at 05:56
How about every word in the text input? – Si8 Jul 03 '19 at 13:55
6

@VarunChandran use `textTransform: 'capitalize'`. See my answer: https://stackoverflow.com/a/58867901/7869175 – Fernando Rojo Nov 14 '19 at 23:09

score 62 · Answer 2 · answered Jan 02 '19 at 12:18

62

You can also use the text-transform css property in style:

<Text style={{textTransform: 'capitalize'}}>{this.state.title}</Text>

answered Jan 02 '19 at 12:18

tmsss

1,979
19
23

7

This only works for all lower case text. (1) If you have "heLLo", this will turn the text into "HeLLo". (2) If you want "Hello" as a result, you can use `"heLLo".toLowerCase()` with `textTransform: 'capitalize'` css. – Michael Harley Nov 20 '19 at 08:20
1

This will capitalize every word in the input. Which might be OK, but the OP asks only for capitalization of the first letter. – Chris Bartley Oct 08 '21 at 20:44

Fernando Rojo · Answer 3 · 2023-07-25T23:02:14.023

36

React native now lets you make text uppercase directly with textTransform: 'capitalize'. No function necessary.

import { Text } from 'react-native'

// will render as Hello!
export const Caps = () => {
  return <Text style={{ textTransform: 'capitalize' }}>hello!</Text>
}

edited Jul 25 '23 at 23:02

answered Nov 14 '19 at 23:07

Fernando Rojo

2,633
19
17

score 18 · Answer 4 · answered Jan 22 '18 at 19:45

Instead of using a function, a cleaner way is to write this as a common component.

import React from 'react';
import { View, Text } from 'react-native';

const CapitalizedText = (props) => {
  let text = props.children.slice(0,1).toUpperCase() + props.children.slice(1, props.children.length);

  return (
      <View>
        <Text {...props}>{text}</Text>
      </View>
  );
};

export default CapitalizedText;

Wherever you're using <Text>, replace it with <CapitalizedText>

score 9 · Answer 5 · answered Jan 22 '18 at 18:01

9

just use javascript.

text.slice(0,1).toUpperCase() + text.slice(1, text.length)

answered Jan 22 '18 at 18:01

akshay

507
2
10

I used it but i have to write it for every `text` tag i have used. can i call a function in `text` tag by passing parameter as that text and all other text can be capitalize by using that function. – Mayuresh Patil Jan 22 '18 at 18:05
i think you mean `{autoCapitalize(text)}`. Sure you can do that – akshay Jan 22 '18 at 18:11
`{this.autoCapitalize(text)}` this is write – Mayuresh Patil Jan 22 '18 at 18:46
@mayureshpatil: I am getting on error on your suggestion too. – Waqas Apr 03 '18 at 06:43
@mayureshpatil It gives error that autpCapitalize(text) is not a function – Waqas Apr 05 '18 at 10:27
Isn't this exactly instead (reducing in 1 the length)? text.slice(0,1).toUpperCase() + text.slice(1, text.length - 1) I might be wrong : ) – Reinier Garcia Feb 18 '22 at 19:15

score 4 · Answer 6 · answered Sep 05 '18 at 05:57

TextInput have this to handle using

autoCapitalize enum('none', 'sentences', 'words', 'characters')

for example try like this

<TextInput
     placeholder=""
     placeholderTextColor='rgba(28,53,63, 1)'
     autoCapitalize = 'none'
     value ='test'
     />

score 3 · Answer 7 · answered May 18 '20 at 09:11

3

this worked for me!

labelStyle:{
        textTransform: 'capitalize',
        fontSize:20,

      },

answered May 18 '20 at 09:11

Rafay Mustafa

99
6

score 1 · Answer 8 · answered Aug 21 '19 at 12:29

Since this is very general functionality I put it in a file called strings.js under my library:

// lib/strings.js

export const CapitalizeFirstLetter = (str) => {
  return str.length ? str.charAt(0).toUpperCase() + str.slice(1) : str
}

And simply import it in the components that need it:

import React from 'react';
import { View, Text } from 'react-native';
import { CapitalizeFirstLetter} from 'lib/strings'

export default function ComponentWithCapitalizedText() {

  return <Text>CapitalizeFirstLetter("capitalize this please")</Text>

}

score 1 · Answer 9 · answered Nov 22 '19 at 09:02

1

I just added a prototype function, based on @mayuresh answer

String.prototype.Capitalize = function() {
    return this.charAt(0).toUpperCase() + this.slice(1);
}

and use it like this:

myStr.Capitalize()

answered Nov 22 '19 at 09:02

Yinon_90

1,315
12
17

score 0 · Answer 10 · answered Apr 06 '22 at 00:07

If you want to capitalize only the first letter of the input:

function CapitalizeFirstLetterOfInput () {

const onInputUppercase = (e) => {
    let firstLetter = e.target.value.charAt(0);
    e.target.value = firstLetter.toUpperCase() + e.target.value.slice(1);
  };
  
return (
  <div>
 <input onInput={onInputUppercase}/>
  </div>
)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.1/umd/react-dom.production.min.js"></script>

score 0 · Answer 11 · answered May 28 '22 at 05:15

0

if anyone interested doing it by just css/style

<strong style={{textTransform: 'capitalize'}}>{props.alert.type}!

here inner {} is for object {textTransform: 'capitalize'}

answered May 28 '22 at 05:15

Nirjhor 3029

21
1
3

score 0 · Answer 12 · answered Dec 15 '22 at 01:15

This answer worked for me:

text.slice(0,1).toUpperCase() + text.slice(1, text.length)

I used it with a props in an alt tag:

`${(props.image).slice(0,1).toUpperCase() + (props.image).slice(1, (props.image).length)}`

Then I guess you can apply that to any text you want.

Is it possible to capitalize first letter of text/string in react native? How to do it?

12 Answers12