How to differentiate between the event being emitted

[memon07]

The working of rn-tourguide is to first wrap a TourGuideProvider around your main App.js and for using the functionalty you have to wrap TourGuideZone around you desired component's View.

App.js

<TourGuideProvider
   preventOutsideInteraction={true}
     {...{
       borderRadius: 16,
       tooltipComponent: TooltipComponent,
      }}>
   <NavStack notif={notifBool} />
</TourGuideProvider>

TooltipComponent

const TooltipComponent = ({
 isFirstStep,
 isLastStep,
 handleNext,
 handlePrev,
 handleStop,
 currentStep,
}) => (
(
  <View>
    <Text>{'Welcome'}</Text>
    <View>
      <TouchableOpacity>
        <Text>{'skip'}</Text>
      </TouchableOpacity>
      {!isFirstStep && (
        <TouchableOpacity
          onPress={() => handlePrev()}>
          <Text>{'prev'}</Text>
        </TouchableOpacity>
      )}
      {!isLastStep && (
        <TouchableOpacity
          onPress={() => handleNext()}>
          <Text>{'next'}</Text>
        </TouchableOpacity>
      )}
      {isLastStep && (
        <TouchableOpacity
          onPress={() => handleStop()}>
          <Text>{'finish'}</Text>
        </TouchableOpacity>
      )}
    </View>
  </View>
 )
);

The problem i am facing is that when i am using the custom Component i.e. TooltipComponent , the functions passed handlePrev, handleNext, handleStop does not have a callback method.so if i am using the TourGuideZone in some another component i will have to listen to a event emitted by the package and check if its a 'start' or 'stop' and accordingly you can do you further process.

Because the event emitter is being run in useEffect all the emitters starts running before even they are called. these causes the start and stop event running simultaneously. also there is no keys (as per my understanding) provided to differentiate between the events that are emitted.

Is there anyway to differentiate between eventEmitter.on('start') and eventEmitter.on('stop').

Demo.js

const Demo = ({navigation}) => {
 const {
   canStart, // a boolean indicate if you can start tour guide
   start, // a function to start the tourguide
   stop, // a function  to stopping it
   eventEmitter, // an object for listening some events
   getCurrentStep,
   tourKey,
 } = useTourGuideController();

   useEffect(() => {
     if (canStart) {
       start();
     }
     return () => {
      stop();
    };
  }, [canStart]);

  const handleOnStop = () => {
    console.log('do something after stop');
  } 

   useEffect(() => {
     eventEmitter.on('start', ()=> console.log('do something'));
     eventEmitter.on('stop', handleOnStop);
       return () => {
     eventEmitter.on('start', ()=> console.log('do something'));
     eventEmitter.off('stop', handleOnStop);
    };
   }, [eventEmitter]);

   return(
     <View>
        <TourGuideZone
          tourKey={tourKey}
          zone={1}
          text={' hello'}
        />
     </View>
 )
}

Can anyone please help me on this , if i have mistakenly forgot to add something to make this work. thanks in advance.

Yes i have asked this same question on stackOverflow too.

[jlmonroy13]

if u are using different tours you can pass the tourKey to useTourGuideController hook like this useTourGuideController('tourName'), in that way you will be sure that the eventEmitters are from that specific tour