UseEventEmitter hook to work with react navigation navigationOptions buttons

useEventEmitter.tsx

import { useEffect, useRef } from 'react';

export const useEventEmitter = (eventEmitter, eventName: string, fn: () => void) => {
  const subscription = useRef(null);

  useEffect(() => {
    subscription.current = eventEmitter.addListener(eventName, fn);

    return () => {
      if (subscription.current) {
        subscription.current.remove();
      }
    }
  }, [eventName]);
};

useEventEmitterExample.tsx

import { EventEmitter } from 'fbemitter';

const eventEmitter = new EventEmitter();

const Emitters = {
  cancel: 'cancel',
  done: 'done',
};

const MyComp = () => {
   const handleCancel = () => {};
   const handleDone = () => {};

   useEventEmitter(eventEmitter, Emitters.cancel, handleCancel);
  useEventEmitter(eventEmitter, Emitters.done, handleDone);

   return (<Text>MyComp</Text>);
}

MyComp.navigationOptions = ({ screenProps: { t } }) => ({
  ...CreateCommonSimpleHeader({ title: t('title') }),
  headerLeft: (
    <NavBarIconButton
      onPress={() => eventEmitter.emit(Emitters.cancel)}
    >
      times
    </NavBarIconButton>
  ),
  headerRight: (
    <TextMenuButton
      onPress={() => eventEmitter.emit(Emitters.done)}
    >
      {t('Done')}
    </TextMenuButton>
  ),
  });