Working example for class component

[vrinch]

Is it possible you could provide a working example for for class component as my entire project was built with it and I’d like to implement an app tour instead of the regular onboarding process.

[alexandrumic]

hey @vrinch. I have used it like this:

1. Created a tour context file. For example in context/ folder. In it, I've added:

import React from 'react';
import { useTourGuideController } from 'rn-tourguide';

const withTourHOC = (Component: any) => {
  return (props: any) => {
    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
    } = useTourGuideController();

    return <Component
      tourCanStart={canStart}
      tourStart={start}
      tourStop={stop}
      tourEventEmitter={eventEmitter}
      {...props} />;
  };
};

export { withTourHOC };

2. Imported that context file in App main component:

   import { withTourHOC } from 'src/context/tour';

3. Used it as HOC for App component:

   export default withTourHOC(App);

4. Used it in App as follows:

• in componentDidMount:

  this.props.tourEventEmitter.on('start', () => console.log('start'));
  this.props.tourEventEmitter.on('stop', () => console.log('stop'));
  this.props.tourEventEmitter.on('stepChange', () => console.log(`stepChange`));

• in componentDidUpdate:

  if (prevProps.tourCanStart !== this.props.tourCanStart && this.props.tourCanStart) {
  this.props.tourStart();
  }

• in componentWillUnmount:

  this.props.tourEventEmitter.off('*', null);

Hope this helps 😄

[beidaoxiangcai]

I followed the instructions, but encountered an error “this.props.tourEventEmitter.on is undefined”. How can I resolve this?

[Yang9322]

I followed the instructions, but encountered an error “this.props.tourEventEmitter.on is undefined”. How can I resolve this?

I have also encountered this problem.

[Yang9322]

I have solved this problem, you need to wrap the corresponding Class Component with a Provider.