Skip to content

Commit

Permalink
[Web LA] Fix null elements error (#5881)
Browse files Browse the repository at this point in the history
## 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
m-bert committed Apr 24, 2024
1 parent b900e22 commit 9ab071e
Show file tree
Hide file tree
Showing 2 changed files with 4 additions and 1 deletion.
1 change: 1 addition & 0 deletions src/createAnimatedComponent/createAnimatedComponent.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -190,6 +190,7 @@ export function createAnimatedComponent(
const exiting = this.props.exiting;
if (
IS_WEB &&
this._component &&
this.props.exiting &&
!getReducedMotionFromConfig(this.props.exiting as CustomConfig)
) {
Expand Down
4 changes: 3 additions & 1 deletion src/reanimated2/layoutReanimation/web/componentStyle.ts
Original file line number Diff line number Diff line change
Expand Up @@ -78,5 +78,7 @@ export function setDummyPosition(
dummy.style.height = `${snapshot.height}px`;
dummy.style.margin = '0px'; // tmpElement has absolute position, so margin is not necessary

fixElementPosition(dummy, dummy.parentElement!, snapshot);
if (dummy.parentElement) {
fixElementPosition(dummy, dummy.parentElement, snapshot);
}
}

0 comments on commit 9ab071e

Please sign in to comment.