Is there a way to create and dispatch/trigger custom event with react-navigation?

Question

With DOM, you can easily create a trigger custom event with Javascript like so:

var event = new Event('build');

// Listen for the event.
elem.addEventListener('build', function (e) { /* ... */ }, false);

// Dispatch the event.
elem.dispatchEvent(event);

Is there a way to do that with React-Native?

You could try [this](https://github.com/primus/eventemitter3) library. It might help. — Christopher Bradshaw, Sep 25 '18 at 15:51
thanks for your suggestion I will try it and let you know @ChristopherBradshaw — Monero Jeanniton, Sep 25 '18 at 16:54
@JRK I have create a wrapper for `AsynchStorage` called `deviceStorage` where, in my dictionary application, user can add word to favorite list/array saved in the `deviceStorage` with a specific key. I want to know whenever a new word as been added to the `favorites` list so I can reflect this update to the home which is actually previous screen of the application. `componentDidMount` won't work since the home page has already been mounted (still in screen stack). PS: the screen where you actually add a new word in favorite list, is pushed from the home screen. Won't mind sharing u code. Thx — Monero Jeanniton, Sep 25 '18 at 17:07
@JRK I want to create custom Events/EventEmitters within RN with Javascript. — Monero Jeanniton, Sep 25 '18 at 17:09

score 2 · Answer 1 · answered Dec 15 '22 at 23:56

2

React Native provides NativeEventEmitter for handling custom events.

import { NativeEventEmitter } from 'react-native';
const eventEmitter = new NativeEventEmitter();

eventEmitter.emit('custom-event', { data: 'test' });

eventEmitter.addListener('custom-event', event => {
  console.log(event); // { data: 'test' }
});

answered Dec 15 '22 at 23:56

Željko Šević

3,743
2
26
23

This is good too. How about if you want to share the event on different pages? 1. Can you use a react-native provider to share access to `eventEmitter`? https://reactjs.org/docs/context.html – Monero Jeanniton Dec 22 '22 at 02:38

score -2 · Accepted Answer · answered Dec 12 '19 at 17:01

There are actually two solutions for my case:

https://reactnavigation.org/docs/en/function-after-focusing-screen.html
Use react-navigation to know when the component/screen has received focus and trigger an action with a 'didFocus' event listener:

import React, { Component } from 'react';
import { View } from 'react-native';
import { withNavigation } from 'react-navigation';

class TabScreen extends Component {
  componentDidMount() {
    const { navigation } = this.props;
    this.focusListener = navigation.addListener('didFocus', () => {
      // The screen is focused
      // Call any action
    });
  }

  componentWillUnmount() {
    // Remove the event listener
    this.focusListener.remove();
  }

  render() {
    return <View />;
  }
}

export default withNavigation(TabScreen);

https://redux.js.org/basics/example
Use Redux as one global state container for your application.

I don't see how is your answer related to the question for "Custom events". — Ardalan, Jun 09 '22 at 13:44
I have reformatted the question. I was only aiming to capture when there is a change of screen (when the user navigates to a new screen). And you can use `navigation.addListener` to do this. Also, even though, I have never used Redux before, I am assuming you can just watch for the change in the global store (with a reducer or with `useEffect`). — Monero Jeanniton, Dec 21 '22 at 23:34

Is there a way to create and dispatch/trigger custom event with react-navigation?

2 Answers2

Linked