xcarpentier/rn-tourguide

🚩Make an interactive step by step tour guide for your react-native app (a rewrite of react-native-copilot)

rn-tourguide's Issues

Is there any way to styling of tooltip ?

How to use multiple tours inside the same app?

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?

How to differentiate between the event being emitted

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.

Working example for class component

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.

TourGuideProvider causing multiple re-renders

TourGuideProvider causing multiple re-renders

index.js file

<Redux>
    <App /> 
</Redux>

App.tsx file

<TourGuideProvider>
   <Navigator> 
</TourGuideProvider>

Navigator.tsx file

<HomeScreen />. <--- multiple re-render's

If we comment TourGuideProvider in App.tsx no re-render's, If we un-comment causing re-render

Is there a way to keep TooltipComponent visible?

Is there a way to keep TooltipComponent visible during step switching like it shown on demo gif?

If you try demo link right now it hiding and showing tooltip on every step change.

Thank you in advance

Could you provide a working example with class component?

Hi, I love the package. Could you please provide an example with class component? Thanks in advance.

Design issue

I am getting issue with design like this image

i will set tourguide at first textbox but it showing bottom side. not getting proper design.

anyone can have solution?

Code:

 <TourGuideProvider androidStatusBarVisible>
      <CreateSignatureContent props={props} />
    </TourGuideProvider>

content zone like this:

<TourGuideZone
                zone={1}
                shape="rectangle"
                text="Signed by show in top of the signature to identify name"
              >
.............//// stuff
</TourGuideZone>

How can I style the labels of the tooltip?

I would like to change the style of the buttons Skip , next, previous etc.
I would like to change the background color , text color, fontSize etc

The mask not entirely wrapping up on the shape of component

Hello there i am using this package to implement custom tour guide, but the mask of tooltip not wrapping my tooltip entirely. I don't what i am missing.

Here's the Component wrapping my view:

<TourGuideZone
borderRadius={90}
text={Title}
zone={index + 3}
shape="circle"

>
  <TouchableOpacity
    style={{
      borderRadius: 90,
      width: 41,
      height: 41,
      marginHorizontal: theme.spacing.s,
      backgroundColor,
      justifyContent: "center",
      alignItems: "center",
    }}
    {...{ onPress }}
  >
    {children}
 </TouchableOpacity>

And here's the output:

also in next step
here's the code:

 <TourGuideZone
      borderRadius={31}
      text={"Add To Contact"}
      zone={7}
      shape="circle"
    >
      <Box width={"100%"} position="absolute" alignItems="center" bottom={-50}>
        <Button
          {...{
            size: "90%",
            height: 50,
            edit: true,
            btnColor: theme.colors.buttonSecondary,
            btnText: "Add To Contacts",
            onPress: onPress,
          }}
        />
      </Box>
    </TourGuideZone>

and here's the output:

can you point me to the right direction?

Im getting error "undefined is not an object (evaluating "eventEmitter.on"

Im getting error "undefined is not an object (evaluating "eventEmitter.on"
Any tips?

How to pass provider context to grand-children

I'm trying to wrap components of the screen's children with TourGuideZone, but I am getting context undefined. How can I pass the same TourGuideProvider context onto the children of the screen?

Ex:
function App({ ...props }) { return ( <TourGuideProvider> <Child {...props} /> </TourGuideProvider> ); }

function Child({ ...props }) { return ( <Grandchild {...props} /> ); }

function Grandchild({ ...props }) { return ( <TourGuideZone> <Button/> // <--- I want this to be a step of the tour </TourGuideZone> ); }

Thanks

Edit- Resolved with proper wrapping of the TourGuideProvider

Maximum call stack size exceeded

Hey, Your library looks great, however I stumble on a problem. I want the tour to start when the app is mounted, so I tried your demo app, but I changed out

    React.useEffect(() => {
        eventEmitter.on('start', () => console.log('start'))
        eventEmitter.on('stop', () => console.log('stop'))
        eventEmitter.on('stepChange', () => console.log(`stepChange`))

        return () => eventEmitter.off('*', null)
    }, [])

with

    React.useEffect(() => {
        start()
    }, [])

Then start runs in an infinite loop. I printed out the values in

const start = async (fromStep) => {
        const currentStep = fromStep
            ? steps[fromStep]
            : getFirstStep();
        if (startTries > MAX_START_TRIES) {
            setStartTries(0);
            return;
        }
        console.log({fromStep, currentStep, steps});
        if (!currentStep) {
            setStartTries(startTries + 1);
            start(fromStep);
        }
        else {
            eventEmitter.emit('start');
            await setCurrentStep(currentStep);
            setVisible(true);
            setStartTries(0);
        }
    };

which is:

currentStep: null
fromStep: undefined
steps: {}

So, currentStep is always null, hence it goes in an infinite loop, it might seem like there is a bug when using it onMount? :)

RN version: 0.62.2
Full code

import * as React from 'react'
import { Image, Platform, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
import {
    TourGuideProvider,
    TourGuideZone,
    TourGuideZoneByPosition,
    useTourGuideController
} from 'rn-tourguide'

const uri = 'https://pbs.twimg.com/profile_images/1223192265969016833/U8AX9Lfn_400x400.jpg'

// Add <TourGuideProvider/> at the root of you app!
function App() {
    return (
        <TourGuideProvider {...{ borderRadius: 16 }}>
            <AppContent />
        </TourGuideProvider>
    )
}

const AppContent = () => {
    const iconProps = { size: 40, color: '#888' }

    // Use Hooks to control!
    const { start, stop, eventEmitter } = useTourGuideController()

    React.useEffect(() => {
        start()
    }, [])

    return (
        <View style={styles.container}>
            {/* Use TourGuideZone only to wrap */}
            <TourGuideZone
                keepTooltipPosition
                zone={2}
                text={'A react-native-copilot remastered! 🎉'}
                borderRadius={16}>
                <Text style={styles.title}>{'Welcome to the demo of\n"rn-tourguide"'}</Text>
            </TourGuideZone>
            <View style={styles.middleView}>
                <TouchableOpacity style={styles.button} onPress={() => start()}>
                    <Text style={styles.buttonText}>START THE TUTORIAL!</Text>
                </TouchableOpacity>

                <TourGuideZone zone={3} shape={'rectangle_and_keep'}>
                    <TouchableOpacity style={styles.button} onPress={() => start(4)}>
                        <Text style={styles.buttonText}>Step 4</Text>
                    </TouchableOpacity>
                </TourGuideZone>
                <TouchableOpacity style={styles.button} onPress={() => start(2)}>
                    <Text style={styles.buttonText}>Step 2</Text>
                </TouchableOpacity>
                <TouchableOpacity style={styles.button} onPress={stop}>
                    <Text style={styles.buttonText}>Stop</Text>
                </TouchableOpacity>
                <TourGuideZone
                    zone={1}
                    shape="circle"
                    text={'With animated SVG morphing with awesome flubber 🍮💯'}>
                    <Image source={{ uri }} style={styles.profilePhoto} />
                </TourGuideZone>
            </View>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        paddingTop: 40
    },
    title: {
        fontSize: 24,
        textAlign: 'center'
    },
    profilePhoto: {
        width: 140,
        height: 140,
        borderRadius: 70,
        marginVertical: 20
    },
    middleView: {
        flex: 1,
        alignItems: 'center'
    },
    button: {
        backgroundColor: '#2980b9',
        paddingVertical: 10,
        paddingHorizontal: 15,
        margin: 2
    },
    buttonText: {
        color: 'white',
        fontSize: 16
    },
    row: {
        width: '100%',
        padding: 15,
        flexDirection: 'row',
        justifyContent: 'space-between'
    },
    activeSwitchContainer: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        marginBottom: 20,
        alignItems: 'center',
        paddingHorizontal: 40
    }
})

export default App

start is not working on componentDidmout or didupdate

Here is my code the start is not working when i call it in useEffect

` React.useEffect(()=>{

  setTimeout(()=>{

    AsyncStorage.getItem('appTour').then((value) => {

      if(!!canStart && !!value && !!newHomeFeedData.length && !showBackDrop && value != 5 ) {

        start(JSON.parse(value)+1)

        toggleBackDrop(true)

      }

    })

  },1000)

},[canStart])`

How to use it for a single child in a ScrollView?

May someone share an example about how to use it for a single child in a ScrollView?

I have a ScroolView where the children components are rendered by Array.map function and I'd like to highlight the very first child component with something like 'start here'.

Ignore margin

Hello, friends!

I have a little question: can we ignore the margin in the TourGuideZone?

Button step3 styles margin-top 24px

custom toolTip connecting functions

I'm sure there is a trivial solution to this but I can't seem to get it worked out.

I want to customize the labels for my rn-tourguide tooltip so I have implemented a TooltipComponent as detailed in the README and I'm getting my custom labels but cannot make them do anything.

Apologies, still learning react. Any help appreciated.

Here is my code:

import React, { useEffect, useState } from "react";
import {
  View,
  Image,
  Button,
  Text,
  StyleSheet,
  TouchableOpacity,
  Animated,
  Dimensions,
} from "react-native";

import {
  TourGuideProvider,
  TourGuideZone,
  TourGuideZoneByPosition,
  useTourGuideController,
} from "rn-tourguide";

const { width, height } = Dimensions.get("window");

const TooltipComponent = ({
  isFirstStep,
  isLastStep,
  handleNext,
  handlePrev,
  handleStop,
  currentStep,
  labels,
}) => (
  <View
    style={{
      borderRadius: 16,
      paddingTop: 24,
      alignItems: "center",
      justifyContent: "center",
      paddingBottom: 16,
      width: "80%",
      backgroundColor: "#ffffffef",
    }}
  >
    <View style={styles.tooltipContainer}>
      <Text testID="stepDescription" style={styles.tooltipText}>
        {currentStep && currentStep.text}
      </Text>
    </View>
    <View style={[styles.bottomBar]}>
      {!isLastStep ? (
        <TouchableOpacity onPress={handleStop}>
          <Button title={labels?.skip || "Skip?"}> </Button>
        </TouchableOpacity>
      ) : null}
      {!isFirstStep ? (
        <TouchableOpacity onPress={handlePrev}>
          <Button title={labels?.previous || "Previous"}> </Button>
        </TouchableOpacity>
      ) : null}
      {!isLastStep ? (
        <TouchableOpacity onPress={handleNext}>
          <Button title={labels?.next || "Next"}></Button>
        </TouchableOpacity>
      ) : (
        <TouchableOpacity onPress={handleStop}>
          <Button title={labels?.finish || "Finish"}></Button>
        </TouchableOpacity>
      )}
    </View>
  </View>
);

function LocalSettingsScreen(props) {
  
  const { canStart, start, stop, eventEmitter } = useTourGuideController();

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

  const handleOnStart = () => console.log("start");
  const handleOnStop = () => {
    console.log("stop");
    moveView(0);
  };
  const handleOnStepChange = () => console.log(`stepChange`);

  useEffect(() => {
    eventEmitter.on("start", handleOnStart);
    eventEmitter.on("stop", handleOnStop);
    eventEmitter.on("stepChange", handleOnStepChange);

    return () => {
      eventEmitter.off("start", handleOnStart);
      eventEmitter.off("stop", handleOnStop);
      eventEmitter.off("stepChange", handleOnStepChange);
    };
  }, []);

  const yValue = useState(new Animated.Value(0))[0];
  let startingYValue = 0;

  function moveView(value) {
    console.log(`moving ${value}`);
    Animated.timing(yValue, {
      toValue: value,
      duration: 5,
      useNativeDriver: true,
    }).start();
  }

  return (
    <>
      <View
        style={styles.container}
      >
        <View>
          <TouchableOpacity
            onPress={() => {
              startingYValue = startingYValue + 50;
              console.log("startingYValue ", startingYValue);
              moveView(startingYValue);
            }}
          >
            <Animated.View style={{ transform: [{ translateY: yValue }] }}>
              <Image
                source={require("../../../assets/settings_walkthrough_screen.png")}
                style={styles.image}
              />
            </Animated.View>
          </TouchableOpacity>

          <TourGuideZone
            zone={0}
            text={"This is Step 1"}
            borderRadius={8}
            tooltipBottomOffset={400}
          ></TourGuideZone>
          <TourGuideZoneByPosition
            text={"This is Step 2"}
            zone={1}
            shape={"circle"}
            isTourGuide
            top={83}
            left={"2.5%"}
            width={50}
            height={50}
          />
        </View>
      </View>
      <View style={{ height: 100, width: "100%", paddingTop:0 }}>
        <View style={{ marginLeft: 0 }}>
          <Image
            resizeMode={"contain"}
            style={{
              width: "100%",
              height: "100%",
              alignSelf: "center",
            }}
            source={require("../../../assets/settings_walkthrough_screen_ft.png")}
          />
        </View>
      </View>
    </>
  );
}

export function SettingsScreen(props) {

  return (
    <View style={{ flex: 1, width: "100%" }}>
      <TourGuideProvider {...{ tooltipComponent: TooltipComponent }}>
        <LocalSettingsScreen props={props} />
      </TourGuideProvider>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
    width: "100%",
    height: "100%",
  },
 
  image: {
    height: "100%",
    zIndex: -1,
    width: width,
  },
  backgroundImage: {
    height: "100%",
    position: "absolute",
    top: 0,
    left: 0,
    alignItems: "center",
    bottom: 0,
    right: 0,
    width: width,
    flex: 1,
  },
});

New release?

Hi @xcarpentier great job with this library, what about a new release to include the latest features?

how to style the overlay?

Is there any way to style this overlay? I want to change this color,

Not showing tour guide after the first screen

Hello! First of all, thank you for the library!

I'm having a problem here. I have 2 different screens, each of them has a TourGuideZone respectively.

1. Screen 1
   React.useEffect(() => { if (start && canStart) { start(1); } }, [canStart]);

<TourGuideZone zone={1} text={"Read this! 🎉"}>xxxx</TourGuideZone>

2. Screen 2
   React.useEffect(() => { if (start && canStart) { start(2); } }, [canStart]);

<TourGuideZone zone={2} text={"This is not appearing"}>xxxx</TourGuideZone>

The problem is the tour guide on screen 1 is showing and after clicking finish and moving to screen 2, the tour guide on screen 2 doesn't show.

The same happens when I'm on screen 2 and then navigating to screen1, the tour guide on screen 2 shows but not the tour guide on screen 1 after navigating.

Both screens are not nested and independent from each other.

Any help or advice will be appreciated!

Can this be used on multiple screens?

Hello,

I have a React Navigation in place and I'm using this library to show a tour for the first tab.

Is there a way to use this, when switching the tab, or go into a new Screen, to start another tour in that specific screen?

highlighted component alignment issue

i am trying all ways for align my highlighted component in box

here is my Provider Calling

  <TourGuideProvider
        {...{
          //  verticalOffset: -30,
          tooltipComponent: UserGuideTutorial,
          backdropColor: 'rgba(0, 0, 0, 0.6)',
          
          // tooltipStyle:{paddingTop:-100,
  
          // }
        }}
        
        >

here is my Zone calling

<UserGuideTourZone
                   zone={1}
                   maskOffset={0}
                    navigation={navigation}
               >
                   <CardView
                      
                       onPressInfo={() => showModal(item)}
                       onPress={() => ButtonOnPress(item, isDisabled)}
                   />
               </UserGuideTourZone>

anyone Know what's the reason please give me a solution

Usage inside scrollview

Does anyone have experience with how to use it inside a scrollview?

It highlights the components outside the view. So even if I scroll down it is not visible.

I also tried a walkaround by using the handleOnStepChange() callback to stop() the animation after the first step then scroll down my view and start(step) again at the desired step. But it's very ugly and also doesn't work, the animation does not start again.

It is possible change color of buttons?

Hi!

It is possible changue the color of text buttons without edit stye.js
Using tooltipStyle ??

Tooltip is shown for a split second, disappears, and then only showing properly

The default tooltip flickers before fading in. Moving this.state.opacity.setValue(0) to before this.props.next() solved it for me. Not sure if it causes any problems elsewhere.

Zones recognitions

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.

[QUESTION] Is it possible to force the change of the current step?

Block tap to disable interaction with component under the mask (optional)

Is there a way to pass text to TourGuideZoneByPosition?

Hello,

I need to use TourGuideZoneByPosition for some components (I have an absolute bottom positioned button and if I use TourGuideZone the height of the highlighted zone is about 1px, instead of the button's height).

But if I use TourGuideZoneByPosition with isTourGuide, then the pop-up says Zone X. Is there a way to pass a text to the TourGuideZoneByPosition?

Thanks in advance

I have multiple view in a screen, which has scrolling.

I have multiple views inside a screen, which has scrolling when I need to show guide to a bottom, the guide does not move the position which is in the scroll. Can someone help with this?

when shape is circle, and offset is small, It has sawtooth around TourGuideZone

1.when shape={'circle'} , and offset is small, It has sawtooth around TourGuideZone -> look image-1
2.when shape={'circle_and_keep'}, There has a white point in center -> look image-2
3.in some android devices, mask can not cover screen -> look image-3

How can i hide labels?

when shape is circle, and offset is small, It has sawtooth around TourGuideZone

1.when shape is circle, and offset is small, It has sawtooth around TourGuideZone

Distance between tour and component

hi , thanks for this good package
i try to use this package , i test in amulator but place of tour different with place of component

=> i just copy and paste codes of example
https://cdn1.bbcode0.com/uploads/2020/8/6/d8ebbeb8ecb4b25a4be39cce7174c93c-full.png
https://cdn1.bbcode0.com/uploads/2020/8/6/de13b76861c965b2a0928b240ad67fd1-full.png

i try in expo in device but exist this problem.!!!!

can you help me? thanks

The text prop doesn't update

I'm using a text from redux state, at start the text is empty, but after de request is done, the state is populated, but the lib doens't get the new value and the empty one

Background mask not taking full height in android

As you can see in the image there is some space left in the bottom.

These are providers I am using

const App = () => (
  <ColorSchemeProvider>
    <BottomSheetModalProvider>
      <SafeAreaProvider>
        <TourGuideProvider
          androidStatusBarVisible={true}
          animationDuration={250}>
          <StatusBar
            barStyle="dark-content"
            backgroundColor="#c8b900"
            translucent
          />
          <AppContent />
        </TourGuideProvider>
      </SafeAreaProvider>
    </BottomSheetModalProvider>
  </ColorSchemeProvider>
);

Full code can be seen here - https://github.com/ShivamJoker/SQL-Play/blob/d409f4b0c06323c022ed99a6e5384c0ff66d4a83/src/component/App.tsx#L205

Apply custom font for text props

How can set a custom font for text props?

getCurrentStep is undefined

I'm trying to get the current step info using the getCurrentStep function useTourGuideController. The function occasionally returns the current step info but most of the times the function is undefined. Is there any way for me to get the current step?

[ERROR] Select two zone

how can i use this for one item in a flatlist?

i have a flatlist and i want to wrap only one the first item in it.
how can i do that?

Maximum update depth exceeded

I use react-native-navigation so I have to keep multiple Providers, one for each screen with tour.
So far I implemented tour for two screens and everything was fine. But on third screen, using useTourGuideController() causes error "Maximum update depth exceeded...".
When I tried to debug I saw that functions stop and start cause rerenders.
Did anybody has similar problem?

Scroll to step off screen

Is it possible on step change to scroll to a specific item in ScrollView? We are using rn-tourguide in our app, however as the app has grown some of the items in our onboarding are no longer visible on initial load without scrolling down, especially on smaller screens.

Modal Backdrop issue on landscape

There is a issue of right margin on landscape view. In which getting right margin in modal backdrop. That I have fixed in this PR #104.

Error

I receive error [Error: undefined Unable to resolve module react-native-svgfromnode_modules\rn-tourguide\lib\components\SvgMask.js: react-native-svg could not be found within the project.

When used startAtMount props in TourGuideProvider component . mask is not show for the 1st zone.

Anyone face this issue . Please help me
<TourGuideProvider {...{ verticalOffset: -5, labels: { 'skip': 'Cancel' } }}
androidStatusBarVisible={true}
startAtMount={tourValue ? true : false}
>
......

Im using like this but component not mask for 1st zone .

Not properly working on Android

Can i block access to outside area?

There are not enough functions for blocking pressing on the highlighted area and on the outside area

[BUG] preventOutsideInteraction is not working at all!

the preventOutsideInteraction is not working.
I've the latest version 3.2.0

<TourGuideProvider preventOutsideInteraction={true}>
    <Main />
</TourGuideProvider>

The issue seems to be happening because preventOutsideInteraction doesn't exist on TourGuideProviderProps, I can't even find anything from #81 PR in my node_modules/rn-tourguide.

ESLint flags "React Hook useEffect has a missing dependency: 'start'."

I'm copying this sample code into my project:

  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()

  // Can start at mount 🎉
  // you need to wait until everything is registered 😁
  React.useEffect(() => {
    if (canStart) {
      // 👈 test if you can start otherwise nothing will happen
      start()
    }
  }, [canStart]) // 👈 don't miss it!

It seems to work okay, but EsLint flags the last line as an error because I'm not passing the start variable in the dependency array alongside canStart. Error is:

"React Hook useEffect has a missing dependency: 'start'."

I can clear the ESLint error flag by adding start to the dependency array, like so:

  }, [start, canStart]); // 👈 don't miss it!

However, that triggers an infinite loop, with the tour guide popping up again every time in finishes, and no way of stopping it.

I know I can edit the disable the ESLint error from showing, like so:

  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [canStart]); // 👈 don't miss it!

but that seems like sweeping it under the carpet a bit.

Start method is not working inside useEffect .

I want to call tourguide after api calling is completed in dashboard . so I called start() inside my function . but it return with error : TypeError: start is not a function. (In 'start()', 'start' is undefined) . I'm using react native with typescript. Also When first time screen loaded mask position is not set for 1st zone .
even I just call start() like this is also not working :
useEffect(() => {
start?.(1)
}, [])
but it doesn't work .