CODEWITHSUNDEEP
react-native
Henkav141
Henkav141

Reputation: 161

How to clear focus from an inputfield in React Native?

I have an inputfield and I want to get rid of the focus on it, after i click the submit button.

Any suggestions on how I would go about this?

Upvotes: 16

Views: 30947

Answers (4)

Faisal Hassan
Faisal Hassan

Reputation: 620

Keyboard.dismiss();

Keyboard.dismiss() will remove focus from all text input fields in view and hide keyboard. and for specific field you can use the above mentioned method

<TextInput ref="input">

this.refs.input.blur()

Upvotes: 10

paolobueno
paolobueno

Reputation: 1708

In my use case I explicitly needed the input to lose focus (and require the user to touch it again with the intent to edit).

The kludge in this blog post was what worked for me the best:

this.refs.input.setNativeProps({'editable':false});
this.refs.input.setNativeProps({'editable':true});

Upvotes: -3

Dave Welling
Dave Welling

Reputation: 1747

It may not seem like the obvious answer, but you can try the static method Keyboard.dismiss() for this. https://facebook.github.io/react-native/docs/keyboard I needed to remove the focus when uncertain which input might have it. This did the trick.

Upvotes: 4

Radek Czemerys
Radek Czemerys

Reputation: 1098

You can add ref to your text input: <TextInput ref="input"> and then call this.refs.input.blur().

Upvotes: 21

Related Questions