react-native-controlled-input

Fix controlled input on react-native IOS, broken since version 0.53

RN issue #18874

Installation

1)

yarn add react-native-controlled-input

2)

Apply this fix in Libraries/Text/TextInput/RCTBaseTextInputView.m, line 303

See the diff here

  if (_onTextInput) {
    _onTextInput(@{
      @"text": _predictedText,
      @"previousText": previousText,
      @"range": @{
        @"start": @(range.location),
        @"end": @(range.location + range.length)
      },
      @"eventCount": @(_nativeEventCount),
    });
    if (_maxLength && [_maxLength intValue] == -0xC3D) {
      return NO;
    }
  }
  return YES;

Usage

It handle every TextInput props except multiline and onChange

export default class Container extends Component {
  state = {
    value: '',
  }

  render() {
    return (
      <ControlledInput
       // filter only numberic characters
        onChangeText={(value) => this.setState({ value: value.replace(/\D/g, '') })}
        value={this.state.value}
        style={{ width: 300, height: 70, borderWidth: 1 }}
      />
    );
  }
}

Todo

• [ ] Controlled/Uncontrolled detection adaptation
• [ ] Multiline

Free Software FTW