how to avoid the suggestions of keyboard for android in react-native

Question

Hai i am struggling with keyboard problem in android, when i want to type any thing in text input it show some suggestions in keyboard, I don't want those suggestions, Can any one help me that how to avoid those suggestions.

Any help much appreciated, the above image from nexus 6. Here is my TextInput code

<TextInput
    style={styles.TextInput}
    value={this.state.currentWord}
    onChangeText={(text) => this.setState({currentWord:text.trim()})}
    placeholder="Type Your word here"
   autoCapitalize='characters'
  autoCorrect={this.state.autoCorrect}
  autoFocus={this.state.autoFocus}/>

In state i declare autoCorrect to be false

Could you post the code for your TextInput? When I try it in the emulator autoCorrect={false} works fine. — Daniel Basedow, May 03 '16 at 13:53
Sorry, but i can't reproduce your problem. It works exactly as it should in emulator. — Daniel Basedow, May 04 '16 at 08:59
Had the exact same problem on real device Samsung note 3 (android 5). Don't have this problem on Nexus5x (android 6), or super cheap android 4.4 device. If someone had an explanation... On each device : app has `disabled` `autoCorrect` and all devices had `auto-suggestion active`. — MacKentoch, Jun 13 '16 at 19:01
[From a trusted name](https://davidwalsh.name/disable-autocorrect): _"While I love these features, they aren't always applicable and when they aren't, users get frustrated"_ — Ryan Wheale, Jun 13 '16 at 19:13
Now if I could just find a way to re-enable this when a developer has disabled it... — kwishnu, May 11 '17 at 03:25

Ryan Wheale · Answer 1 · 2017-05-10T23:43:45.750

When using autoComplete="false", React native sets the underlying native android input type to TYPE_TEXT_FLAG_NO_SUGGESTIONS and clears out TYPE_TEXT_FLAG_AUTO_CORRECT, effectively telling the system not to offer any suggestions (see source code). This is the recommended way of disabling text suggestions per the Android reference guides.

The problem is it appears that some (or many?) HTC devices do not honor this setting. From my research, it appears some Samsung devices might not support this either. It is reasonable to assume that other manufactures will not honor this setting - which flat out just sucks. This is one of the big problems with Android - somehow they didn't learn from Microsoft - that sleazy manufacturers will destroy the reliability of your products and it takes years (a decade, roughly) to even begin to undo the damage </rant>. (note: I'm an Android fan).

According to Daniels answer it appears someone had success setting the text type to use TYPE_TEXT_VARIATION_FILTER - which tells the device that your input is being used to filter a list of items. Lets try to modify the existing text input and see if it works - then you can build our own if you want:

You need to find the file ReactTextInputManager.java. From the React Native folder, it will be located at this path:
```
[react-native]/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputManager.java
```

Around line 378 you will find a method called setAutoCorrect - update it to the following:

public void setAutoCorrect(ReactEditText view, @Nullable Boolean autoCorrect) {
    // clear auto correct flags, set SUGGESTIONS or NO_SUGGESTIONS depending on value
    updateStagedInputTypeFlag(
        view,
        InputType.TYPE_TEXT_FLAG_AUTO_CORRECT | InputType.TYPE_TEXT_FLAG_NO_SUGGESTIONS | InputType.TYPE_TEXT_VARIATION_FILTER,
        autoCorrect != null ?
            (autoCorrect.booleanValue() ?
                InputType.TYPE_TEXT_FLAG_AUTO_CORRECT : (InputType.TYPE_TEXT_FLAG_NO_SUGGESTIONS | InputType.TYPE_TEXT_VARIATION_FILTER))
            : 0);
}

Build your app and test. If it doesn't work, try removing both instances of InputType.TYPE_TEXT_FLAG_NO_SUGGESTIONS | (including the pipe) from the above code and try again. If that doesn't work, I think you're out of luck.
If it does work, then you can either a) instruct everyone on your team how to modify the react native component before building (hacky and unreliable), or b) build your own text input component. You should be able to copy and paste the existing TextInput code and shouldn't have to write much native code at all - mostly just renaming things. Good luck.

Update: going further down the rabbit hole, you can also try the setting TYPE_TEXT_VARIATION_VISIBLE_PASSWORD. So here is the kitchen sink - I'm assuming you can read the code well enough to play around with different combinations of input types:

public void setAutoCorrect(ReactEditText view, @Nullable Boolean autoCorrect) {
    // clear auto correct flags, set SUGGESTIONS or NO_SUGGESTIONS depending on value
    updateStagedInputTypeFlag(
        view,
        InputType.TYPE_TEXT_FLAG_AUTO_CORRECT | InputType.TYPE_TEXT_FLAG_NO_SUGGESTIONS | InputType.TYPE_TEXT_VARIATION_FILTER | InputType.TYPE_TEXT_VARIATION_VISIBLE_PASSWORD,
        autoCorrect != null ?
            (autoCorrect.booleanValue() ?
                InputType.TYPE_TEXT_FLAG_AUTO_CORRECT : (InputType.TYPE_TEXT_FLAG_NO_SUGGESTIONS | InputType.TYPE_TEXT_VARIATION_FILTER | InputType.TYPE_TEXT_VARIATION_VISIBLE_PASSWORD))
            : 0);
}

It helps to understand that the method signature for updateStagedInputTypeFlag is the following:

updateStagedInputTypeFlag([view], [flagsToUnset], [flagsToSet]);

Update 2: There are lot's of "input type" flags you can use, see a full list here. Feel free to try others - you might stumble upon one that works. You should be able to modify the code from my first update above.

Awesome! Thanks to you I learned about Android (*I'm from iOS world*) more than I expected and in just few seconds. I will test (just need to borrow my colleague's Samsung device). — MacKentoch, Jun 14 '16 at 18:40
I learned a lot too. Java is not my forte, so I hope this works or at least sends you in the right direction. I also just realized I left out some `InputType.`'s in my original answer - I've updated the code. Also, in keeping with the vein of this answer, you can try any of the input types described [here](https://developer.android.com/reference/android/widget/TextView.html#attr_android%3AinputType). — Ryan Wheale, Jun 14 '16 at 18:58
It did not solve Samsung Note 3 issues. I will try to get more devices in my hands to see whether it occurs other Samsung and other devices. Anyway for a free app I already feel fully satisfied to be aware of why and how handling this issue. — MacKentoch, Jun 15 '16 at 12:03
Your next best option is to go down that [list of input types](https://developer.android.com/reference/android/widget/TextView.html#attr_android%3AinputType) and try every single one until you find one that works. Another place suggested using ` — Ryan Wheale, Jun 15 '16 at 17:06

score 9 · Answer 2 · answered Jul 18 '18 at 21:59

9

if anyone has this problem, setting autoCorrect=false and keyboardType="visible-password" hides the suggestions in android

answered Jul 18 '18 at 21:59

Juciel de Freitas

91
1
1

This works great on some devices (Pixel 2) but not on others (e.g. Galaxy S7). – David Jones Nov 04 '19 at 16:38
Works for Samsung Galaxy Tab S6 Lite – Tran Viet Jul 18 '21 at 12:23

score 3 · Answer 3 · answered Mar 12 '17 at 03:36

3

You can set the TextInput to Set autoCorrect to false.

answered Mar 12 '17 at 03:36

Dojo

105
1
4

score 3 · Answer 4 · answered Feb 07 '19 at 16:32

3

My solution was using keyboardType={'visible-password'} when the password is visible

  <TextInput
    onChangeText={onChangeText}
    label={label}
    autoCapitalize='none'
    value={password}
    secureTextEntry={isPasswordVisibile}
    keyboardType={this.state.isPasswordVisibile ? undefined : 'visible-password'}
  />

answered Feb 07 '19 at 16:32

Henrique Jensen

399
3
6

though this works for hiding the suggestions but secureTextEntry doesn't work after the password is made visible and then back hidden. – Irfan wani Jan 06 '22 at 17:09

score 2 · Answer 5 · edited May 23 '17 at 11:54

2

You would have to write your own Android TextView wrapper, that sets the correct input type. See this stack overflow post for more information on the android part.

edited May 23 '17 at 11:54

Community

1
1

answered Jun 14 '16 at 11:27

Daniel Schmidt

11,605
5
38
70

1

Thank you you are right there is no better way. Such a shame manufacturers create a mess in Android. Google is going to change the deal soon so that we will be able to deliver better apps. – MacKentoch Jun 14 '16 at 18:44

score 0 · Answer 6 · answered Apr 05 '17 at 07:30

0

Our fix/hack was to simply change the input`s type from text to email and back to text.

answered Apr 05 '17 at 07:30

Kenneth Lynne

15,461
12
63
79

how to avoid the suggestions of keyboard for android in react-native

6 Answers6

Linked