Functional component example with hooks

[ShivamJoker]

If anyone is using this library with react hooks and can provide a simple example then it will really helpful.

[Rushil10]

Yes Please

[tobiaseisenschenk]

I have setup with a react context and hooks - suppose I can share it if this is still of interest?

[prscX]

@tobiaseisenschenk: Would be helpful for folks if you can share a snippet of the same.

Thanks,
Pranav

[brownieboy]

I had a go at converting the Example/App.js over to functional component and hooks. I got it kind of working, but as I got deeper into it, I decided that this library wasn't for me.

I'll leave it here in case it's of any help to others though.

// imports and styles not shown.  Keep the same as in current code.

const App = () => {
  const appTourTargets = useRef([]);

  useEffect(() => {
    DeviceEventEmitter.addListener(
      'event',
      'onShowSequenceStepEvent',
      (e: Event) => {
        console.log(e);
      },
    );

    DeviceEventEmitter.addListener(
      'event',
      'finishSequenceListener',
      (e: Event) => {
        console.log(e);
      },
    );

    return () => {
      DeviceEventEmitter.removeListener('event', 'onShowSequenceStepEvent');
      DeviceEventEmitter.removeListener('event', 'finishSequenceListener');
    };
  }, []); // No params, so runs only once (like ComponentDidMount)

  useLayoutEffect(() => {
    setTimeout(() => {
      let appTourSequence = new AppTourSequence();
      appTourTargets.current.forEach(appTourTarget => {
        appTourSequence.add(appTourTarget);
      });

      AppTour.ShowSequence(appTourSequence);
    }, 1000);
  }, [appTourTargets]);

  return (
    <View style={styles.container}>
      <Top
        style={styles.top}
        addAppTourTarget={appTourTarget => {
          appTourTargets.current.push(appTourTarget);
        }}
      />
      <Center
        style={styles.center}
        addAppTourTarget={appTourTarget => {
          appTourTargets.current.push(appTourTarget);
        }}
      />
      <Bottom
        style={styles.bottom}
        addAppTourTarget={appTourTarget => {
          appTourTargets.current.push(appTourTarget);
        }}
      />
    </View>
  );
};

export default App;