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 ponent does not change the setting (while there is text in the TextInput).

How can I get around this?

(iOS only)

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 ponent does not change the setting (while there is text in the TextInput).

How can I get around this?

(iOS only)

• javascript
• react-native
• text
• textinput

• maybe this answer can help you. stackoverflow./questions/23453430/… – Moein Hosseini Commented May 5, 2019 at 4:54
• but that's for android – Junius L Commented May 5, 2019 at 7:19
• 1 Can you show some of your code ? Might help us get a better understanding of how this can be fixed :) – Mostafa Berg Commented May 7, 2019 at 10:05
• @TIMEX, you asked this question before in this link, 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 for the issue, because that is the answer this currently accepted answer – user8106148 Commented Aug 13, 2019 at 11:18

1 Answer 1

Demos

Code

checkTest function

See code ments 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.