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

Answer 1

You can set the TextInput to Set autoCorrect to false.

Answer 2

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

Answer 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'}
  />

Answer 4

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.

Answer 5

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:

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

2. 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);
   }
   

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

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

Answer 6

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