Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Web] Fix hiding component with entering on every render #5278

Merged
merged 13 commits into from
Nov 23, 2023

Conversation

tjzel
Copy link
Collaborator

@tjzel tjzel commented Oct 19, 2023

Requires #5282.

Summary

Some TS shenanigans as a necessary bonus.

BEFOREAFTER
Screen.Recording.2023-10-19.at.16.53.37.mov
Screen.Recording.2023-10-19.at.16.55.04.mov

Test plan

import { StyleSheet, View, Button } from 'react-native';

import Animated, { FadeIn } from 'react-native-reanimated';

import React from 'react';

export default function EmptyExample() {
  const [shouldBeUseEntering, setShouldBeUseEntering] = React.useState(false);

  function handlePress() {
    setShouldBeUseEntering(!shouldBeUseEntering);
  }

  return (
    <View style={styles.container}>
      <Button title="ShouldBeUseEntering" onPress={handlePress} />
      <Animated.View
        style={styles.box}
        entering={shouldBeUseEntering ? FadeIn : undefined}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  box: {
    width: 100,
    height: 100,
    backgroundColor: 'blue',
  },
});

@tjzel tjzel requested a review from m-bert October 19, 2023 15:03
Copy link
Contributor

@m-bert m-bert left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for fixing! There's only one thing that I'd like you to explain and we're good to go.

src/reanimated2/layoutReanimation/web/animationsManager.ts Outdated Show resolved Hide resolved
@tjzel tjzel changed the base branch from main to @tjzel/types/create-commonTypes-in-cac October 27, 2023 16:58
Base automatically changed from @tjzel/types/create-commonTypes-in-cac to main October 30, 2023 16:41
github-merge-queue bot pushed a commit that referenced this pull request Oct 30, 2023
<!-- Thanks for submitting a pull request! We appreciate you spending
the time to work on these changes. Please follow the template so that
the reviewers can easily understand what the code changes affect. -->

## Summary

This pull requests moves types from `createAnimatedComponent` and
`utils.ts` to new `commonTypes.ts`. The reason for that is
`createAnimatedComponent`, `PropsFilter`, `JSUpdater` and
`InlinePropManager` depend on internals of one another, so circular
dependencies have to be avoided - also stuffing everything into `utils`
feels wrong.

This PR is required by #5278.

## Test plan

Standard TS test suite.
Copy link
Contributor

@m-bert m-bert left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Now it looks fine 🟢

@piaskowyk piaskowyk added this pull request to the merge queue Nov 23, 2023
Merged via the queue into main with commit 4656b72 Nov 23, 2023
7 checks passed
@piaskowyk piaskowyk deleted the @tjzel/web/dont-hide-on-every-rerender branch November 23, 2023 15:33
github-merge-queue bot pushed a commit that referenced this pull request Nov 24, 2023
## Summary

Sometimes entering animations flicker. This happens because we've
recently merged [this
PR](#5278),
which always sets component visibility of the component on its first
render, even though now we are doing it inside `onanimationstart`.

## Test plan

Tested on example app on [LA] examples
Latropos pushed a commit that referenced this pull request Nov 24, 2023
Requires #5282.

## Summary

Some TS shenanigans as a necessary bonus.

<table>
<tr><td>BEFORE</td><td>AFTER</td></tr>
<tr><td>


https://github.com/software-mansion/react-native-reanimated/assets/40713406/d13c9186-f1e5-4e12-bbb1-704b1eac0c08

</td><td>


https://github.com/software-mansion/react-native-reanimated/assets/40713406/804fbcfb-f0f0-4b3f-9af3-c46617ffed18

</td></tr>
</table>




## Test plan

<details>

```tsx
import { StyleSheet, View, Button } from 'react-native';

import Animated, { FadeIn } from 'react-native-reanimated';

import React from 'react';

export default function EmptyExample() {
  const [shouldBeUseEntering, setShouldBeUseEntering] = React.useState(false);

  function handlePress() {
    setShouldBeUseEntering(!shouldBeUseEntering);
  }

  return (
    <View style={styles.container}>
      <Button title="ShouldBeUseEntering" onPress={handlePress} />
      <Animated.View
        style={styles.box}
        entering={shouldBeUseEntering ? FadeIn : undefined}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  box: {
    width: 100,
    height: 100,
    backgroundColor: 'blue',
  },
});
```

</details>

---------

Co-authored-by: Michał Bert <michal.bert@swmansion.com>
Latropos pushed a commit that referenced this pull request Nov 24, 2023
## Summary

Sometimes entering animations flicker. This happens because we've
recently merged [this
PR](#5278),
which always sets component visibility of the component on its first
render, even though now we are doing it inside `onanimationstart`.

## Test plan

Tested on example app on [LA] examples
Latropos pushed a commit that referenced this pull request Dec 12, 2023
Requires #5282.

## Summary

Some TS shenanigans as a necessary bonus.

<table>
<tr><td>BEFORE</td><td>AFTER</td></tr>
<tr><td>


https://github.com/software-mansion/react-native-reanimated/assets/40713406/d13c9186-f1e5-4e12-bbb1-704b1eac0c08

</td><td>


https://github.com/software-mansion/react-native-reanimated/assets/40713406/804fbcfb-f0f0-4b3f-9af3-c46617ffed18

</td></tr>
</table>




## Test plan

<details>

```tsx
import { StyleSheet, View, Button } from 'react-native';

import Animated, { FadeIn } from 'react-native-reanimated';

import React from 'react';

export default function EmptyExample() {
  const [shouldBeUseEntering, setShouldBeUseEntering] = React.useState(false);

  function handlePress() {
    setShouldBeUseEntering(!shouldBeUseEntering);
  }

  return (
    <View style={styles.container}>
      <Button title="ShouldBeUseEntering" onPress={handlePress} />
      <Animated.View
        style={styles.box}
        entering={shouldBeUseEntering ? FadeIn : undefined}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  box: {
    width: 100,
    height: 100,
    backgroundColor: 'blue',
  },
});
```

</details>

---------

Co-authored-by: Michał Bert <michal.bert@swmansion.com>
Latropos pushed a commit that referenced this pull request Dec 12, 2023
## Summary

Sometimes entering animations flicker. This happens because we've
recently merged [this
PR](#5278),
which always sets component visibility of the component on its first
render, even though now we are doing it inside `onanimationstart`.

## Test plan

Tested on example app on [LA] examples
github-merge-queue bot pushed a commit that referenced this pull request Jan 15, 2024
<!-- Thanks for submitting a pull request! We appreciate you spending
the time to work on these changes. Please follow the template so that
the reviewers can easily understand what the code changes affect. -->

## Summary

This PR changes the current implementation to allow changes in layout
animations on rerender.

This PR is the first part of the layout animation configuration
overhaul. In a next PR I will extend those changes to SETs and remove
`configureLayoutAnimations` altogether.

TODO:

- [x] make it work
- [x] add example
- [x] add batchinator
- [x] take care of web
- [x] docs
- [x] fix issues with changing animations when an animation is already
running

# Issues

### Simultaneous layout animations

I encountered an interesting issue, that I was able to reproduce with
the following custom layout animation function on the main branch (so
without my changes).
```js
function CustomLayoutTransiton(): LayoutAnimationFunction {
  const isEven = makeMutable(1);
  return (values) => {
    'worklet';
    const isEvenLocal = isEven.value;
    isEven.value = 1 - isEven.value;

    if (isEvenLocal) {
      return {
        animations: {
          opacity: withTiming(1, { duration: 1000 }),
        },
        initialValues: {
          opacity: 0,
        },
      };
    }
    return {
      animations: {
        originX: values.targetOriginX,
      },
      initialValues: {
        originX: values.currentOriginX,
      },
    };
  };
}
```
The issue is that if a layout animation is started before the previous
animation finished, then the previous animation is cancelled. If those
animations operate on different sets of props, then we end up with
broken results. In this example we have the opacity of the box stay
lower than 1, if the second animation is requested too quickly.


https://github.com/software-mansion/react-native-reanimated/assets/56109050/ef18cea5-4a8b-44cd-b8c4-2fc5c6eb677e

In this PR I changed the implementation of `animationsManager` to merge
the layout animations. This is the same solution that was previously
implemented to avoid conflicts between entering and layout animations.

### Web

There are some issues with `visibility:hidden` on web, but they should
be fixed after #5278 gets merged

## Test plan

<!-- Provide a minimal but complete code snippet that can be used to
test out this change along with instructions how to run it and a
description of the expected behavior. -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants