156

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? enter image description here

1
  • 4
    I already solved it with "autoCapitalize" :) Thank you, all! Have a good day, guys! Commented Nov 16, 2016 at 9:26

6 Answers 6

383

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'
/>
3
  • This worked for me: autoCapitalize='none' Commented Aug 8, 2021 at 17:16
  • 2
    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. Commented Dec 31, 2021 at 15:42
  • I tried doing none but it didn't worked. If it doesn't work then do autoCapitalize={false} Commented Jan 31, 2022 at 23:38
29

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'
          />
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.

0
5

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

2

Setting keyboardType="web-search" worked for me.

<TextInput keyboardType="web-search" />

0

Just in case anyone else comes looking on this and the answers above don't work, the following did the trick for me:

<TextInput 
    autoCapitalize='none'
    keyboardType='email-address'
    spellCheck={false} 
/>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.