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,344
  • 7
  • 32
  • 57
TIMEX
  • 238,746
  • 336
  • 750
  • 1,061
  • 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

11

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
  • 9,681
  • 4
  • 31
  • 44
  • 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