TextInput autoCapitalize="words" not working when keyboardType prop is passed on Android

[WouterFlorijn]

When adding autoCapitalize="words" and keyboardType with any value, on Android, nothing is auto-capitalized. There have been other issues regarding this, but they have been closed, locked and since ignored (#11776 #8932).

In older issues/comments it's stated that this happens only when margin or padding is applied through style on the TextInput, but this is not the case. It also happens without.

If this has been fixed in React Native 0.60+, please let me know. I'm only able to test on 0.59.

React Native version:
info
React Native Environment Info:
System:
OS: Windows 10
CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
Memory: 4.79 GB / 15.89 GB
Binaries:
Yarn: 1.1.0 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 6.10.3 - C:\Program Files\nodejs\npm.CMD
IDEs:
Android Studio: Version 3.5.0.0 AI-191.8026.42.35.5791312

Steps To Reproduce

1. Add autoCapitalize="words" to a TextInput.
2. Also add keyboardType=... with any value. Even undefined, even though undefined props are supposed to be ignored in React.

Describe what you expected to happen:

The first letter of each word is capitalized.

[safaiyeh]

I investigated this issue on master, it works correctly with the physical keyboard; however, not with soft input (inputs from your computer).

With soft input notice how the capitalize on the keyboard turns on with every space. This is an issue with the soft input key listener, should be fine in a shipped app.

[WouterFlorijn]

@safaiyeh It's not. I've confirmed this issue on Android devices in development and production. It occured on every Android device I tested on. The only workaround was to remove the keyboardType prop. If it's only happening with soft inputs for you, there might be other factors (props) that also impact this behavior, but it's definitely not a PC-only bug.

[safaiyeh]

@WouterFlorijn I understand now.

Android's InputType.TYPE_TEXT_FLAG_CAP_WORDS or any InputType.TYPE_TEXT_FLAG_CAP_* only works with InputType.TYPE_CLASS_TEXT with no text variations like password + email.

So the only time this is true is when there is no prop or keyboardType={'default'}

Current behavior
no prop ✅
keyboardType={'default'} ❌

[safaiyeh]

Submitted a PR to fix this bug: #27523

[safaiyeh]

This can be closed as the fix was merged in.

cc @TheSavior

[gusmarques]

Ao invés de usar AutoCapitalize="Words"
é mais fácil manipular a entrada de texto com javascript

ex..:
<TextInput
style={styles.searchBar}
ref={(ref) => { ref }}
placeholder="(Ex..:Fotografia, Advocacia, Odontologia)"
onChangeText={text => {setSearch(text.charAt(0).toUpperCase() + text.slice(1))}}
onClear={index => {setCategoria(categoria)}}
keyExtractor={pesquisa => pesquisa._id}
value={pesquisa}
placeholderTextColor='#4EA3DA'
placeholderTextSize="10"
/>

text.charAt(0).toUpperCase() + text.slice(1)

Essa parte do codigo faz com que toda entrada no textinput seja com a primeira letra maiúscula e o restante minuscula.

Espero poder ter ajudado!

[bleszerd]

I keep having the problem

[aleksandarbos]

I've figured out that multiline property on TextInput was causing a lot of issues for me, like:

• autoCapitalize didn't work
• was unable to clear TextInput no matter what I've tried

[KPS250]

autoCapitalize still doesn't work even after removing multiline & keyboardType props. Any update on this?

[talhamuhammadashraf]

@KPS250 any update have you resolved ?

[tonydatw]

any updates on this? Autocap still doesn't work on Android