CODEWITHSUNDEEP
javascriptreact-nativeevent-handlingexpo
lucascaro
lucascaro

Reputation: 19267

logging react native event with console.log not firing and eventually crashes the app

When adding an event to a ScrollView in react-native, I noticed the event handler was not firing, and the app will eventually and silently crash after a few seconds.

This is what my handler looked like, all I was doing was a simple console.log on the event:

// Does not work:
<FlatList
  ...
  onScrollEndDrag={e => {
    console.log(e);
  }}
  ...
/>

I noticed that if I didn't pass the parameter, the event handler worked:

// Works:
<FlatList
  ...
  onScrollEndDrag={e => {
    console.log('event');
  }}
  ...
/>

But I can't access my event data.

Why is the event handler failing when I try to access the event with console.log here?

Upvotes: 2

Views: 2175

Answers (1)

lucascaro
lucascaro

Reputation: 19267

I found an explanation on github:

The problem may be that the event object has fields that are cyclic or otherwise unserializable. Try logging event.nativeEvent (which is the ViewLayout object) instead.

This is due to how expo (XDE) implements console.logging to send data from a device to the computer, by using pretty-format to serialize the data.

This is indeed a bug within expo as of version 31. This has been fixed in master, but I will leave this answer here in case it helps anyone.

The solution is to use e.nativeEvent rather than e in the console.log line, since the nativeEvent has no circular references.

Upvotes: 2

Related Questions