React-native: Property autoCapitalize don't work on Android

[SyloRei]

Property autoCapitalize don't work on Android in TextInput.

<View style={styles.dataInputRow}>
  <TextInput
    style={styles.dataInputInput}
    placeholder="Text"
    autoCorrect={false}
    keyboardType="default"
    returnKeyType="done"
    autoCapitalize="words"
    underlineColorAndroid="rgba(0, 0, 0, 0)"
  />
</View>

Pls fix it

[kulmajaba]

In my testing autoCapitalize="words" worked on both Android emulator and device, running Android 6.0 and 6.0.1, React Native version 0.28.

Please provide more info on your testing setup.

[freakinruben]

Autocapitalize also doesn't work for me on Android. I'm now running RN 0.30.0 but it has never worked since I started with RN 0.19. I'm testing on an Android 4.2 and Android 4.4 device

[SyloRei]

On Android 6.0 in Genymotion don't work
On Android 5 real device don't work

[reyesr]

I can confirm there is something fishy, as it works, or not, depending on the other attributes in the TextInput element.

I managed to create a minimal code that can reproduce the issue:

<TextInput
    autoCapitalize="words"
    onContentSizeChange={(event) => null}
    style={{paddingTop: 0, backgroundColor: "rgba(255,100,100,1)", color: "rgb(0,179,143)"}}
    keyboardType="default"
    multiline={false}
    onChangeText={(text) => this.setState({text})}
    value={this.state.text}
    selectionColor="#00F"
/>

What is weird is that if you use this snippet as is (I added it in a freshly created android react-native project), the autoCapitalize="words" and autoCapitalize="characters" are not respected and the keyboard only displays lowercase characters (ie. the bug appears). It works fine for autoCapitalize="sentences" though.

Now, remove any of the other attributes, onContentSizeChange, style, keyboardType, multiline, or selectionColor, and now it works (the keyboard displays uppercase for the first letters of words).

I reproduced it on several versions of the API (19, 22, 23), and the bug appears consistently as I described above.

[SyloRei]

Is there any update on that issue?

[SyloRei]

Bump

[antoinerousseau]

I had to explicitly add autoCapitalize="sentences" to make it work like expected although the doc says it's the default value.

[diegoperini]

This happened when we transitioned from api level target 22 to 25. Just letting you know. We use autoCapitalize="words".

[cooperka]

I can see that AutoCapitalizationType is defined at the bottom of ReactTextInputManager.java and it looks to be correct... "sentences" maps to InputType.TYPE_TEXT_FLAG_CAP_SENTENCES, but setting it doesn't seem to actually have any effect (as of RN v0.39).

It would be great if someone who has more experience with native bridging could weigh in about what the issue could possibly be.

[AndrewJack]

Just in case you are being caught out by this:
autoCapitalize only affects the phone's software keyboard capitalisation when inputting text, but typing into your pc's keyboard into your emulator will not be auto capitalised.

I haven't seen any issues using autoCapitalize on v0.38.0

[cooperka]

@AndrewJack good call! I pulled up the soft keyboard on the emulator and it does seem to work. There is still a small bug as mentioned above, which is that the default seems to be 'none' rather than 'sentences' on Android (see docs), but it's definitely not a big deal.

[Proberts]

I have this issue and it seems is it connected to the TextInput style property. I have a repeatable example here: https://rnplay.org/apps/t32avg

If you uncomment either or both the padding: and margin: lines in the style 'input', autoCapitalize is ignored.

Unfortunately this doesn't help my app. Removing margin and padding still causes the problem, so it's likely some upstream layout parameters triggering the issue.

[Proberts]

Confirming this is still an issue in 0.39.2 @Sylor73

[Proberts]

I've updated my example. There are now two TextInput fields. One has autoCapitalize working and the other doesn't. If you click between them you can see the Android keyboard change from caps to lower-case. The only difference between the two is the broken one has margin: set in the style. (Both TextInput fields have autoCapitalize working in iOS)

[Proberts]

I've done a little more digging and it looks like this is also related to the keyboardType property. If keyboardType is set AND margin or padding is also set in the style property, autoCapitalize is ignored. #11776

[SuhairZain]

Hi,
We're having this issue in one of our production apps. Have anyone found any workaround for this? It'd be a great help.

[Proberts]

@SuhairZain see https://github.com/facebook/react-native/issues/11776

[SuhairZain]

@Proberts
I do not set the keyboardType and still have this issue. Also, this is present only on some devices/OSs. For example, it works fine on Lollipop in Genymotion, but seems to be broken in JellyBean (Samsung device). I'll try and figure our the root issue and let you know.

[Proberts]

@SuhairZain At the bottom of the issue there's a PR that fixes it. It's wider than just keyboardType and margin/padding looking at the fix.

[lohues]

Remove keyboardType="default" just like @Proberts did working for me

[laurent22]

Maybe it's the doc that needs to be fixed? It says that "sentences" is the default but in my case I had to set it explicitly for it to work (in two different TextInputs with very different properties).

[hramos]

Hi there! This issue is being closed because it has been inactive for a while. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. Either way, we're automatically closing issues after a period of inactivity. Please do not take it personally!

If you think this issue should definitely remain open, please let us know. The following information is helpful when it comes to determining if the issue should be re-opened:

• Does the issue still reproduce on the latest release candidate? Post a comment with the version you tested.
• If so, is there any information missing from the bug report? Post a comment with all the information required by the issue template.
• Is there a pull request that addresses this issue? Post a comment with the PR number so we can follow up.

If you would like to work on a patch to fix the issue, contributions are very welcome! Read through the contribution guide, and feel free to hop into #react-native if you need help planning your contribution.

[joncursi]

@hramos This bug is still present in RN 0.49.1. Can we re-open? Repro:

<TextInput
  autoCapitalize="characters"
/>

On android, when you type, none of the characters are capitalized. Works on iOS though.

[AndrewJack]

@jonaslu was this on a real device or the Android emulator?

If the latter make sure you aren't typing on your computer's keyboard. (See https://github.com/facebook/react-native/issues/8932#issuecomment-265098801)

[joncursi]

Yeah, I tested on a Galaxy S7 physical device running Android 6.1. It happens on the stock keyboard that the phone ships with, not sure if Gboard fixes it but I believe this should be functional on the default keyboard.

[hramos]

Best way forward I think is to open a new issue that follows the template.

[lasuax]

Well, I've also came across with this error and was looking for an answer but it seems that if you use the default keyboard of the device, the setting works properly. However, when used with a 3rd party app like SwiftKey, it doesn't operate.

[tastafur]

I have been analyzing this problem and it happens when you have activated on the samsung mobile keyboard the predictive language

[PoliakovMaksym]

The bug is still present. All autoCapitalize settings are ignored except none.

Environment:

• RN 0.51.0
• OS Android 6.0 MRA58K
• Device Xiaomi Redmi Note 4

[javadoffuad]

don't work on Android 7.0, react-native 0.52

[colinwong]

Found temporary solution.

If using TextInput in a component and the keyboardType should be 'default' omit the keyboardType property.

See issue #11776.

[PoliakovMaksym]

@colinwong
This 'solution' isn't working in RN 0.51.0. Just tested it.

[colinwong]

@PoliakovMaksym Hmm. I'm on Expo SDK 24, which is RN 0.51.0. Running on Android 7.0. It worked for me. Must be another issue that's affecting your app.

[kholiavko-roman]

I met this problem when keyboardType define on android, without it autoCapitalize works fine. Here is a demo on expo.
RN: 0.55.2

[superandrew213]

Instead of omitting keyboardType, you can try adding autoCapitalize={'sentences'} in case you need to set keyboardType. It's working for me.

[RodrigoAWeber]

Still occurring in RN: 0.55.4