Added onZonePress

src/components/ConnectedStep.tsx

@@ -18,6 +18,8 @@ interface Props {
   borderRadius?: number
   keepTooltipPosition?: boolean
   tooltipBottomOffset?: number
+  isLastStep: boolean
+  onZonePress?: () => void
 }
 
 export class ConnectedStep extends React.Component<Props> {

src/components/Modal.tsx

@@ -191,9 +191,9 @@ export class Modal extends React.Component<ModalProps, State> {
       verticalPosition === 'bottom'
         ? tooltip.top
         : obj.top -
-        MARGIN -
-        135 -
-        (this.props.currentStep!.tooltipBottomOffset || 0)
+          MARGIN -
+          135 -
+          (this.props.currentStep?.tooltipBottomOffset || 0)
     const translateAnim = Animated.timing(this.state.tooltipTranslateY, {
       toValue,
       duration,
@@ -274,6 +274,8 @@ export class Modal extends React.Component<ModalProps, State> {
       borderRadius={this.props.borderRadius}
       dismissOnPress={this.props.dismissOnPress}
       stop={this.props.stop}
+      isLastStep={this.props.isLastStep}
+      handleNext={this.props.next}
     />
   )
 
@@ -313,11 +315,13 @@ export class Modal extends React.Component<ModalProps, State> {
   }
 
   renderNonInteractionPlaceholder() {
-    return this.props.preventOutsideInteraction ? <View
-      style={[StyleSheet.absoluteFill, styles.nonInteractionPlaceholder]} /> : null
+    return this.props.preventOutsideInteraction ? (
+      <View
+        style={[StyleSheet.absoluteFill, styles.nonInteractionPlaceholder]}
+      />
+    ) : null
   }
 
-
   render() {
     const containerVisible = this.state.containerVisible || this.props.visible
     const contentVisible = this.state.layout && containerVisible
@@ -334,8 +338,6 @@ export class Modal extends React.Component<ModalProps, State> {
           onLayout={this.handleLayoutChange}
           pointerEvents='box-none'
         >
-
-
           {contentVisible && (
             <>
               {this.renderMask()}

src/components/Step.tsx

@@ -16,6 +16,8 @@ interface Props {
   keepTooltipPosition?: boolean
   tooltipBottomOffset?: number
   borderRadiusObject?: BorderRadiusObject
+  isLastStep: boolean
+  onZonePress?: () => void
 }
 
 export const Step = (props: Props) => {

src/components/SvgMask.tsx

@@ -6,10 +6,10 @@ import {
   LayoutChangeEvent,
   Platform,
   StyleProp,
-  View,
   ViewStyle,
-  TouchableWithoutFeedback,
   ScaledSize,
+  GestureResponderEvent,
+  Pressable,
 } from 'react-native'
 import Svg, { PathProps } from 'react-native-svg'
 import { IStep, ValueXY } from '../types'
@@ -28,6 +28,8 @@ interface Props {
   currentStep?: IStep
   easing: (value: number) => number
   stop: () => void
+  handleNext: () => void
+  isLastStep: boolean
 }
 
 interface State {
@@ -185,15 +187,45 @@ export class SvgMask extends Component<Props, State> {
     if (!this.state.canvasSize) {
       return null
     }
-    const { dismissOnPress, stop } = this.props
-    const Wrapper: any = dismissOnPress ? TouchableWithoutFeedback : View
+
+      const {
+        dismissOnPress,
+        stop,
+        position,
+        size,
+        currentStep,
+        isLastStep,
+        handleNext,
+      } = this.props
+      const onZonePress = (e: GestureResponderEvent) => {
+        const { locationX, locationY } = e.nativeEvent
+        if (
+          locationX >= position.x &&
+          locationX <= position.x + size.x &&
+          locationY >= position.y &&
+          locationY <= position.y + size.y
+        ) {
+          if (currentStep && currentStep.onZonePress) {
+            currentStep.onZonePress()
+            return
+          }
+          if (isLastStep) {
+            stop()
+          } else {
+            handleNext()
+          }
+        } else if (dismissOnPress) {
+          stop()
+          return
+        }
+      }
 
     return (
-      <Wrapper
+      <Pressable
         style={this.props.style}
         onLayout={this.handleLayout}
         pointerEvents='none'
-        onPress={dismissOnPress ? stop : undefined}
+        onPress={onZonePress}
       >
         <Svg
           pointerEvents='none'
@@ -209,7 +241,7 @@ export class SvgMask extends Component<Props, State> {
             opacity={this.state.opacity as any}
           />
         </Svg>
-      </Wrapper>
+      </Pressable>
     )
   }
 }

src/components/TourGuideZone.tsx

@@ -17,6 +17,8 @@ export interface TourGuideZoneProps {
   keepTooltipPosition?: boolean
   tooltipBottomOffset?: number
   borderRadiusObject?: BorderRadiusObject
+  onZonePress?: () => void
+  isLastStep: boolean
 }
 
 export const TourGuideZone = ({
@@ -32,6 +34,8 @@ export const TourGuideZone = ({
   keepTooltipPosition,
   tooltipBottomOffset,
   borderRadiusObject,
+  onZonePress,
+  isLastStep,
 }: TourGuideZoneProps) => {
   if (!isTourGuide) {
     return <>{children}</>
@@ -50,6 +54,8 @@ export const TourGuideZone = ({
         keepTooltipPosition,
         tooltipBottomOffset,
         borderRadiusObject,
+        onZonePress,
+        isLastStep,
       }}
     >
       <Wrapper {...{ style }}>{children}</Wrapper>

src/types.ts

@@ -17,6 +17,8 @@ export interface IStep {
   keepTooltipPosition?: boolean
   tooltipBottomOffset?: number
   borderRadiusObject?: BorderRadiusObject
+  isLastStep: boolean
+  onZonePress?: () => void
 }
 export interface StepObject {
   [key: string]: IStep