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

[benadamstyles]

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

[magicien]

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

[kushal]

I ended up manually applying the patch https://github.com/facebook/react-native/pull/18363/files locally on top of 0.55.2 just to keep making progress

…

On Thu, Apr 12, 2018 at 7:06 AM, Aamir Hussain ***@***.***> wrote: is there any update here.. as i have a serious dependency on this.. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#18272 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAGrtHRe47QL-68-xHXYQnDFmH0NiL7rks5tn19dgaJpZM4Sij9J> .

[benadamstyles]

@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

[pualxiao]

https://github.com/pualxiao/React-Native-TextInput-Bug-Fix

[padvlad]

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.

[x3388638]

v0.55.3
a dirty solution for iOS

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

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

[b-asaf]

@x3388638, @padvlad
textInputRef.clear() and textInputRef.setNativeProps({text: ''}) does not work in RN version 0.55.4 as well

[minhchienwikipedia]

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

[datvtwkm]

@minhchienwikipedia you are using
clear() {
this.setState({ text: '' });
}
in IOS
Pratically, we don't want to do that because it affects keyboard behavior!

[minhchienwikipedia]

@datvtwakumo Can you explain your issue?

[sasayahiromu]

@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.

[datvtwkm]

@sasayahiromu you are right
@minhchienwikipedia one more problem that you don't want to rerender your input component with every setState, right? If you need a default value, there is defaultValue, and with every change, try to not setState, but to send new value elsewhere or debounce listening function so that you do not need to rerender component!

[jaimehing]

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

[hramos]

@jaimehing not at this time. Anything that is not fixed on master right now is unlikely to be part of 0.56.

[bbeckk]

Simply unfocusing the textInput solves the problem

<View style={styles.textInputStyle}>

    <TextInput onChangeText={(text) => this.setState({searchText: text}, () => {
                   this.state.searchText.length > 1 ? this._getSearchedData() : null
               })}
               value={this.state.searchText}
               placeholder='Search restaurant or cuisine'
    />

    <TouchableOpacity  onPress={() => {
                    this.setState({searchText: ''}),
                    Keyboard.dismiss()
                }}>
    <Icon name="md-close-circle" style={{color: 'gray', fontSize: 15,}}/>
</TouchableOpacity>

</View>

[Lidanha]

@x3388638's solution works well for me.

[sunr1ze]

This works for me

RN v0.55.3

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

With styled-components v3.2.6

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

[g00dnatur3]

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...

[tabfed]

this.state = {
  current:0,
  value:''
}

//don't set value , change key ,  foreceUpdate
<TextInput key={this.state.current} onChangeText={(e)=>{this.setState({value:e})}}/>

<Button onClick={this.setState({
   current:this.state.current+1
})}/>

[datvtwkm]

this hack works for me, please tried this :D
#18767 (comment)