React Native - Using normalize along with a wrapped TextInput causes input characters to appear multiple times

This could be because of wrong usage of the library, but I’m stuck on this.

I have the following snippet where I’m using the following lib versions: react 15.3.2 react-native 0.37.0 redux 3.6.0 react-redux 4.4.6 redux-form 6.2.1

import { TextInput } from 'react-native';

function renderInput(props) {
  const { input } = props;
  return (
    <TextInput width={200} {...input} />
  );
}

function toUpper(value) {
  return value && value.toUpperCase();
}

function AndroidCmp(props) {
    return (
      <View>
        <Field name="firstName" component={renderInput} normalize={toUpper}/>
      </View>
    );
}

export default reduxForm({
  form: 'Whyyy',
})(AndroidCmp);

When I type in text, it turns to uppercase, but duplicate characters to appear. eg. If want to type ‘help’, here’s what shows up:

typed so far: ‘h’ -> H

typed so far: ‘he’ -> HHE

typed so far: ‘hel’ -> HHEHHEL

…and so on.

Sometimes the expected single character appears (but on next keypress, more duplicate stuff appears).

Without normalize, the duplication issue doesn’t happen (of course, no normalization happens).

I’ve tried an equivalent example using React web - using custom component that simply wraps an input, but did not face issues. This could imply some usage issue with react-native’s TextInput but I’d appreciate help on solving this - as I think I’ve followed the docs on how to handle a custom input.

[ValentinBlokhin]

I have the same issue on android

[soh335]

https://github.com/facebook/react-native/issues/27449 This is react native issue.