software-mansion / react-native-reanimated

React Native's Animated library reimplemented
https://docs.swmansion.com/react-native-reanimated/
MIT License
8.59k stars 1.26k forks source link

Fix web exiting animation in StrictMode #6129

Closed piaskowyk closed 1 week ago

piaskowyk commented 1 week ago

Summary

This PR aims to fixing the web exiting animation when StrictMode is enabled. With StrictMode triggering an additional simulated unmount, our listeners detected the need for an exiting animation. The problem originated from setting visibility = 'hidden' on the original component, which remained present, and creating a copy for animation. As a result, the original component was hidden from view in the DOM tree. The solution proposed is simply to eliminate the hiding of components. This adjustment is safe even for scenarios without StrictMode, as the component that is hidden is removed in the same frame, ensuring consistency with the previous behavior.

before after

Test plan

code ```js import { Button } from 'react-native'; import React, { useEffect, useState } from 'react'; import Animated, { FadeOutRight } from 'react-native-reanimated'; function Component() { useEffect(() => { console.log('Component mounted'); return () => { console.log('Component unmounted'); }; }, []); return ( ); } export default function EmptyExample() { const [toggle, setToggle] = useState(true); return ( <>