feat: adding the Tooltip component

Author: Stringsaeed

package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-native-tooltiplize",
   "version": "0.1.0",
-  "description": "test",
+  "description": "react native tooltip like never before, using leading packages like `react-native-reanimated` v2, `framer-motion`, and `@gorhom/portal`",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
   "types": "lib/typescript/index.d.ts",
@@ -38,7 +38,16 @@
   "keywords": [
     "react-native",
     "ios",
-    "android"
+    "android",
+    "web",
+    "tooltip",
+    "tooltiplize",
+    "react-native-tooltiplize",
+    "react-native-tooltip",
+    "react-native-tooltip-lib",
+    "popover",
+    "react-native-popover",
+    "react-native-popover-view"
   ],
   "repository": "https://github.com/Stringsaeed/react-native-tooltiplize",
   "author": "Muhammed Saeed <[email protected]> (https://github.com/Stringsaeed)",
@@ -53,6 +62,7 @@
   "devDependencies": {
     "@arkweid/lefthook": "^0.7.7",
     "@commitlint/config-conventional": "^17.0.2",
+    "@gorhom/portal": "^1.0.14",
     "@react-native-community/eslint-config": "^3.0.2",
     "@release-it/conventional-changelog": "^5.0.0",
     "@types/jest": "^28.1.2",
@@ -68,15 +78,18 @@
     "react": "18.0.0",
     "react-native": "0.69.6",
     "react-native-builder-bob": "^0.20.1",
+    "react-native-reanimated": "^2.12.0",
     "release-it": "^15.0.0",
     "typescript": "^4.5.2"
   },
   "resolutions": {
     "@types/react": "17.0.21"
   },
   "peerDependencies": {
+    "@gorhom/portal": "^1",
     "react": "*",
-    "react-native": "*"
+    "react-native": "*",
+    "react-native-reanimated": "^2"
   },
   "jest": {
     "preset": "react-native",
@@ -150,5 +163,8 @@
         }
       ]
     ]
+  },
+  "dependencies": {
+    "framer-motion": "^7.6.4"
   }
 }

src/Tooltip.tsx

@@ -0,0 +1,53 @@
+import React, { cloneElement, Fragment } from 'react';
+import { Portal } from '@gorhom/portal';
+import { AnimatePresence } from 'framer-motion';
+import { StyleSheet, View } from 'react-native';
+
+import { useLayout } from './hooks';
+
+import { Wrapper } from './components';
+import type { TooltipProps } from './types';
+
+const Tooltip: React.FC<TooltipProps> = (props) => {
+  const { children, isVisible, renderContent, childrenStyle, ...restProps } =
+    props;
+  const { onLayout, ...layout } = useLayout();
+
+  return (
+    <Fragment>
+      <View style={childrenStyle} onLayout={onLayout}>
+        {cloneElement(children as React.ReactElement)}
+      </View>
+      <Portal>
+        <AnimatePresence>
+          {isVisible && (
+            <Fragment>
+              <Wrapper {...restProps} childrenLayout={layout}>
+                {renderContent()}
+              </Wrapper>
+              {restProps?.withOverlay && (
+                <View
+                  style={[
+                    styles.absolute,
+                    childrenStyle,
+                    { top: layout.y, left: layout.x },
+                  ]}
+                >
+                  {cloneElement(children as React.ReactElement)}
+                </View>
+              )}
+            </Fragment>
+          )}
+        </AnimatePresence>
+      </Portal>
+    </Fragment>
+  );
+};
+
+export default Tooltip;
+
+const styles = StyleSheet.create({
+  absolute: {
+    position: 'absolute',
+  },
+});

src/components/Overlay/Overlay.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import Animated, { useAnimatedStyle } from 'react-native-reanimated';
+import { StyleSheet, TouchableWithoutFeedback } from 'react-native';
+
+import type { OverlayProps } from '../../types';
+
+const Overlay: React.FC<OverlayProps> = ({
+  children,
+  animatedPresence,
+  onDismiss,
+  overlayStyle,
+}) => {
+  const stylez = useAnimatedStyle(
+    () => ({
+      opacity: animatedPresence?.value,
+    }),
+    [animatedPresence]
+  );
+
+  return (
+    <TouchableWithoutFeedback onPress={onDismiss}>
+      <Animated.View style={[styles.overlay, overlayStyle, stylez]}>
+        {children}
+      </Animated.View>
+    </TouchableWithoutFeedback>
+  );
+};
+
+export default Overlay;
+
+const styles = StyleSheet.create({
+  overlay: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+  },
+});

src/components/Overlay/index.ts

@@ -0,0 +1 @@
+export { default } from './Overlay';

src/components/Pointer/Pointer.tsx

@@ -0,0 +1,16 @@
+import React, { useMemo } from 'react';
+import { View } from 'react-native';
+
+import { getPointerStyles } from '../../utils';
+import type { PointerProps } from '../../types';
+
+import styles from './styles';
+
+const PointerComponent: React.FC<PointerProps> = (props) => {
+  const borderStyles = useMemo(() => getPointerStyles(props), [props]);
+
+  return <View style={[styles.pointer, borderStyles]} />;
+};
+
+const Pointer = React.memo<PointerProps>(PointerComponent);
+export default Pointer;

src/components/Pointer/index.ts

@@ -0,0 +1 @@
+export { default } from './Pointer';

src/components/Pointer/styles.ts

@@ -0,0 +1,12 @@
+import { StyleSheet } from 'react-native';
+
+const pointerStyles = StyleSheet.create({
+  pointer: {
+    width: 0,
+    height: 0,
+    backgroundColor: 'transparent',
+    borderStyle: 'solid',
+  },
+});
+
+export default pointerStyles;

src/components/TooltipWrapper/TooltipWrapper.tsx

@@ -0,0 +1,61 @@
+import React, { useMemo } from 'react';
+import { StyleSheet, View, ViewStyle } from 'react-native';
+import Animated, { useAnimatedStyle } from 'react-native-reanimated';
+
+import { useLayout } from '../../hooks';
+import type { TooltipWrapperProps } from '../../types';
+import { getPointerWrapperStyle, getPositionStyles } from '../../utils';
+
+import Pointer from '../Pointer';
+
+import styles from './styles';
+
+const TooltipWrapperComponent: React.FC<TooltipWrapperProps> = (props) => {
+  const {
+    children,
+    position = 'bottom',
+    animatedPresence,
+    ...pointerProps
+  } = props;
+
+  const { onLayout, ...layout } = useLayout();
+
+  const stylez = useAnimatedStyle(
+    () => ({ opacity: animatedPresence?.value }),
+    [animatedPresence]
+  );
+
+  const positionStyles = useMemo(() => {
+    const { offset, childrenLayout, pointerStyle: pointerStyles } = props;
+
+    return getPositionStyles({
+      offset,
+      childrenLayout,
+      pointerStyle: pointerStyles,
+      position,
+      layout,
+    });
+  }, [layout, position, props]);
+
+  const pointerStyles = useMemo(() => {
+    return StyleSheet.flatten<ViewStyle>([
+      styles.pointer,
+      getPointerWrapperStyle({ position, ...pointerProps }, layout),
+    ]);
+  }, [position, pointerProps, layout]);
+
+  return (
+    <Animated.View
+      onLayout={onLayout}
+      style={[styles.tooltipWrapper, positionStyles, stylez]}
+    >
+      {children}
+      <View style={pointerStyles}>
+        <Pointer {...pointerProps} position={position} />
+      </View>
+    </Animated.View>
+  );
+};
+
+const TooltipWrapper = React.memo<TooltipWrapperProps>(TooltipWrapperComponent);
+export default TooltipWrapper;

src/components/TooltipWrapper/index.ts

@@ -0,0 +1 @@
+export { default } from './TooltipWrapper';

src/components/TooltipWrapper/styles.ts

@@ -0,0 +1,13 @@
+import { StyleSheet } from 'react-native';
+
+const tooltipWrapperStyles = StyleSheet.create({
+  tooltipWrapper: {
+    position: 'absolute',
+    opacity: 0,
+  },
+  pointer: {
+    position: 'absolute',
+  },
+});
+
+export default tooltipWrapperStyles;