Merge pull request #2485 from gluestack/fix/tooltip-content

fix: tooltip content 2 times rendering issue
gluestack · Sep 23, 2024 · d137e0e · d137e0e
2 parents 4b767a9 + c061d7c
commit d137e0e
Showing 1 changed file with 21 additions and 16 deletions.
diff --git a/packages/unstyled/tooltip/src/TooltipContent.tsx b/packages/unstyled/tooltip/src/TooltipContent.tsx
@@ -3,7 +3,7 @@ import { useTooltipContext } from './context';
 import { mergeRefs } from '@gluestack-ui/utils';
 import { useOverlayPosition } from '@react-native-aria/overlays';
 import { OverlayAnimatePresence } from './OverlayAnimatePresence';
-import { Platform } from 'react-native';
+import { Platform, View } from 'react-native';
 
 export function TooltipContent<StyledTooltipContentProps>(
   StyledTooltipContent: React.ComponentType<StyledTooltipContentProps>,
@@ -60,9 +60,9 @@ export function TooltipContent<StyledTooltipContentProps>(
 
     const animatedStyles = {
       opacity: 1,
+      x: 0,
       y: 0,
       scale: 1,
-      x: 0,
     };
 
     const exitAnimatedStyles = {
@@ -76,22 +76,27 @@ export function TooltipContent<StyledTooltipContentProps>(
         visible={isOpen}
         AnimatePresence={AnimatePresence}
       >
-        <StyledTooltipContent
-          initial={initialAnimatedStyles}
-          animate={animatedStyles}
-          exit={exitAnimatedStyles}
-          transition={{
-            type: 'timing',
-            duration: 100,
-          }}
-          {...props}
+        <View
           ref={mergedRef}
-          key={placement + calculatedPlacement}
-          role={Platform.OS === 'web' ? 'tooltip' : undefined}
-          style={[overlayProps.style, { position: 'absolute' }, style]}
+          style={[overlayProps.style, { position: 'absolute' }]}
         >
-          {children}
-        </StyledTooltipContent>
+          <StyledTooltipContent
+            initial={initialAnimatedStyles}
+            animate={animatedStyles}
+            exit={exitAnimatedStyles}
+            transition={{
+              type: 'timing',
+              duration: 100,
+            }}
+            {...props}
+            style={style}
+            ref={mergedRef}
+            key={placement + calculatedPlacement}
+            role={Platform.OS === 'web' ? 'tooltip' : undefined}
+          >
+            {children}
+          </StyledTooltipContent>
+        </View>
       </OverlayAnimatePresence>
     );
   });