React-native-router-flux: Receiving "synthetic event is reused" warning when navigating between scenes using redux sample code

[joeferraro]

Version

Tell us which versions you are using:

• react-native-router-flux v3.36.0
• react-native v0.35.0

Expected behaviour

Navigating from one scene to another using the redux example should work without React performance warning

Actual behaviour

Receiving the following warning when navigating between scenes using the sample code provided: "Warning: This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the property "type" on a released/nullified synthetic event. This is set to null. If you must keep the original synthetic event around, use event.persist()."

Steps to reproduce

1. Implement the sample code for redux found here, including the following in your first component:

<Text onPress={Actions.home}>Go home</Text>

1. Run the app and tap on Go home
2. App is directed to home view, but several warnings appear with the text above

[jamielob]

@joeferraro I'm also seeing this - did you have any luck figuring out what was going on?

[Almouro]

I'm seeing the same thing :\

[jamielob]

@joeferraro @Almouro - I've found that changing from

onPress={Actions.otherScene}

to

onPress={() => Actions.otherScene()}

has removed with these errors.

[Almouro]

Thanks @jamielob, this was the problem for me too. :)

[gustavjf]

Thanks @jamielob.

I wonder why the mini tutorial uses onPress={Actions.Foo} instead. Could there be a reason for that?

[EliCDavis]

jamielob's suggestion fixed the error for me.

Noob here though, what's going on differently under the hood when you pass it an anonymous function vs an actual reference.

[CodyBrouwers]

In case anyone else comes across this error and the above doesn't work, I encountered it because I was passing the first argument from onSubmitEditing on a <TextInput> to a function like so:

<TextInput
  onSubmitEditing={(text) => this.performSearch(text)} // Should be event, not text
/>

That text variable is actually the submit event which is what ended up giving me the message above and a headache debugging for a while.

[qianmenglin]

event.preventDefault();
event.stopPropagation();

[jay51]

I think the problem is, you're trying to access the event object after it's released and redefined.

React Docs => The SyntheticEvent is pooled. This means that the SyntheticEvent object will be reused and all properties will be nullified after the event callback has been invoked. This is for performance reasons. As such, you cannot access the event in an asynchronous way.

if you need to use an attribute from the event obj then you would have to access it like this

function displayForm(event){
    console.log(event) // will error
    console.log(event.type) will work
    const eventType = evnet.type; 
   // or call event.persist();

If you want to access the event properties in an asynchronous way, you should call event.persist() on the event, which will remove the synthetic event from the pool and allow references to the event to be retained by user code.

[demoran23]

I'm not sure if the cause of this issue has been clearly explained, so please allow me to share my understanding and how I fixed it.

TouchableWithoutFeedback defines onPress?: (event: GestureResponderEvent) => void;.

Thus, when providing simply the function name, the parameter that is passed in is a GestureResponderEvent - and there's a good chance that isn't what you expect.

By changing from the function name to an anonymous function that invokes your function (eg () => yourFunction()), the GestureResponderEvent is not passed through to your function.

[FSBalbuena]

Guys i had this problem on a navigator.

Screen.navigationOptions=({navigation})=>{
const handleEditButton=navigation.navigate.bind(this,"EditProduct")
return {
    headerTitle:"My Products",
    headerRight:<CustomHeaderButton 
    iconName="ios-add"
    title="Add"
    iconSize={26}
    color={colors.bright}
    onPress={handleEditButton}
    />
}
}

pay attention to the method i used . I was trying to bind the navigate method. (Yeah, i know)

const handleAddButton=()=>navigation.navigate("EditProduct")