refactor: separate child wrapper from tooltip component

Author: Stringsaeed

src/Tooltip.tsx

@@ -1,16 +1,22 @@
 import React, { cloneElement, Fragment } from 'react';
+import { View } from 'react-native';
 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';
+import { Wrapper, ChildWrapper } from './components';
 
 const Tooltip: React.FC<TooltipProps> = (props) => {
-  const { children, isVisible, renderContent, childrenStyle, ...restProps } =
-    props;
+  const {
+    children,
+    isVisible,
+    renderContent,
+    withOverlay,
+    childrenStyle,
+    ...restProps
+  } = props;
   const { onLayout, ...layout } = useLayout();
 
   return (
@@ -22,19 +28,17 @@ const Tooltip: React.FC<TooltipProps> = (props) => {
         <AnimatePresence>
           {isVisible && (
             <Fragment>
-              <Wrapper {...restProps} childrenLayout={layout}>
+              <Wrapper
+                {...restProps}
+                withOverlay={withOverlay}
+                childrenLayout={layout}
+              >
                 {renderContent()}
               </Wrapper>
-              {restProps?.withOverlay && (
-                <View
-                  style={[
-                    styles.absolute,
-                    childrenStyle,
-                    { top: layout.y, left: layout.x },
-                  ]}
-                >
-                  {cloneElement(children as React.ReactElement)}
-                </View>
+              {withOverlay && (
+                <ChildWrapper childrenStyle={childrenStyle} layout={layout}>
+                  {children}
+                </ChildWrapper>
               )}
             </Fragment>
           )}
@@ -45,9 +49,3 @@ const Tooltip: React.FC<TooltipProps> = (props) => {
 };
 
 export default Tooltip;
-
-const styles = StyleSheet.create({
-  absolute: {
-    position: 'absolute',
-  },
-});

src/components/ChildWrapper/ChildWrapper.tsx

@@ -0,0 +1,26 @@
+import React, { cloneElement, ReactElement, useMemo } from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import type { ChildWrapperProps } from '../../types';
+
+import styles from './styles';
+
+const ChildWrapper: React.FC<ChildWrapperProps> = ({
+  childrenStyle,
+  layout,
+  children,
+}) => {
+  const stylez = useMemo(
+    () =>
+      StyleSheet.flatten([
+        styles.wrapper,
+        childrenStyle,
+        { top: layout?.y, left: layout?.x },
+      ]),
+    [childrenStyle, layout?.x, layout?.y]
+  );
+
+  return <View style={stylez}>{cloneElement(children as ReactElement)}</View>;
+};
+
+export default ChildWrapper;

src/components/ChildWrapper/index.ts

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

src/components/ChildWrapper/styles.ts

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

src/components/index.ts

@@ -1,3 +1,4 @@
 export { default as Overlay } from './Overlay';
 export { default as Wrapper } from './Wrapper';
 export { default as TooltipWrapper } from './TooltipWrapper';
+export { default as ChildWrapper } from './ChildWrapper';

src/types/ComponentsProps.ts

@@ -1,5 +1,10 @@
 import type { ReactNode } from 'react';
-import type { LayoutRectangle, ViewStyle, Animated } from 'react-native';
+import type {
+  LayoutRectangle,
+  ViewStyle,
+  Animated,
+  StyleProp,
+} from 'react-native';
 import type { WithTimingConfig } from 'react-native-reanimated';
 
 import type {
@@ -17,7 +22,7 @@ export interface OverlayProps
   extends RequiredChildrenProp,
     AnimatedPresenceProp {
   onDismiss?: () => void;
-  overlayStyle?: ViewStyle;
+  overlayStyle?: StyleProp<ViewStyle>;
 }
 
 export interface PointerWrapperProps extends PointerProps {
@@ -40,10 +45,15 @@ export interface WrapperProps
   timingConfig?: WithTimingConfig | Animated.TimingAnimationConfig;
 }
 
+export interface ChildWrapperProps extends RequiredChildrenProp {
+  layout?: LayoutRectangle;
+  childrenStyle?: StyleProp<ViewStyle>;
+}
+
 export interface TooltipProps
-  extends Omit<WrapperProps, 'children' | 'childrenLayout'> {
+  extends Omit<WrapperProps, 'children' | 'childrenLayout'>,
+    Pick<ChildWrapperProps, 'childrenStyle'> {
   children: ReactNode;
   isVisible: boolean;
   renderContent: () => ReactNode;
-  childrenStyle?: ViewStyle;
 }