Add persistTooltip prop to keep tooltip visible on step change

README.md

@@ -202,6 +202,7 @@ export interface TourGuideProviderProps {
   animationDuration?: number
   children: React.ReactNode
   dismissOnPress?: boolean
+  persistTooltip?: boolean // do not hide tooltip on step change
 }
 
 interface TooltipProps {

src/components/ConnectedStep.tsx

@@ -84,6 +84,7 @@ export class ConnectedStep extends React.Component<Props> {
       const measure = () => {
         // Wait until the wrapper element appears
         if (this.wrapper && this.wrapper.measure) {
+          const {borderRadius} = this.props;
           this.wrapper.measure(
             (
               _ox: number,
@@ -94,9 +95,9 @@ export class ConnectedStep extends React.Component<Props> {
               y: number,
             ) =>
               resolve({
-                x,
+                x: borderRadius ? x + borderRadius : x,
                 y,
-                width,
+                width: borderRadius ? width - borderRadius * 2 : width,
                 height,
               }),
             reject,

src/components/Modal.tsx

@@ -33,6 +33,7 @@ export interface ModalProps {
   backdropColor: string
   labels: Labels
   dismissOnPress?: boolean
+  persistTooltip?: boolean
   easing(value: number): number
   stop(): void
   next(): void
@@ -196,7 +197,7 @@ export class Modal extends React.Component<ModalProps, State> {
       toValue,
       duration,
       easing: this.props.easing,
-      delay: duration,
+      delay: this.props.persistTooltip ? 0 : duration,
       useNativeDriver: true,
     })
     const opacityAnim = Animated.timing(this.state.opacity, {
@@ -206,16 +207,24 @@ export class Modal extends React.Component<ModalProps, State> {
       delay: duration,
       useNativeDriver: true,
     })
-    this.state.opacity.setValue(0)
+    const animations = []
     if (
       // @ts-ignore
       toValue !== this.state.tooltipTranslateY._value &&
       !this.props.currentStep?.keepTooltipPosition
     ) {
-      Animated.parallel([translateAnim, opacityAnim]).start()
-    } else {
-      opacityAnim.start()
+      animations.push(translateAnim)
+    }
+    if (!this.props.persistTooltip) {
+      this.state.opacity.setValue(0)
+      animations.push(opacityAnim)
+    } else if (
+      // @ts-ignore
+      this.state.opacity._value !== 1
+    ) {
+      animations.push(opacityAnim)
     }
+    Animated.parallel(animations).start()
 
     this.setState({
       tooltip,

src/components/TourGuideProvider.tsx

@@ -31,6 +31,7 @@ export interface TourGuideProviderProps {
   animationDuration?: number
   children: React.ReactNode
   dismissOnPress?: boolean
+  persistTooltip?: boolean
 }
 
 export const TourGuideProvider = ({
@@ -47,6 +48,7 @@ export const TourGuideProvider = ({
   verticalOffset,
   startAtMount = false,
   dismissOnPress = false,
+  persistTooltip = false,
 }: TourGuideProviderProps) => {
   const [visible, setVisible] = useState<boolean | undefined>(undefined)
   const [currentStep, updateCurrentStep] = useState<IStep | undefined>()
@@ -213,6 +215,7 @@ export const TourGuideProvider = ({
             maskOffset,
             borderRadius,
             dismissOnPress,
+            persistTooltip,
           }}
         />
       </TourGuideContext.Provider>