refactor: use @gorhom/portal (#1)

* refactor: use gorhom/portal * chore: cleanup example * chore: update readme * fix: add containerStyle prop * refactor: remove react-native-screens dependency * refactor: set position in frame callback * refactor: store element measured dimensions as shared value * refactor: rename isDown to topHalfOfViewport * fix: fix incorrect types
johankasperi · Nov 21, 2023 · 61e58c9 · 61e58c9
1 parent b640518
commit 61e58c9
Show file tree

Hide file tree

Showing 13 changed files with 248 additions and 245 deletions.
diff --git a/README.md b/README.md
@@ -2,56 +2,51 @@
 
 Tooltip for React Native using React Native Reanimated and Modal
 
-![Demo 1](./demo/1.gif)
+![Demo 1](./demo.gif)
 
 ## Installation
 
 ```sh
-npm install react-native-reanimated react-native-reanimated-tooltip
+npm install react-native-reanimated @gorhom/portal react-native-reanimated-tooltip
 ```
 
 ## Usage
 
 ```ts
+import { PortalProvider } from '@gorhom/portal';
 import React from 'react';
 import { Text, Button } from 'react-native';
 import { Tooltip } from 'react-native-reanimated-tooltip';
 import { FadeOut, FadeIn } from 'react-native-reanimated';
 
 const [visible, setVisible] = React.useState(false);
-<Tooltip
-  content={
-    <Text>Tooltip</Text>
-  }
-  visible={visible}
-  onPress={() => {
-    setVisible(false);
-  }}
-  entering={FadeIn}
-  exiting={FadeOut}
->
-  <Button
-    title="Toggle tooltip"
+<PortalProvider>
+  <Tooltip
+    content={
+      <Text>Tooltip</Text>
+    }
+    visible={visible}
     onPress={() => {
-      setVisible(true);
+      setVisible(false);
     }}
-  />
-</Tooltip>
+    entering={FadeIn}
+    exiting={FadeOut}
+  >
+    <Button
+      title="Toggle tooltip"
+      onPress={() => {
+        setVisible(true);
+      }}
+    />
+  </Tooltip>
+</PortalProvider>
 
 ```
 
 ## Configuration
 
 Check [TooltipProps](https://github.com/johankasperi/react-native-reanimated-tooltip/blob/efd333ae9dea7d1705a8828f2a82ba65338956f2/src/Tooltip.tsx#L29)
 
-## Demo
-
-![Demo 2](./demo/2.gif)
-![Demo 3](./demo/3.gif)
-![Demo 4](./demo/4.gif)
-![Demo 5](./demo/5.gif)
-![Demo 6](./demo/6.gif)
-
 ## Contributing
 
 See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

diff --git a/demo.gif b/demo.gif
diff --git a/demo/1.gif b/demo/1.gif
diff --git a/demo/2.gif b/demo/2.gif
diff --git a/demo/3.gif b/demo/3.gif
diff --git a/demo/4.gif b/demo/4.gif
diff --git a/demo/5.gif b/demo/5.gif
diff --git a/demo/6.gif b/demo/6.gif
diff --git a/example/package.json b/example/package.json
@@ -9,6 +9,7 @@
     "web": "expo start --web"
   },
   "dependencies": {
+    "@gorhom/portal": "^1.0.14",
     "expo": "~49.0.15",
     "expo-status-bar": "~1.6.0",
     "react": "18.2.0",

diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -1,63 +1,59 @@
+import { PortalProvider } from '@gorhom/portal';
 import React from 'react';
 
 import { StyleSheet, View, Text, Button } from 'react-native';
 import { FadeIn, FadeOut } from 'react-native-reanimated';
 import { Tooltip } from 'react-native-reanimated-tooltip';
 
 export default function App() {
-  const [activeTooltip, setActiveTooltip] = React.useState<1 | 2 | undefined>(
-    1
-  );
+  const [tooltip1Active, setTooltip1Active] = React.useState(false);
+  const [tooltip2Active, setTooltip2Active] = React.useState(false);
 
   return (
-    <View style={styles.container}>
-      <View>
-        <Tooltip
-          content={
-            <>
-              <Text style={styles.tooltipHeadline}>Tooltip</Text>
-              <Text style={styles.tooltipBody}>Body</Text>
-            </>
-          }
-          visible={activeTooltip === 1}
-          onClose={() => {
-            setActiveTooltip(2);
-          }}
-          entering={FadeIn}
-          exiting={FadeOut.duration(1000)}
-        >
-          <Button
-            title="Toggle tooltip"
-            onPress={() => {
-              setActiveTooltip(1);
-            }}
-          />
-        </Tooltip>
-      </View>
-      <View style={styles.tooltip2}>
-        <Tooltip
-          content={
-            <>
-              <Text style={styles.tooltipHeadline}>Tooltip 2</Text>
-              <Text style={styles.tooltipBody}>Body 2</Text>
-            </>
-          }
-          visible={activeTooltip === 2}
-          onClose={() => {
-            setActiveTooltip(undefined);
-          }}
-          entering={FadeIn}
-          exiting={FadeOut}
-        >
-          <Button
-            title="Toggle tooltip 2"
-            onPress={() => {
-              setActiveTooltip(2);
-            }}
-          />
-        </Tooltip>
+    <PortalProvider>
+      <View style={styles.container}>
+        <View>
+          <Tooltip
+            content={
+              <>
+                <Text style={styles.tooltipHeadline}>Tooltip</Text>
+                <Text style={styles.tooltipBody}>Body</Text>
+              </>
+            }
+            visible={tooltip1Active}
+            entering={FadeIn}
+            exiting={FadeOut}
+          >
+            <Button
+              title="Toggle tooltip"
+              onPress={() => {
+                setTooltip1Active(!tooltip1Active);
+              }}
+            />
+          </Tooltip>
+        </View>
+        <View style={styles.tooltip2}>
+          <Tooltip
+            content={
+              <>
+                <Text style={styles.tooltipHeadline}>Tooltip 2</Text>
+                <Text style={styles.tooltipBody}>Body 2</Text>
+              </>
+            }
+            visible={tooltip2Active}
+            entering={FadeIn}
+            exiting={FadeOut}
+          >
+            <Button
+              title="Toggle tooltip 2"
+              onPress={() => {
+                setTooltip2Active(!tooltip2Active);
+              }}
+            />
+          </Tooltip>
+        </View>
       </View>
-    </View>
+    </PortalProvider>
   );
 }
 

diff --git a/package.json b/package.json
@@ -52,6 +52,7 @@
   "devDependencies": {
     "@commitlint/config-conventional": "^17.0.2",
     "@evilmartians/lefthook": "^1.5.0",
+    "@gorhom/portal": "^1.0.14",
     "@react-native/eslint-config": "^0.72.2",
     "@release-it/conventional-changelog": "^5.0.0",
     "@types/jest": "^28.1.2",
@@ -75,9 +76,10 @@
     "@types/react": "17.0.21"
   },
   "peerDependencies": {
+    "@gorhom/portal": "^1",
     "react": "*",
     "react-native": "*",
-    "react-native-reanimated": "^2.0.0"
+    "react-native-reanimated": "^2"
   },
   "workspaces": [
     "example"