How to Listen for Events in children components in React Native?

Question

I want to implement an event listener from parents to children components in my React Native app, I'm using a StackNavigator as a router.

How can I listen for events occurred in the top/parent components?

Solution 1

Simply use React Native's DeviceEventEmitter.Emit your event from parent component like below:

DeviceEventEmitter.emit('eventKey', {name:'John', age:23});

and listen event in children component

componentDidMount(){
      //add listener
      this.eventListener = DeviceEventEmitter.addListener('eventKey',this.handleEvent);
}

handleEvent=(event)=>{
 //Do something with event object
}

componentWillUnmount(){
      //remove listener
      this.eventListener.remove();
}

Solution 2

The best approach instead of using an EventEmitter with my current experience (7 months later this question) is using Redux as the state holder, you can create the variables that will pass the message through the components parent-children and then connect the component to get the variables (state) changes immediately it happens.

I decided to use Rematch that is a minified version of Redux and I have got very good results. It forced me to remove all my EventEmitters and use the dispatching methods to update variables (states) that will be updated in the connected components.

Solution 3

Simplest way:

1) Create listener at your app.js (Initial starting file): Example:

(new NativeEventEmitter()).addListener('loggedIn',() => {
        setAuth(true);
    });

2) Just emit from any child: (new NativeEventEmitter()).emit('loggedIn');

Hope it will be useful to someone!)

Comments

[xDreamCoding]

You can post a questions and answer yourself, don't answer in the question.

[Surendra Agarwal]

Another method which I think may work. You can save parent component's event in the local state and then pass it to Child Component as props so whenever an event occurs, it will change the state in Parent and Child component's componentWillReceiveProps method will be called where you can handle it.

[Emisael Carrera]

It sounds good, but I can't get it working. I have passed a null parent variable then in the child view set a function to this, but when I try to call it on the parent it still being null/undefined.

[Emisael Carrera]

I like it, much better than passing the variable through screenProps of the StackNavigator. Thanks!

[Lukas]

An important thing is to also make sure to remove the listener on the componentWillUnmount() event. This should be marked as an answer

[SonKrishna]

Alternatively ContextAPI can also be used. I haven't tried it and would love to see someone explain the way to do it.