From 87260ad92a7f59cc41c6daa67f9c3478945ec0fc Mon Sep 17 00:00:00 2001
From: Xavier Carpentier <xcapetir@gmail.com>
Date: Wed, 26 Aug 2020 16:44:23 +0200
Subject: [PATCH] feat add prop tooltipBottomOffset

---
 App.tsx                                    | 14 +++++++-------
 README.md                                  |  2 ++
 package.json                               |  2 +-
 src/components/ConnectedStep.tsx           |  2 +-
 src/components/Modal.tsx                   |  7 ++++++-
 src/components/Step.tsx                    |  4 ++--
 src/components/TourGuideZone.tsx           | 13 ++++++++++---
 src/components/TourGuideZoneByPosition.tsx |  8 +++++---
 src/types.ts                               |  1 +
 9 files changed, 35 insertions(+), 18 deletions(-)

diff --git a/App.tsx b/App.tsx
index a4457524c..f5e58cebd 100644
--- a/App.tsx
+++ b/App.tsx
@@ -76,7 +76,7 @@ const AppContent = () => {
           <Text style={styles.buttonText}>Stop</Text>
         </TouchableOpacity>
         <TourGuideZone
-          zone={1}
+          zone={7}
           shape='circle'
           text={'With animated SVG morphing with awesome flubber 🍮💯'}
         >
@@ -84,7 +84,7 @@ const AppContent = () => {
         </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>
diff --git a/README.md b/README.md
index 984daa09a..0ada71595 100644
--- a/README.md
+++ b/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
 }
 
diff --git a/package.json b/package.json
index 05487c08b..b6a7cc6d6 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/ConnectedStep.tsx b/src/components/ConnectedStep.tsx
index 1258a9d2f..fbb3a341c 100644
--- a/src/components/ConnectedStep.tsx
+++ b/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> {
diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
index 75aca466f..3be27b608 100644
--- a/src/components/Modal.tsx
+++ b/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,
diff --git a/src/components/Step.tsx b/src/components/Step.tsx
index e84a226e7..4c1d42f26 100644
--- a/src/components/Step.tsx
+++ b/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) => {
diff --git a/src/components/TourGuideZone.tsx b/src/components/TourGuideZone.tsx
index 9a11408b5..f35f43f13 100644
--- a/src/components/TourGuideZone.tsx
+++ b/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>
diff --git a/src/components/TourGuideZoneByPosition.tsx b/src/components/TourGuideZoneByPosition.tsx
index db078c51f..f6fcabd08 100644
--- a/src/components/TourGuideZoneByPosition.tsx
+++ b/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,
diff --git a/src/types.ts b/src/types.ts
index c209412ef..015ab8367 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -15,6 +15,7 @@ export interface IStep {
   maskOffset?: number
   borderRadius?: number
   keepTooltipPosition?: boolean
+  tooltipBottomOffset?: number
 }
 export interface StepObject {
   [key: string]: IStep