feat add prop tooltipBottomOffset

App.tsx

@@ -76,15 +76,15 @@ const AppContent = () => {
           <Text style={styles.buttonText}>Stop</Text>
         </TouchableOpacity>
         <TourGuideZone
-          zone={1}
+          zone={7}
           shape='circle'
           text={'With animated SVG morphing with awesome flubber 🍮💯'}
         >
           <Image source={{ uri }} style={styles.profilePhoto} />
         </TourGuideZone>
       </View>
       <View style={styles.row}>
-        <TourGuideZone zone={4} shape={'circle'}>
+        <TourGuideZone zone={4} shape={'circle'} tooltipBottomOffset={200}>
           <Ionicons name='ios-contact' {...iconProps} />
         </TourGuideZone>
         <Ionicons name='ios-chatbubbles' {...iconProps} />
@@ -98,13 +98,13 @@ const AppContent = () => {
       </View>
       {Platform.OS !== 'web' ? (
         <TourGuideZoneByPosition
-          zone={7}
+          zone={1}
           shape={'circle'}
           isTourGuide
-          top={30}
-          left={35}
-          width={300}
-          height={300}
+          top={191}
+          left={88}
+          width={64}
+          height={64}
         />
       ) : null}
     </View>

README.md

@@ -174,6 +174,8 @@ interface TourGuideZoneProps {
   maskOffset?: number // offset around zone
   borderRadius?: number // round corner when rectangle
   startAtMount?: boolean //  start at mount
+  keepTooltipPosition?: boolean
+  tooltipBottomOffset?: number
   children: React.ReactNode
 }
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rn-tourguide",
-  "version": "2.4.1",
+  "version": "2.5.0",
   "description": "Make an interactive step by step tour guide for your react-native app (a rewrite of react-native-copilot)",
   "main": "node_modules/expo/AppEntry.js",
   "types": "lib/index.d.ts",

src/components/ConnectedStep.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react'
-
 import { Shape } from '../types'
 import { ITourGuideContext } from './TourGuideContext'
 
@@ -16,6 +15,7 @@ interface Props {
   maskOffset?: number
   borderRadius?: number
   keepTooltipPosition?: boolean
+  tooltipBottomOffset?: number
 }
 
 export class ConnectedStep extends React.Component<Props> {

src/components/Modal.tsx

@@ -183,7 +183,12 @@ export class Modal extends React.Component<ModalProps, State> {
 
     const duration = this.props.animationDuration! + 200
     const toValue =
-      verticalPosition === 'bottom' ? tooltip.top : obj.top - MARGIN - 135
+      verticalPosition === 'bottom'
+        ? tooltip.top
+        : obj.top -
+          MARGIN -
+          135 -
+          (this.props.currentStep!.tooltipBottomOffset || 0)
     const translateAnim = Animated.timing(this.state.tooltipTranslateY, {
       toValue,
       duration,

src/components/Step.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react'
-
-import { ConnectedStep } from './ConnectedStep'
 import { Shape } from '../types'
+import { ConnectedStep } from './ConnectedStep'
 import { TourGuideContext } from './TourGuideContext'
 
 interface Props {
@@ -14,6 +13,7 @@ interface Props {
   borderRadius?: number
   children: React.ReactNode
   keepTooltipPosition?: boolean
+  tooltipBottomOffset?: number
 }
 
 export const Step = (props: Props) => {

src/components/TourGuideZone.tsx

@@ -1,8 +1,7 @@
 import * as React from 'react'
 import { StyleProp, ViewStyle } from 'react-native'
-
-import { Step } from './Step'
 import { Shape } from '../types'
+import { Step } from './Step'
 import { Wrapper } from './Wrapper'
 
 export interface TourGuideZoneProps {
@@ -15,6 +14,7 @@ export interface TourGuideZoneProps {
   children?: React.ReactNode
   style?: StyleProp<ViewStyle>
   keepTooltipPosition?: boolean
+  tooltipBottomOffset?: number
 }
 
 export const TourGuideZone = ({
@@ -27,6 +27,7 @@ export const TourGuideZone = ({
   borderRadius,
   style,
   keepTooltipPosition,
+  tooltipBottomOffset,
 }: TourGuideZoneProps) => {
   if (!isTourGuide) {
     return <>{children}</>
@@ -37,7 +38,13 @@ export const TourGuideZone = ({
       text={text ?? `Zone ${zone}`}
       order={zone}
       name={`${zone}`}
-      {...{ shape, maskOffset, borderRadius, keepTooltipPosition }}
+      {...{
+        shape,
+        maskOffset,
+        borderRadius,
+        keepTooltipPosition,
+        tooltipBottomOffset,
+      }}
     >
       <Wrapper {...{ style }}>{children}</Wrapper>
     </Step>

src/components/TourGuideZoneByPosition.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
-import { View, StyleSheet, StyleProp, ViewStyle } from 'react-native'
-import { TourGuideZone } from './TourGuideZone'
+import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native'
 import { Shape } from '../types'
+import { TourGuideZone } from './TourGuideZone'
 
 interface TourGuideZoneByPositionProps {
   zone: number
@@ -15,6 +15,7 @@ interface TourGuideZoneByPositionProps {
   shape?: Shape
   containerStyle?: StyleProp<ViewStyle>
   keepTooltipPosition?: boolean
+  tooltipBottomOffset?: number
 }
 
 export const TourGuideZoneByPosition = ({
@@ -29,6 +30,7 @@ export const TourGuideZoneByPosition = ({
   shape,
   containerStyle,
   keepTooltipPosition,
+  tooltipBottomOffset,
 }: TourGuideZoneByPositionProps) => {
   if (!isTourGuide) {
     return null
@@ -41,7 +43,7 @@ export const TourGuideZoneByPosition = ({
     >
       <TourGuideZone
         isTourGuide
-        {...{ zone, shape, keepTooltipPosition }}
+        {...{ zone, shape, keepTooltipPosition, tooltipBottomOffset }}
         style={{
           height,
           width,

src/types.ts

@@ -15,6 +15,7 @@ export interface IStep {
   maskOffset?: number
   borderRadius?: number
   keepTooltipPosition?: boolean
+  tooltipBottomOffset?: number
 }
 export interface StepObject {
   [key: string]: IStep