Reputation: 3017
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?
Upvotes: 158
Views: 105569
Reputation: 66
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}
/>
Upvotes: 0
Reputation: 868
Setting keyboardType="web-search"
worked for me.
<TextInput keyboardType="web-search" />
Upvotes: 2
Reputation: 2951
just use autoCapitalize='none'
, it's will worked fine
Upvotes: 5
Reputation: 8965
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'
/>
Upvotes: 385
Reputation: 559
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'
/>
Upvotes: 31
Reputation: 520
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.
Upvotes: 5