React-native: TextInput: add ability to set/clear the text

[ryanflorence]

After you handle onSubmitText there's no way to clear (or change) the value of the input w/o making a controlled component (and that makes it a pretty terrible ux).

[vjeux]

cc @sahrens

[sahrens]

If you setState to re-render the component and pass in the string you want to the value prop it should update to reflect that. If that's not the case, can you provide a code snippet that shows the bug?

[ryanflorence]

        <TextInput
          style={styles.input}
          value={this.state.inputValue}
          controlled={true}
          onChangeText={(text) => this.setState({ inputValue: text })}
          onSubmitEditing={this.handleSubmitEditing.bind(this)}
        />

I've got that, and it works, but it is a really, really, _really_ terrible ux.

If you really want this to behave as a controlled component, you can set this true, but you will probably see flickering, dropped keystrokes, and/or laggy typing, depending on how you process onChange events.

http://facebook.github.io/react-native/docs/textinput.html#controlled

How else can I process an onChange event?

[ryanflorence]

huh ... I closed the chrome debugger and now the UI is nice and responsive, where before it dropped characters and flickered a lot.

[sahrens]

The chrome debugger over websockets adds a fair bit of latency :(

You should be able to clear/reset the value without setting controlled={true}, it just won't fully control the component. Does that work at all for you?

On Mar 28, 2015, at 7:36 PM, Ryan Florence [email protected] wrote:

huh ... I closed the chrome debugger and now the UI is nice and responsive, where before it dropped characters and flickered a lot.

—
Reply to this email directly or view it on GitHub.

[ryanflorence]

oh, turns out removing controlled is what fixed it, not the debugger, I didn't realize I'd removed it, sorry for the noise :)

[brentvatne]

For future reference, if you don't want to use controlled, another way to clear is to set a ref on the TextInput then call this.refs.yourTextInputRef.setNativeProps({text: ''})

[tuanluu-agilityio]

On React native, i have clear text ref as below:

           <TextInput
              style={styles.input}
              autoCapitalize="none"
              placeholder="Invitees"
              keyboardType="email-address"
              clearButtonMode="while-editing"
              ref={element => {
                this.attendee = element
              }}
              onSubmitEditing={this.handleAddPress}
            />

this.attendee.setNativeProps({ text: '' })

It's work fine for me no need refs.

Thanks,

[jevvilla]

@tuanluu-agilityio this is working on ios for you? I try it but only works on Android for me.
any idea?

[josepbordesjove]

I am not able to use the .clear() function of the TextInput component while it is working on Android, has anyone a workaround about this?