React Native Input onEndEditing weird callback

Viewed 1150

So I try to build a form validation with React Native and the onEndEditing.
So my React Native code looks like this:

<TextInput onSubmitEditing={value => console.log(value)} />

When the user stops editing it should log the value. But instead of the log I get this:

{"_dispatchInstances": {"_debugHookTypes": null, "_debugID": 1400, "_debugIsCurrentlyTiming": false, 
"_debugNeedsRemount": false, "_debugOwner": {"_debugHookTypes": [Array], "_debugID": 1394, 
"_debugIsCurrentlyTiming": false, "_debugNeedsRemount": false, "_debugOwner": [FiberNode], "_debugSource": 
[Object], "actualDuration": 0, "actualStartTime": 5771, "alternate": [FiberNode], "child": [FiberNode], 
"childExpirationTime": 0, "dependencies": null, "effectTag": 517, "elementType": [Function 
InternalTextInput], "expirationTime": 0, "firstEffect": [Circular], "index": 0, "key": null, "lastEffect": 
[FiberNode], "memoizedProps": [Object], "memoizedState": [Object], "mode": 8, "nextEffect": null, 
"pendingProps": [Object], "ref": null, "return": [FiberNode], "selfBaseDuration": 0, "sibling": null, 
"stateNode": null, "tag": 0, "treeBaseDuration": 0, "type": [Function InternalTextInput], "updateQueue": 
[Object]}, "_debugSource": {"columnNumber": 7, "fileName": 
"C:\\A_USER\\App\\The_App\\\\node_modules\\react-native\\Libraries\\Components\\TextInput\\TextInput.js", 
"lineNumber": 1111}, "actualDuration": 0, "actualStartTime": 5771, "alternate": {"_debugHookTypes": null, 
"_debugID": 1400, "_debugIsCurrentlyTiming": false, "_debugNeedsRemount": false, "_debugOwner": 
[FiberNode], "_debugSource": [Object], "actualDuration": 0, "actualStartTime": 149374, "alternate": 
[Circular], "child": null, "childExpirationTime": 0, "dependencies": null, "effectTag": 132, 
"elementType": "AndroidTextInput", "expirationTime": 0, "firstEffect": null, "index": 0, "key": null, 
"lastEffect": null, "memoizedProps": [Object], "memoizedState": null, "mode": 8, "nextEffect": null, 
"pendingProps": [Object], "ref": [Function forwardRef], "return": [FiberNode], "selfBaseDuration": 0, 
"sibling": null, "stateNode": [ReactNativeFiberHostComponent], "tag": 5, "treeBaseDuration": 0, "type": 
"AndroidTextInput", "updateQueue": null}, "child": null, "childExpirationTime": 0, "dependencies": null, 
"effectTag": 132, "elementType": "AndroidTextInput", "expirationTime": 0, "firstEffect": null, "index": 0, 
"key": null, "lastEffect": null, "memoizedProps": {"accessible": true, "allowFontScaling": true, 
"autoCapitalize": "sentences", "children": undefined, "disableFullscreenUI": undefined, "focusable": true, 
"forwardedRef": null, "mostRecentEventCount": 5, "onBlur": [Function _onBlur], "onChange": [Function 
_onChange], "onChangeText": [Function onChangeText], "onClick": [Function onClick], "onEndEditing": 
[Function onEndEditing], "onFocus": [Function _onFocus], "onResponderGrant": [Function onResponderGrant], 
"onResponderMove": [Function onResponderMove], "onResponderRelease": [Function onResponderRelease], 
"onResponderTerminate": [Function onResponderTerminate], "onResponderTerminationRequest": [Function 
onResponderTerminationRequest], "onScroll": [Function _onScroll], "onSelectionChange": [Function 
_onSelectionChange], "onStartShouldSetResponder": [Function onStartShouldSetResponder], 
"rejectResponderTermination": true, "selection": null, "style": [Array], "text": "hallo", 
"textBreakStrategy": undefined, "underlineColorAndroid": "transparent", "value": "hallo"}, 
"memoizedState": null, "mode": 8, "nextEffect": null, "pendingProps": {"accessible": true, 
"allowFontScaling": true, "autoCapitalize": "sentences", "children": undefined, "disableFullscreenUI": 
undefined, "focusable": true, "forwardedRef": null, "mostRecentEventCount": 5, "onBlur": [Function 
_onBlur], "onChange": [Function _onChange], "onChangeText": [Function onChangeText], "onClick": [Function 
onClick], "onEndEditing": [Function onEndEditing], "onFocus": [Function _onFocus], "onResponderGrant": 
[Function onResponderGrant], "onResponderMove": [Function onResponderMove], "onResponderRelease": 
[Function onResponderRelease], "onResponderTerminate": [Function onResponderTerminate], 
"onResponderTerminationRequest": [Function onResponderTerminationRequest], "onScroll": [Function 
_onScroll], "onSelectionChange": [Function _onSelectionChange], "onStartShouldSetResponder": [Function 
onStartShouldSetResponder], "rejectResponderTermination": true, "selection": null, "style": [Array], 
"text": "hallo", "textBreakStrategy": undefined, "underlineColorAndroid": "transparent", "value": 
"hallo"}, "ref": [Function forwardRef], "return": {"_debugHookTypes": null, "_debugID": 1398, 
"_debugIsCurrentlyTiming": false, "_debugNeedsRemount": false, "_debugOwner": [FiberNode], "_debugSource": 
[Object], "actualDuration": 0, "actualStartTime": 5771, "alternate": [FiberNode], "child": [Circular], 
"childExpirationTime": 0, "dependencies": null, "effectTag": 5, "elementType": [Function 
TouchableWithoutFeedback], "expirationTime": 0, "firstEffect": [Circular], "index": 0, "key": null, 
"lastEffect": [Circular], "memoizedProps": [Object], "memoizedState": [Object], "mode": 8, "nextEffect": 
null, "pendingProps": [Object], "ref": null, "return": [FiberNode], "selfBaseDuration": 0, "sibling": 
null, "stateNode": [TouchableWithoutFeedback], "tag": 1, "treeBaseDuration": 0, "type": [Function 
TouchableWithoutFeedback], "updateQueue": [Object]}, "selfBaseDuration": 0, "sibling": null, "stateNode": 
{"_children": [Array], "_internalFiberInstanceHandleDEV": [Circular], "_nativeTag": 177, "clear": 
[Function clear], "getNativeRef": [Function getNativeRef], "isFocused": [Function isFocused], 
"viewConfig": [Object]}, "tag": 5, "treeBaseDuration": 0, "type": "AndroidTextInput", "updateQueue": 
null}, "_dispatchListeners": [Function onSubmitEditing], "_targetInst": {"_debugHookTypes": null, 
"_debugID": 1400, "_debugIsCurrentlyTiming": false, "_debugNeedsRemount": false, "_debugOwner": 
{"_debugHookTypes": [Array], "_debugID": 1394, "_debugIsCurrentlyTiming": false, "_debugNeedsRemount": 
false, "_debugOwner": [FiberNode], "_debugSource": [Object], "actualDuration": 0, "actualStartTime": 5771, 
"alternate": [FiberNode], "child": [FiberNode], "childExpirationTime": 0, "dependencies": null, 
"effectTag": 517, "elementType": [Function InternalTextInput], "expirationTime": 0, "firstEffect": 
[Circular], "index": 0, "key": null, "lastEffect": [FiberNode], "memoizedProps": [Object], 
"memoizedState": [Object], "mode": 8, "nextEffect": null, "pendingProps": [Object], "ref": null, "return": 
[FiberNode], "selfBaseDuration": 0, "sibling": null, "stateNode": null, "tag": 0, "treeBaseDuration": 0, 
"type": [Function InternalTextInput], "updateQueue": [Object]}, "_debugSource": {"columnNumber": 7, 
"fileName": "C:\\A_USER\\App\\The_App\\\\node_modules\\react-
native\\Libraries\\Components\\TextInput\\TextInput.js", "lineNumber": 1111}, "actualDuration": 0, 
"actualStartTime": 5771, "alternate": {"_debugHookTypes": null, "_debugID": 1400, 
"_debugIsCurrentlyTiming": false, "_debugNeedsRemount": false, "_debugOwner": [FiberNode], "_debugSource": 
[Object], "actualDuration": 0, "actualStartTime": 149374, "alternate": [Circular], "child": null, 
"childExpirationTime": 0, "dependencies": null, "effectTag": 132, "elementType": "AndroidTextInput", 
"expirationTime": 0, "firstEffect": null, "index": 0, "key": null, "lastEffect": null, "memoizedProps": 
[Object], "memoizedState": null, "mode": 8, "nextEffect": null, "pendingProps": [Object], "ref": [Function 
forwardRef], "return": [FiberNode], "selfBaseDuration": 0, "sibling": null, "stateNode": 
[ReactNativeFiberHostComponent], "tag": 5, "treeBaseDuration": 0, "type": "AndroidTextInput", 
"updateQueue": null}, "child": null, "childExpirationTime": 0, "dependencies": null, "effectTag": 132, 
"elementType": "AndroidTextInput", "expirationTime": 0, "firstEffect": null, "index": 0, "key": null, 
"lastEffect": null, "memoizedProps": {"accessible": true, "allowFontScaling": true, "autoCapitalize": 
"sentences", "children": undefined, "disableFullscreenUI": undefined, "focusable": true, "forwardedRef": 
null, "mostRecentEventCount": 5, "onBlur": [Function _onBlur], "onChange": [Function _onChange], 
"onChangeText": [Function onChangeText], "onClick": [Function onClick], "onEndEditing": [Function 
onEndEditing], "onFocus": [Function _onFocus], "onResponderGrant": [Function onResponderGrant], 
"onResponderMove": [Function onResponderMove], "onResponderRelease": [Function onResponderRelease], 
"onResponderTerminate": [Function onResponderTerminate], "onResponderTerminationRequest": [Function 
onResponderTerminationRequest], "onScroll": [Function _onScroll], "onSelectionChange": [Function 
_onSelectionChange], "onStartShouldSetResponder": [Function onStartShouldSetResponder], 
"rejectResponderTermination": true, "selection": null, "style": [Array], "text": "hallo", 
"textBreakStrategy": undefined, "underlineColorAndroid": "transparent", "value": "hallo"}, 
"memoizedState": null, "mode": 8, "nextEffect": null, "pendingProps": {"accessible": true, 
"allowFontScaling": true, "autoCapitalize": "sentences", "children": undefined, "disableFullscreenUI": 
undefined, "focusable": true, "forwardedRef": null, "mostRecentEventCount": 5, "onBlur": [Function 
_onBlur], "onChange": [Function _onChange], "onChangeText": [Function onChangeText], "onClick": [Function 
onClick], "onEndEditing": [Function onEndEditing], "onFocus": [Function _onFocus], "onResponderGrant": 
[Function onResponderGrant], "onResponderMove": [Function onResponderMove], "onResponderRelease": 
[Function onResponderRelease], "onResponderTerminate": [Function onResponderTerminate], 
"onResponderTerminationRequest": [Function onResponderTerminationRequest], "onScroll": [Function 
_onScroll], "onSelectionChange": [Function _onSelectionChange], "onStartShouldSetResponder": [Function 
onStartShouldSetResponder], "rejectResponderTermination": true, "selection": null, "style": [Array], 
"text": "hallo", "textBreakStrategy": undefined, "underlineColorAndroid": "transparent", "value": 
"hallo"}, "ref": [Function forwardRef], "return": {"_debugHookTypes": null, "_debugID": 1398, 
"_debugIsCurrentlyTiming": false, "_debugNeedsRemount": false, "_debugOwner": [FiberNode], "_debugSource": 
[Object], "actualDuration": 0, "actualStartTime": 5771, "alternate": [FiberNode], "child": [Circular], 
"childExpirationTime": 0, "dependencies": null, "effectTag": 5, "elementType": [Function 
TouchableWithoutFeedback], "expirationTime": 0, "firstEffect": [Circular], "index": 0, "key": null, 
"lastEffect": [Circular], "memoizedProps": [Object], "memoizedState": [Object], "mode": 8, "nextEffect": 
null, "pendingProps": [Object], "ref": null, "return": [FiberNode], "selfBaseDuration": 0, "sibling": 
null, "stateNode": [TouchableWithoutFeedback], "tag": 1, "treeBaseDuration": 0, "type": [Function 
TouchableWithoutFeedback], "updateQueue": [Object]}, "selfBaseDuration": 0, "sibling": null, "stateNode": 
{"_children": [Array], "_internalFiberInstanceHandleDEV": [Circular], "_nativeTag": 177, "clear": 
[Function clear], "getNativeRef": [Function getNativeRef], "isFocused": [Function isFocused], 
"viewConfig": [Object]}, "tag": 5, "treeBaseDuration": 0, "type": "AndroidTextInput", "updateQueue": 
null}, "bubbles": undefined, "cancelable": undefined, "currentTarget": {"_children": [], 
"_internalFiberInstanceHandleDEV": {"_debugHookTypes": null, "_debugID": 1400, "_debugIsCurrentlyTiming": 
false, "_debugNeedsRemount": false, "_debugOwner": [FiberNode], "_debugSource": [Object], 
"actualDuration": 0, "actualStartTime": 5771, "alternate": [FiberNode], "child": null, 
"childExpirationTime": 0, "dependencies": null, "effectTag": 132, "elementType": "AndroidTextInput", 
"expirationTime": 0, "firstEffect": null, "index": 0, "key": null, "lastEffect": null, "memoizedProps": 
[Object], "memoizedState": null, "mode": 8, "nextEffect": null, "pendingProps": [Object], "ref": [Function 
forwardRef], "return": [FiberNode], "selfBaseDuration": 0, "sibling": null, "stateNode": [Circular], 
"tag": 5, "treeBaseDuration": 0, "type": "AndroidTextInput", "updateQueue": null}, "_nativeTag": 177, 
"clear": [Function clear], "getNativeRef": [Function getNativeRef], "isFocused": [Function isFocused], 
"viewConfig": {"Commands": [Object], "Constants": [Object], "NativeProps": [Object], "bubblingEventTypes": 
[Object], "directEventTypes": [Object], "uiViewClassName": "AndroidTextInput", "validAttributes": 
[Object]}}, "defaultPrevented": undefined, "dispatchConfig": {"phasedRegistrationNames": {"bubbled": 
"onSubmitEditing", "captured": "onSubmitEditingCapture"}}, "eventPhase": undefined, "isDefaultPrevented": 
[Function functionThatReturnsFalse], "isPropagationStopped": [Function functionThatReturnsFalse], 
"isTrusted": undefined, "nativeEvent": {"target": 177, "text": "hallo"}, "target": {"_children": [], 
"_internalFiberInstanceHandleDEV": {"_debugHookTypes": null, "_debugID": 1400, "_debugIsCurrentlyTiming": 
false, "_debugNeedsRemount": false, "_debugOwner": [FiberNode], "_debugSource": [Object], 
"actualDuration": 0, "actualStartTime": 5771, "alternate": [FiberNode], "child": null, 
"childExpirationTime": 0, "dependencies": null, "effectTag": 132, "elementType": "AndroidTextInput", 
"expirationTime": 0, "firstEffect": null, "index": 0, "key": null, "lastEffect": null, "memoizedProps": 
[Object], "memoizedState": null, "mode": 8, "nextEffect": null, "pendingProps": [Object], "ref": [Function 
forwardRef], "return": [FiberNode], "selfBaseDuration": 0, "sibling": null, "stateNode": [Circular], 
"tag": 5, "treeBaseDuration": 0, "type": "AndroidTextInput", "updateQueue": null}, "_nativeTag": 177, 
"clear": [Function clear], "getNativeRef": [Function getNativeRef], "isFocused": [Function isFocused], 
"viewConfig": {"Commands": [Object], "Constants": [Object], "NativeProps": [Object], "bubblingEventTypes": 
[Object], "directEventTypes": [Object], "uiViewClassName": "AndroidTextInput", "validAttributes": 
[Object]}}, "timeStamp": 1618571323238, "type": undefined}

What could it be or is there a other way to only log the value if the user does not edit the text anymore? For IOS and Android

1 Answers

React Native's onSubmitEditing is returning an event instead of a plain value.

In order to access the value of the input, you have to access e.nativeEvent.text. So in your case it would be value.nativeEvent.text.

Please see all the additional options here:

https://reactnative.dev/docs/textinput#onsubmitediting

Related