Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Web LA] Fix
null
elements error (#5881)
## Summary This PR includes the following changes: 1. Start exiting animation only if component is defined (to avoid issues related to `null`). 2. Call `fixElementPosition` only when parent is defined. These checks are expected to eliminate `cannot read properties of null` error. ## Origin of this PR This PR originates from discussion on discord, where it was reported that layout animations crash on web when using `react-navigation` and `expo-router`. Crashes happen when `display: none;` is set. We are not sure what is the exact cause of this issue. However, our main suspect is `MutationObserver` inside `domUtils.ts`. Also, we don't know why `element` is `null`, but we believe that it can happen because of [this line](https://github.com/software-mansion/react-native-reanimated/blob/b900e224aa691bf59eec579327b038c86369552b/src/createAnimatedComponent/createAnimatedComponent.tsx#L559), since this is the only place where we assign something to `_component`. ### Snippet from discord The snippet provided on discord looks like this: ```jsx <Animated.View className="flex flex-row md:hidden px-3 border-b border-b-zinc-800 h-11" entering={FadeIn.duration(600)} exiting={FadeOut} > ``` As you can tell it uses `Tailwind`. Unfortunately it doesn't help much. ### Error message Original error message looks like this: ![image](https://github.com/software-mansion/react-native-reanimated/assets/63123542/4cb48402-74cd-4432-9908-98ce43764a29) By looking at this error we were able to identify that the crash happens during exiting animation. We still don't know which one is null in this case - `parent` or `element`. ## Test Plan We struggle to prepare a reproduction as it is very rare problem. However, I believe that the changes are effective.
- Loading branch information