How to use multiple tours inside the same app?

[shikharsrivastava23]

So I have 5 Tabs in my App. I want to have different tours for each tab, how can I achieve this? I think since the Provider wraps the entire app, the controllers will act globally and there is no way to segregate TourGuideZone into different groups?

I realized that we can pass an integer to start() method and it will start the tour from that step on, but I am facing problem he ending a particular tour.

For example on Tab1 I just want tour zones 1 to 5. Tour Zone 6 is on a different screen. So how do I make the Tour guide stop at Zone number 5 in Tab 1?

[SiddhiBlackLotus]

@shikharsrivastava23 did you find any solution to this? stuck with the same scenario.

[shikharsrivastava23]

@shikharsrivastava23 did you find any solution to this? stuck with the same scenario.

@SiddhiBlackLotus

The only thing I was able to do was that instead of nesting the entire app in a provider, you can wrap individual parts of the app in the provider. So say I had a homescreen component that was accessible using the Home Tab, so I wrapped that HomeScreen Component in a tour guide provider. I did this for each of tabs and then it worked sort of.

The only thing is that now I cannot access components that are above this level - for example I can't make the tab icons part of my tour now.

Overall, I felt the behaviour wasn't very pleasant so we just dropped the idea of having a tour guide in our app for now al together.

[b-steel]

@shikharsrivastava23 @SiddhiBlackLotus

If either of you want to check out a branch I made that supports multiple tours you're welcome to. I just finished it and put it in my app.

I put in a PR so maybe it will be added to this package, but if you'd like to play around with the functionality in the meantime you can.

link

[ibealec]

@b-steel You rock. Thanks for doing that. Working for me.

[VickyStash]

@b-steel When I add your branch as a dependency using yarn add https://github.com/b-steel/rn-tourguide.git#multiple-tours And then launch the app it shows an error like this

Error: While trying to resolve module rn-tourguide from file XXX/src/App.js, the package XXX/node_modules/rn-tourguide/package.json was successfully found. However, this package itself specifies a main module field that could not be resolved (XXX/node_modules/rn-tourguide/node_modules/expo/AppEntry.js

Do I do something wrong?

[b-steel]

@VickyStash I think it's probably because I didn't build the library or push it to npm. Pretty sure that what you get from npm is the 'lib/ folder, but that's not included in version control, so if you reference my branch you'll import whatever the main file is for the expo project (in your case it's XXX/node_modules/rn-tourguide/node_modules/expo/AppEntry.js).

Pretty sure you could build the 'lib/ folder yourself with npm run build or something similar and then just reference that folder instead package.json - local paths or you could just copy the whole src/ folder into your project and then just keep it there (would probably have to update a few deps for that)

I'm not really sure how node_modules stuff gets resolved, but I suppose you could maybe fork my branch and then edit the "main" section of package.json and get it working that way somehow.

[MagicAce1988]

@b-steel how exactly are you using this in your app? I forked this repository, merged your branch into it and tried to npm install from there and I also am getting the above issue.

[b-steel]

@MagicAce1988 I needed a quick fix and so I just copied the src folder into my codebase and referenced it locally for now.

[MagicAce1988]

Fyi for people that want to use the branch @b-steel made in their app. What I did was fork this project on my company's github account as I needed it for one of their projects. After forked the project I created a pull request on that fork to merge b-steel branch into master. I merged the pull request. I also had to make a small fix as I was getting an error whenever I was trying to build. So clone the project your forked locally and in the files AnimatedPath.tsx and AnimatedPath.web.tsx add a type of any to the variables otherwise you will get a typescriot complaint on build so for example in AnimatedPath instead of

export const AnimatedSvgPath = Animated.createAnimatedComponent(Path)

have it like this

export const AnimatedSvgPath:any = Animated.createAnimatedComponent(Path)

Then in my package json I added the dependency like this:

"rn-tourguide": "https://github.com/mycompanyaccount/rn-tourguide.git"

in the package json of your project in scripts section also add this one:

"postinstall": "cd ./node_modules/rn-tourguide && yarn && yarn tsc && yarn build && yarn config:npm && rm -rf src && find node_modules/* -type d | grep -v \"hoist-non-react-statics\" | xargs rm -rf"

Now run your yarn and pod install like ussualy and you should be able to use the multiple tours feature like explained in the readme.

Thanks @b-steel for this. Much appreciated.

[surbhitrao]

No need to import a fork of the library. Use the latest version of this library from this repo itself and follow these instructions:

1. Import only useTourGuideController import { useTourGuideController, } from 'rn-tourguide';

2. Use the imported hook and pass in the unique tourkey const { canStart, start, stop, eventEmitter, TourGuideZone, tourKey, } = useTourGuideController('unique_tour_key');

   3. Pass the tourkey as a prop <TourGuideZone zone={3} tourKey={tourKey} shape={'rectangle'} text="Send Predefined responses to the user"> </TourGuideZone>

[nicencina]

@surbhitrao -- all of the documentation that I have read indicates that this should work, however when I pass a unique_tour_key to useTourGuideController it returns an undefined eventEmitter. Calling eventEmitter then returns an error cannot read property 'on' undefined.

I can get past this on subsequent tabs/tours by pulling the TourGuideZone from the hook (using a unique_tour_key) and using that TourGuideZone to invoke a tab-specific tour, but then I don't have access to an eventEmitter, which I need in order to set page-specific handlers.

Is anyone else experiencing issues when passing in a unique_tour_key?

[dorhuri123]

@nicencina I have exactly the same problem did you manage to fix it?

[sabeti]

@nicencina, @dorhuri123 I had the same problem. I ended up importing the "useTourGuideController" twice, and the workaround worked:

import {
    useTourGuideController as useTourGuideControllerTour1,
    useTourGuideController as useTourGuideControllerTour2
} from 'rn-tourguide';

const {
    canStart: canStartTour1,
    start: startTour1,
    eventEmitter: eventEmitterTour1,
    TourGuideZone: TourGuideZoneTour1
} = useTourGuideControllerTour1();

const {
    canStart: canStartTour2,
    start: startTour2,
    eventEmitter: eventEmitterTour2,
    TourGuideZone: TourGuideZoneTour2
} = useTourGuideControllerTour2();