-
-
Notifications
You must be signed in to change notification settings - Fork 1.3k
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
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
m-bert
requested changes
Oct 20, 2023
There was a problem hiding this 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.
m-bert
requested changes
Oct 20, 2023
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.
m-bert
approved these changes
Oct 31, 2023
There was a problem hiding this 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
requested changes
Oct 31, 2023
6 tasks
piaskowyk
approved these changes
Nov 23, 2023
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
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Requires #5282.
Summary
Some TS shenanigans as a necessary bonus.
Screen.Recording.2023-10-19.at.16.53.37.mov
Screen.Recording.2023-10-19.at.16.55.04.mov
Test plan