mrzachnugent / react-native-reusables

Universal shadcn/ui for React Native featuring a focused collection of components - Crafted with NativeWind v4 and accessibility in mind.
https://rnr-docs.vercel.app
MIT License
3.2k stars 132 forks source link

[ BUG ] Tooltip issues with react-native-reanimated 3.10.0 #145

Closed vktrl closed 4 months ago

vktrl commented 4 months ago

Tooltip exiting produces an error on web.

domUtils.js:109 Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
    at child.onanimationend (...)

I tracked the source of the problem which seems to be react-native-reanimated version 3.10.0, but I'm not familiar with the inner workings of it.

For now I've wrapped the Animated.View component as shown below. Regardless of the bug and its impact on other components, maybe it's the way it should be handled since web animations are handled by css in the first place?

const AnimatedView = React.forwardRef<ViewRef, ViewProps>((props, ref) => {
  return Platform.OS === 'web' ? (
    <View ref={ref} {...props} />
  ) : (
    <Animated.View entering={FadeIn} exiting={FadeOut} ref={ref} {...props} />
  );
});

AnimatedView.displayName = 'AnimatedView';

const TooltipContent = React.forwardRef<
  React.ElementRef<typeof TooltipPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> & { portalHost?: string }
>(({ className, sideOffset = 4, portalHost, ...props }, ref) => (
  <TooltipPrimitive.Portal hostName={portalHost}>
    <TooltipPrimitive.Overlay style={Platform.OS !== 'web' ? StyleSheet.absoluteFill : undefined}>
      <AnimatedView>
        <TextClassContext.Provider value="text-sm native:text-base text-primary-foreground">
          <TooltipPrimitive.Content
            ref={ref}
            sideOffset={sideOffset}
            className={cn(
              'z-50 overflow-hidden rounded-md border border-border bg-primary px-3 py-1.5 shadow-lg shadow-foreground/20 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 web:animate-in web:fade-in-0 web:zoom-in-95',
              className
            )}
            {...props}
          />
        </TextClassContext.Provider>
      </AnimatedView>
    </TooltipPrimitive.Overlay>
  </TooltipPrimitive.Portal>
));
TooltipContent.displayName = TooltipPrimitive.Content.displayName;
mrzachnugent commented 4 months ago

@vktrl Thanks for contributing!

If you wanted to see the changes in react-native-reusables, you can see it here: https://github.com/mrzachnugent/react-native-reusables/commit/10b899a1e8416034973588344a7af202c9475884