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

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

About this issue

  • Original URL
  • State: closed
  • Created 8 years ago
  • Reactions: 15
  • Comments: 36 (11 by maintainers)

Most upvoted comments

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

Bump

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

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

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

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

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

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.

@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)

@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.

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

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.