5

I want autocorrect. However, when the user types "@", I want autoCorrect to turn off until otherwise.

I have tried setting the prop to false/true. However, the component does not change the setting (while there is text in the TextInput).

How can I get around this?

(iOS only)

benomatis
  • 5,536
  • 7
  • 36
  • 59
TIMEX
  • 259,804
  • 351
  • 777
  • 1,080
  • maybe this answer can help you. https://stackoverflow.com/questions/23453430/disable-keyboard-autocorrect – Moein Hosseini May 05 '19 at 04:54
  • but that's for android – Junius L May 05 '19 at 07:19
  • 1
    Can you show some of your code ? Might help us get a better understanding of how this can be fixed :) – Mostafa Berg May 07 '19 at 10:05
  • @TIMEX, you asked this question before in [this link](https://stackoverflow.com/q/53212534/8106148), The answer to that question is the same as this question post. how to deal with the solution. Do you find any way to disable animation? why you didn't accept [that answer](https://stackoverflow.com/a/53320748/8106148) for the issue, because that is the answer [this currently accepted answer](https://stackoverflow.com/a/56028829/8106148) –  Aug 13 '19 at 11:18

1 Answers1

13

Demos

demo gifdemo2

Code

checkTest function

See code comments for the most important remarks. 

checkText(text){
      //create a new regular expression 
      const regex = new RegExp("@");
      //check if the string contains an @ 
      const res = text.match(regex);

      // if res is not null, we have a match! 
      if (res != null){
        if (this.state.autoCorrect){
          // disable auto correction if it's still enabled
          this.input.blur(); 
          // hacky part, we need to dismiss the keyboard first, then we can show it again. 
          this.setState({autoCorrect: false}, () => {
            setTimeout(() => this.input.focus(), 60);
          });
        }
      }else{
        if (!this.state.autoCorrect){
          this.input.blur(); 
          // enable auto correction if no @ is detected anymore
          this.setState({autoCorrect: true}, () => {
            setTimeout(() => this.input.focus(), 60);
          });
        }
      }
      //update text in state 
      this.setState({ username: text});
    }

render function

 <View style={styles.container}>
     <TextInput 
      value={this.state.username}
      onChangeText={text => this.checkText(text)}
      autoCorrect={this.state.autoCorrect}
      />
 </View>

Complete Working Example

https://snack.expo.io/Skta6BJ34

Discussion

It seems, you need to "reload" the Keyboard to affect the reloading of the autoCorrect property. I think this is still a bug and is hopefully resolved in a future release. (see this github issue).

In the meanwhile, you can use this little workaround and maybe do some fine tuning on the timings/regex etc.

Edit:

I found an extensive answer here, this one tackles the issue similarly.

Tim
  • 10,459
  • 4
  • 36
  • 47
  • How do I disable the keyboard animation while this is happening? In Swift, there is a way to do so (setAnimationsEnabled) ...is there a way in RN? – TIMEX May 08 '19 at 16:38
  • 1
    @TIMEX Unfortunately, react native does not support setting `setAnimationsEnabled` at the moment. – Tim May 08 '19 at 16:43
  • 1
    Btw I think the animation is not so annoying, it actually shows the user that now something(the auto correction) is different. But that's just my opinion. – Tim May 08 '19 at 16:47
  • The reload part of the app was my problem. Still in 2023, you have to reload your app for the keyboard changes to take effects. When passing autoCorrect to false or true. – XplosiVe06 Jan 03 '23 at 09:58