From a06f70e3d88ffaf20ab078390af9805b3f62b560 Mon Sep 17 00:00:00 2001
From: Mohammad Goldast <goldast.xps@gmail.com>
Date: Sat, 15 Apr 2023 19:48:07 +0330
Subject: [PATCH 1/3] Make tooltips scrollable in small devices

---
 src/tooltip.js | 50 ++++++++++++++++++++++----------------------------
 1 file changed, 22 insertions(+), 28 deletions(-)

diff --git a/src/tooltip.js b/src/tooltip.js
index 3098692..f09fd06 100644
--- a/src/tooltip.js
+++ b/src/tooltip.js
@@ -32,10 +32,10 @@ const DEFAULT_DISPLAY_INSETS = {
   right: 24,
 };
 
-const computeDisplayInsets = insetsFromProps =>
+const computeDisplayInsets = (insetsFromProps) =>
   Object.assign({}, DEFAULT_DISPLAY_INSETS, insetsFromProps);
 
-const invertPlacement = placement => {
+const invertPlacement = (placement) => {
   switch (placement) {
     case 'top':
       return 'bottom';
@@ -212,7 +212,7 @@ class Tooltip extends Component {
     return null;
   }
 
-  updateWindowDims = dims => {
+  updateWindowDims = (dims) => {
     this.setState(
       {
         windowDims: dims.window,
@@ -241,7 +241,7 @@ class Tooltip extends Component {
     );
   };
 
-  measureContent = e => {
+  measureContent = (e) => {
     const { width, height } = e.nativeEvent.layout;
     const contentSize = new Size(width, height);
     this.setState({ contentSize }, () => {
@@ -249,7 +249,7 @@ class Tooltip extends Component {
     });
   };
 
-  onChildMeasurementComplete = rect => {
+  onChildMeasurementComplete = (rect) => {
     this.setState(
       {
         childRect: rect,
@@ -276,7 +276,7 @@ class Tooltip extends Component {
             (x, y, width, height, pageX, pageY) => {
               const childRect = new Rect(pageX, pageY, width, height);
               if (
-                Object.values(childRect).every(value => value !== undefined)
+                Object.values(childRect).every((value) => value !== undefined)
               ) {
                 this.onChildMeasurementComplete(childRect);
               } else {
@@ -304,13 +304,8 @@ class Tooltip extends Component {
 
   computeGeometry = () => {
     const { arrowSize, childContentSpacing } = this.props;
-    const {
-      childRect,
-      contentSize,
-      displayInsets,
-      placement,
-      windowDims,
-    } = this.state;
+    const { childRect, contentSize, displayInsets, placement, windowDims } =
+      this.state;
 
     const options = {
       displayInsets,
@@ -411,12 +406,15 @@ class Tooltip extends Component {
     });
 
     const hasChildren = React.Children.count(this.props.children) > 0;
-
-    const onPressBackground = () => {
-      if (this.props.closeOnBackgroundInteraction) {
-        this.props.onClose();
-      }
-    };
+    const screenHeight = Dimensions.get('window').height;
+
+    if (screenHeight < 700) {
+      generatedStyles.containerStyle = {
+        ...generatedStyles.containerStyle,
+        height: screenHeight * 1.3,
+        backgroundColor: 'rgba(0,0,0, 0.5)',
+      };
+    }
 
     const onPressContent = () => {
       if (this.props.closeOnContentInteraction) {
@@ -426,10 +424,10 @@ class Tooltip extends Component {
 
     return (
       <TouchableWithoutFeedback
-        onPress={onPressBackground}
+        onPress={this.props.onClose}
         accessible={this.props.accessible}
       >
-        <View style={generatedStyles.containerStyle}>
+        <ScrollView contentContainerStyle={generatedStyles.containerStyle}>
           <View style={[generatedStyles.backgroundStyle]}>
             <View style={generatedStyles.tooltipStyle}>
               {hasChildren ? <View style={generatedStyles.arrowStyle} /> : null}
@@ -449,18 +447,14 @@ class Tooltip extends Component {
           {hasChildren && this.props.showChildInTooltip
             ? this.renderChildInTooltip()
             : null}
-        </View>
+        </ScrollView>
       </TouchableWithoutFeedback>
     );
   };
 
   render() {
-    const {
-      children,
-      isVisible,
-      useReactNativeModal,
-      modalComponent,
-    } = this.props;
+    const { children, isVisible, useReactNativeModal, modalComponent } =
+      this.props;
 
     const hasChildren = React.Children.count(children) > 0;
     const showTooltip = isVisible && !this.state.waitingForInteractions;

From c63e1dbaaef480220c6e5af2d5c9f3dd2e380558 Mon Sep 17 00:00:00 2001
From: Mohammad Goldast <goldast.xps@gmail.com>
Date: Sat, 15 Apr 2023 20:06:09 +0330
Subject: [PATCH 2/3] Added a prop for making the wrapper scrollable

---
 src/tooltip.d.ts | 5 ++++-
 src/tooltip.js   | 4 +++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/tooltip.d.ts b/src/tooltip.d.ts
index bfbc296..1d32b8b 100644
--- a/src/tooltip.d.ts
+++ b/src/tooltip.d.ts
@@ -46,7 +46,7 @@ declare module 'react-native-walkthrough-tooltip' {
     childrenWrapperStyle?: StyleProp<ViewStyle>;
 
     // Styles the view element that wraps the original children
-    parentWrapperStyle?: StyleProp<ViewStyle>
+    parentWrapperStyle?: StyleProp<ViewStyle>;
   }
 
   export interface TooltipProps extends Partial<TooltipStyleProps> {
@@ -146,6 +146,9 @@ declare module 'react-native-walkthrough-tooltip' {
 
     // Support for nested elements within the Tooltip component.
     children?: React.ReactNode;
+
+    // Make the tooltip wrapper scrollable.
+    scrollable?: boolean;
   }
 
   /**
diff --git a/src/tooltip.js b/src/tooltip.js
index f09fd06..e758aff 100644
--- a/src/tooltip.js
+++ b/src/tooltip.js
@@ -77,6 +77,7 @@ class Tooltip extends Component {
     topAdjustment: 0,
     horizontalAdjustment: 0,
     accessible: true,
+    scrollable: false,
   };
 
   static propTypes = {
@@ -109,6 +110,7 @@ class Tooltip extends Component {
     topAdjustment: PropTypes.number,
     horizontalAdjustment: PropTypes.number,
     accessible: PropTypes.bool,
+    scrollable: PropTypes.bool,
   };
 
   constructor(props) {
@@ -408,7 +410,7 @@ class Tooltip extends Component {
     const hasChildren = React.Children.count(this.props.children) > 0;
     const screenHeight = Dimensions.get('window').height;
 
-    if (screenHeight < 700) {
+    if (this.props.scrollable) {
       generatedStyles.containerStyle = {
         ...generatedStyles.containerStyle,
         height: screenHeight * 1.3,

From 81a897874e172005d9de3313a0f2e76533066170 Mon Sep 17 00:00:00 2001
From: Mohammad Goldast <goldast.xps@gmail.com>
Date: Sat, 29 Apr 2023 12:49:47 +0330
Subject: [PATCH 3/3] fix: import ScrollView from react-native

---
 src/tooltip.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/tooltip.js b/src/tooltip.js
index e758aff..df62341 100644
--- a/src/tooltip.js
+++ b/src/tooltip.js
@@ -6,6 +6,7 @@ import {
   Modal,
   TouchableWithoutFeedback,
   View,
+  ScrollView,
 } from 'react-native';
 import rfcIsEqual from 'react-fast-compare';
 import {