Menu
React Native has a TextInput component to accept user inputs and I'm interested in the difference between
onEndEditing
Callback that is called when text input ends.
onBlur
Callback that is called when the text input is blurred.
Is there a scenario where it can't be solved just with onBlur, when is onEndEditing useful?
264
onBlur. The onBlur event handler is called when focus has left the element (or left some element inside of it). For example, it's called when the user clicks outside of a focused text input.
To get the value in TextInput when onBlur is called with React Native, we can get the value from the onEndEditing callback. to set onEndEditing to (e) => console. log(e. nativeEvent.
To handle key presses in React, we use onKeyPress. It is passed as an attribute in <input> elements, and can be used to perform actions for any event involving the keyboard, whether you want to call a function on any key press, or only when a specific key is pressed.
First let me say I was struggling finding the answer to this question!
I believe this is rooted in history since it originates from iOS which has the native event UIControlEventEditingDidEnd. That's probably the naming before blur was introduced as an abstraction.
TL:DR;
onEndEditing should really be deprecated in my opinion, but as of right now you should use it because it is the most platform agnostic version of blur. See below.
Both onBlur and onEndEditing get an event. On iOS both of these seem to do the exact same thing, and the event has the native text. In Android, it is two different events, and only one of them has access to the text. To me this seems like a bug.
Notice the differences between Android onEndEditing and Android onBlur.
// this is undefined on Android onBlur={(e) => alert(e.nativeEvent.text)} So if reading the text during a blur, you get cross-platform usability with onEndEditing for now.
See this rnplay to see the differences in OS
193
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
