Disable IOS keyboard suggestions in React Native

Question

I'm trying to set up a comment page in my app and I want to have the comment input field sitting right on top of the keyboard like Facebook, Instagram, Strava and many other apps have. But when the keyboard comes in it has suggestions on the top like so:

I want to disable the suggestions above the keyboard here so that I can put my textinput on top of the keyboard. Is this possible in React-Native?

React-Native: 0.44.0

score 71 · Accepted Answer · answered Jul 31 '17 at 20:20

71

So after a some more digging I found that if you set the autoCorrect prop on the TextInput itself to false, it removes the suggestions above the keyboard. No need to go into the native code to try and fix this.

ie: <TextInput autoCorrect={false}/>

answered Jul 31 '17 at 20:20

Ryan Wilson

1,743
3
15
26

10

Unfortunately, autocorrect={false} still shows it for me. – VDog Nov 14 '18 at 22:56
4

@VDog it might be a bit late, but I think it's `autoCorrect` and not `autocorrect` ;) – Mickaël Feb 25 '19 at 19:52
Used it with react-native-elements Input and it works like a charm – Erik Rybalkin Oct 22 '20 at 14:56
2

If this seems to not work, try restarting the app completely, changes seem to not always take effect after simply reloading the screen with the input on. Also try changing other flags like keyboard type and text content type, there are some unintuitive incompatibilities due to how RN handles flags under the hood. – user56reinstatemonica8 Jan 22 '21 at 10:00
1

There is currently no working fix for this. A potential workaround would be set the type to password, then onFocus reset it back to text. Caused too much css issues for me. – jizanthapus Jan 31 '22 at 15:52

score 8 · Answer 2 · edited Oct 29 '22 at 15:56

8

I think for Android:
autoCorrect={false}

For iOS, two properties need to disable suggestion bar:
autoCorrect={false} and spellCheck={false}.

edited Oct 29 '22 at 15:56

James Risner

5,451
11
25
47

answered Oct 25 '22 at 05:02

tsc

91
1
3

1

This is the only solution that worked for me. With just `autoCorrect` set to false, the suggestions bar would still appear but it would be blank. – Matt Waldron Oct 27 '22 at 20:29
Finally, this works for me. Thank you. – Hadrian Hughes Jul 30 '23 at 14:38

score 4 · Answer 3 · answered Aug 19 '21 at 13:50

4

For ios, accepted answer will work fine but i just wanted to add for the android.

So for android, to hide the suggestions, use keyboardType='visible-password' for the textInput where you want to hide the suggestions.

answered Aug 19 '21 at 13:50

Irfan wani

4,084
2
19
34

score 2 · Answer 4 · answered Jul 26 '22 at 13:19

2

I think that for iOS you looked for spellCheck={false} Docs

answered Jul 26 '22 at 13:19

gran33

12,421
9
48
76

score 1 · Answer 5 · answered Jul 28 '17 at 17:18

1

If ReactNative exposes the autocorrectionType property on UITextField, you could set it to UITextAutocorrectionTypeNo.

answered Jul 28 '17 at 17:18

Matthew

1,363
11
21

score -2 · Answer 6 · answered Jul 28 '17 at 17:11

This is an option that is enabled or disabled by the user, it would not be wise to place content here if it is critical for it to be shown (unless you are happy for the user to potentially need to scroll) for that reason.

There are some useful utilities available through react native that allow you to control the keyboard in other ways though, such as...

https://facebook.github.io/react-native/docs/keyboard.html

https://facebook.github.io/react-native/docs/keyboardavoidingview.html

there are also various other npm packages that are worth taking a look at too.

This is completely unrelated to the question – user56reinstatemonica8 Jan 22 '21 at 09:55 — user56reinstatemonica8, Jan 22 '21 at 09:55

Disable IOS keyboard suggestions in React Native

6 Answers6