react-native: [0.54] TextInput.setNativeProps({text: ''}) no longer works

Environment

Environment:
  OS:  macOS Sierra 10.12.6
  Node:  8.7.0
  Yarn:  1.3.2
  npm:  5.6.0
  Watchman:  4.7.0
  Xcode:  Xcode 9.2 Build version 9C40b
  Android Studio:  3.0 AI-171.4443003

Packages: (wanted => installed)
  react: ^16.3.0-alpha.1 => 16.3.0-alpha.1
  react-native: 0.54.0 => 0.54.0

Expected Behavior

Calling textInputRef.setNativeProps({text: ''}) or textInputRef.clear() clears the text input – this was working in previous versions (before the <Text> rewrite in 0.54).

Actual Behavior

Calling textInputRef.setNativeProps({text: ''}) or textInputRef.clear() does nothing.

Steps to Reproduce

Repro here: https://github.com/Leeds-eBooks/react-native-0.54-text-input-clear-repro

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Reactions: 35
  • Comments: 23 (3 by maintainers)

Commits related to this issue

Most upvoted comments

I am using v0.55.3 and I’ve encountered the same issue. textInputRef.clear() and textInputRef.setNativeProps({text: ''}) only seem to work on Android. On iOS nothing happens.

v0.55.3 a dirty solution for iOS

if (Platform.OS === 'ios') {
	this.textInputRef.setNativeProps({ text: ' ' });
}

setTimeout(() => {
	this.textInputRef.setNativeProps({ text: '' });
});

This fix worked for me on all versions of RN with 0.54 - 0.56

textDidChange(text) {
    this.textInput.setNativeProps({text})
}

then you can use textInputRef.clear() no problems…

hi, is there a plan fixing this in v 0.56?

@minhchienwikipedia if using this.setState and value, inputing word is confirmed(?) and can’t convert. It can be used in Engleish, somehow, but handling language which is needed to convert, such as Japanese, it don’t work.

I had create new Text Input for fix this bug right now, everybody can use it before RN fix it. https://github.com/agiletechvn/react-native-text-input-enhance

It’s not completed yet, but TextInput.clear() works again with this change (#18278).

This works for me

RN v0.55.3

setTimeout(() => {
    this.textInputRef.clear();
});

With styled-components v3.2.6

setTimeout(() => {
    this.textInputRef.root.clear();
});

@kushal Have you found a way to patch locally without losing your patch whenever you run npm install or yarn?

EDIT: This works beautifully! ds300/patch-package

is there any update here… as i have a serious dependency on this…

@x3388638’s solution works well for me.