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?
6 Answers
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'
/>
-
-
2Setting '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
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'
/>
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.
Setting keyboardType="web-search"
worked for me.
<TextInput keyboardType="web-search" />
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}
/>