rn-tourguide

rn-tourguide copied to clipboard

I have 9 zones total, the last zone I want to be part of these 9 is on a bottom bar nav that is loaded in the root component and that becomes the only step that is recognized (so it just ends up being 1 step and forgets the other 8). I tried to delay the start() with a set timeout, but no luck, if I change that last zone to be the first one, everything runs fine? I am guessing it has to do with the order the components are loaded. This app is more complex and has a lot of UI that is built dynamically, I am trying to wrap individual items inside compoments in zones as they are created. Any help is appreciated.

Also, am I able to run more than one tour, I am looking to have one per RN nav screen in my app... I tried setting this up to no avail... or a way to create them dynamically

Hi @mzupek,

I think I understand a bit about what is the problem as you described the zones in simple UI works fine but when going to something more complex we don't yet have a good solution yet.

BTW it will be a good starting point if you provide a code example on a snack (with react-navigation).

sounds good, I will provide a code example on a snack with react-navigation.

Maybe a thing you need to know: if your zones are embedded into a stack view for react-navigation and maybe be visible after a transition; if the start() occurs before the transition that may not work as expected. To fix it you have to wait until transition end. You can do it using the react-navigation listener:

const {  addListener } = useNavigation();
const [transitionEnd, setTransitionEnd] = useState(false);
useEffect(() => {
    const unsubscribe = addListener('transitionEnd', () => {
      setTransitionEnd(true);
    });

    return () => {
      if (unsubscribe) {
        unsubscribe();
      }
    };
}, []);
useEffect(() => {
  if(canStart && transitionEnd) {
    start()
  }
}, [canStart, transitionEnd])

thanks for that info that will be helpful for sure, as I am sure that is occurring.

I have some thoughts, would just love some feedback from your perspective?

The functionality that I am really looking to implement is a tour for each module in my app, most modules have a series of "react-navigation screens", I would like the main screen component of the module to be wrapped in its own <TourGuideProvider> rather than it being on the root... so I can have the tour be on a toggle on each of those main screens, giving new users an intro to using the app on their first run-through and be disabled after, also providing a menu of available tours, that will navigate them to the main screen of that specific module and start that tour.

That's my eventual end goal...lol... any thoughts/ideas are much appreciated.

I don’t see any issue to have multiple tour guide instead of one at the root if you are sure there isn’t nested tour guide provider.

But think about it, with only one provider at root you gain less code.

And even if some are the same zone number that will not cause issue if views with tour guide are not one over another. Actually the calculation is acted when render.

I appreciate your feedback and guidance, I will post my findings. I am still am putting together a simple implementation with react native navigation as a test, I will add complexity from there.