Override/Disable iOS Smart Punctuation in TextInput

Question

React Native 0.59.9 with device running iOS 11, and Smart Punctuation enabled. This iOS feature automatically converts entered text into more visually-pleasing notations.

Examples:

double hyphen -- gets autoconverted to an emdash — (unicode 8212)
quotation mark " gets autoconverted to a curly quote “(unicode 8220)

etc.

Disabling Smart Punctuation (via Settings > General > Keyboard) is unfortunately not an option.

I render a basic TextInput component almost exactly as per the RN docs, with the only exception that I'm using my own onChangeText handler function to see the effect on the entered text:

import React, { Component } from 'react';
import { TextInput } from 'react-native';


function handleTextChange(value) {
  // check value here after entering a '-' in the rendered TextInput.
  // when initial value is set to '', received value is ascii 45
  // when initial value is set to '-', received value is unicode 8212
}

export default function UselessTextInput() {
  const [value, onChangeText] = React.useState('-'); // change this to '' to see the difference

  return (
    <TextInput
      style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
      onChangeText={(text) => handleTextChange(text)}
      value={value}
    />
  );
}

Setting autoCorrect={false} and/or autoCompleteType='off' on the <TextInput> have no effect on the entered text.

Question
Is there a way to override this auto-correct behaviour so as to not change the user's inputted data?

I see that someone asked Facebook RN this question via a Github issue, but got no response.

score 13 · Answer 1 · edited Jul 17 '20 at 20:58

13

it's not always an option but, adding:

keyboardType={'ascii-capable'}

to the TextInput fixed it for me

edited Jul 17 '20 at 20:58

David Buck

3,752
35
31
35

answered Jul 17 '20 at 20:42

Tim O'Meara

131
1
4

That worked for my use case. Thanks! If you can't force this keyboard, then you are left with replace option in this answer: https://stackoverflow.com/a/58004675/471574 – Daniel Dimitrov Nov 02 '20 at 08:50
Thank you so much! I freaking love you. I have been trying to find a fix for this for like 5 days. :'( – Jwags Jun 22 '21 at 13:59
This is the correct answer. Simple and elegant... – Mike R May 18 '22 at 20:13

score 2 · Accepted Answer · answered Sep 19 '19 at 06:09

Indeed, this is an issue with the TextInput's iOS implementation, but I can provide a workaround for you. The trick is to check the TextInput's value for special characters and then replace those characters appropriately. See example below, where I replace every "—" with "--".

Code

const UselessTextInput = () => {
  const [value, setText] = React.useState('-'); // change this to '' to see the difference

  function handleTextChange (value) {
    var val = value;
    // check if value contains special characters 
    if (value.includes("—")){
      //replace values appropriately
      val = value.replace("—", "--");
    }
    //set new text 
    setText(val);
  }
  return (
    <TextInput
      style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
      onChangeText={(text) => handleTextChange(text)}
      value={value}
    />
  );
}

Working Example:

https://snack.expo.io/rJkj95ePB

Works. Something to note here (for others) is that Smart Punctuation also converts `---` to an emdash. So replacing emdashes with `--` effectively prevents `---` from being entered. `---` would be 'corrected' to an emdash, and then fixed to `--` via the logic in your solution. Typing a third dash would be effectively impossible. — changingrainbows, Sep 21 '19 at 00:05

Override/Disable iOS Smart Punctuation in TextInput

2 Answers2

Linked