React-Native cannot write first letter with noncapital

Question

I have some trouble with react-native. I have an Input component(like textfield) for user to enter his email address, but the thing is that, first letter always comes as capital letter default and it is impossible to make it non-capital. How can I change it like first letter can be small, as well?

I already solved it with "autoCapitalize" :) Thank you, all! Have a good day, guys! — Ali Zeynalov, Nov 16 '16 at 09:26

score 353 · Accepted Answer · edited Feb 06 '21 at 04:46

353

TextInput has autoCapitalize to handle this.

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

For example try like this:

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

edited Feb 06 '21 at 04:46

Sarcastron

1,527
14
20

answered Nov 16 '16 at 09:43

Sport

8,570
6
46
65

This worked for me: autoCapitalize='none' – Diego Santa Cruz Mendezú Aug 08 '21 at 17:16
1

Setting 'autoCapitalize' wasn't enough in the case of a period separating parts of the name. For instance, iPhones would still change john.doe to John.doe. Setting autoCorrect={false} like mentioned in another answer resolved my issue. – Bryson Kruk Dec 31 '21 at 15:42
I tried doing none but it didn't worked. If it doesn't work then do autoCapitalize={false} – furkanayilmaz Jan 31 '22 at 23:38

score 24 · Answer 2 · answered Aug 30 '20 at 11:38

Make sure that the property autoCorrect is false. This way it will not capitalize the first email character. Also setting the keyboardType to email-address shows the keyboard with an @ option accessible. That's how I would do:

          <TextInput
            textContentType='emailAddress'
            keyboardType='email-address'
            autoCapitalize='none'
            autoCorrect={false}
            autoCompleteType='email'
          />

score 5 · Answer 3 · edited Apr 14 '20 at 02:14

5

If you have an issue with TextInput to make all letters uppercase then you can use autoCapitalize = 'characters' and if you want only first characters to be uppercase then use autoCapitalize = 'words'. However, make sure you do not set the keyboard type property.

edited Apr 14 '20 at 02:14

Vic

1,778
3
19
37

answered Feb 01 '19 at 11:18

Vishal Dhaduk

492
5
13

score 1 · Answer 4 · answered Jul 04 '23 at 17:49

1

just use autoCapitalize='none', it's will worked fine

answered Jul 04 '23 at 17:49

Siddhartha Mukherjee

2,703
2
24
29

React-Native cannot write first letter with noncapital

4 Answers4