fix: separate PointerWrapper component from TooltipWrapper

Author: Stringsaeed

src/components/PointerWrapper/PointerWrapper.tsx

@@ -0,0 +1,31 @@
+import React, { useMemo } from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import { getPointerWrapperStyle } from '../../utils';
+import type { PointerWrapperProps } from '../../types';
+
+import Pointer from '../Pointer';
+
+import styles from './styles';
+
+const PointerWrapper: React.FC<PointerWrapperProps> = ({
+  tooltipLayout,
+  ...pointerProps
+}) => {
+  const pointerStyles = useMemo(
+    () =>
+      StyleSheet.flatten([
+        styles.wrapper,
+        getPointerWrapperStyle(pointerProps, tooltipLayout),
+      ]),
+    [pointerProps, tooltipLayout]
+  );
+
+  return (
+    <View style={pointerStyles}>
+      <Pointer {...pointerProps} />
+    </View>
+  );
+};
+
+export default PointerWrapper;

src/components/PointerWrapper/index.ts

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

src/components/PointerWrapper/styles.ts

@@ -0,0 +1,9 @@
+import { StyleSheet } from 'react-native';
+
+const pointerWrapperStyles = StyleSheet.create({
+  wrapper: {
+    position: 'absolute',
+  },
+});
+
+export default pointerWrapperStyles;

src/components/TooltipWrapper/TooltipWrapper.tsx

@@ -1,12 +1,11 @@
 import React, { useMemo } from 'react';
-import { StyleSheet, View, ViewStyle } from 'react-native';
 import Animated, { useAnimatedStyle } from 'react-native-reanimated';
 
 import { useLayout } from '../../hooks';
+import { getPositionStyles } from '../../utils';
 import type { TooltipWrapperProps } from '../../types';
-import { getPointerWrapperStyle, getPositionStyles } from '../../utils';
 
-import Pointer from '../Pointer';
+import PointerWrapper from '../PointerWrapper';
 
 import styles from './styles';
 
@@ -37,22 +36,17 @@ const TooltipWrapperComponent: React.FC<TooltipWrapperProps> = (props) => {
     });
   }, [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>
+      <PointerWrapper
+        {...pointerProps}
+        tooltipLayout={layout}
+        position={position}
+      />
     </Animated.View>
   );
 };

src/components/TooltipWrapper/styles.ts

@@ -5,9 +5,6 @@ const tooltipWrapperStyles = StyleSheet.create({
     position: 'absolute',
     opacity: 0,
   },
-  pointer: {
-    position: 'absolute',
-  },
 });
 
 export default tooltipWrapperStyles;

src/types/ComponentsProps.ts

@@ -20,10 +20,14 @@ export interface OverlayProps
   overlayStyle?: ViewStyle;
 }
 
+export interface PointerWrapperProps extends PointerProps {
+  tooltipLayout?: LayoutRectangle;
+}
+
 export interface TooltipWrapperProps
   extends RequiredChildrenProp,
     AnimatedPresenceProp,
-    PointerProps {
+    Omit<PointerWrapperProps, 'tooltipLayout'> {
   offset?: number;
   childrenLayout?: LayoutRectangle;
 }