-
-
Notifications
You must be signed in to change notification settings - Fork 1.4k
fix: Initial animated style updater style is applied on re-render #7376
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
Conversation
|
I tested this solution on a few examples on Paper and Fabric. It seems to work on both but there was no issue on Fabric so I wonder if we want to merge it on the |
tomekzaw
left a comment
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.
LGTM
|
thank you fellas!! ❤️❤️ |
|
I think this should be released asap, it was really tricky in my case to find out that reanimated was the cause and possibly many packages or daily coding could be affected! |
We will release a new version at the beginning of the next week. For now, you can patch reanimated. |
…bjects (#7385) ## Summary This PR changes the `PropsFilter` behavior for animated styles. Before these changes, initial styles of all animated style objects were merged into a single initial style object. After the first render, the same initial style object was returned for each animated style, so e.g. when we had multiple animated styles, the same initial style object was added to the style array multiple times. Even though the previous implementation worked on Fabric, I decided to change it for consistency with implementation in reanimated `3.x.x`. The new implementation, that returns a correct initial style corresponding to the animated style object, feels better (in terms of logic) as gives more expected results (each animated style is given its own initial style properties, not combined props from all animated styles). The original PR merged to the `3.17-stable` branch: #7376
# This is the 1st commit message: fix: FlashList scroll from UI on web (#7353) ## Summary Fixes scrollable node obtaining in the `useAnimatedRef` and 2 related examples on web. ## Example recordings ### scrollTo example #### Before https://github.com/user-attachments/assets/6b4f0c95-d387-4849-8cf5-9979c9515fb7 #### After https://github.com/user-attachments/assets/aa90e070-1140-4f4e-b3f6-5efeeb57ba2b ### PIN example #### Before <img width="1079" alt="Screenshot 2025-04-03 at 20 21 04" src="https://github.com/user-attachments/assets/2fe3ca8f-5081-4b87-ac75-69047e547449" /> #### After https://github.com/user-attachments/assets/164b7dc3-7e14-4fce-9491-bb05921a08ba # This is the commit message #2: fix: timestamp on physical device in s instead of ms (#7370) ## Summary During recent changes, multiplying the `currentTimestamp` value by `MILLISECONDS_IN_SECOND` on physical device was lost. Restoring the correct behavior. ## Test plan Run any app examples on simulator and physical device and see no difference with this PR. # This is the commit message #3: chore: Bump tvos-example to RN 0.79 (#7369) ## Summary This PR bumps TVOS example app: `0.77.0-0` -> `0.79.0-0` ## Current state || TVOS (Android) | TVOS (iOS) | |-|-|-| | Builds | ✅ | ✅ | | Runs | ✅ | ✅ | # This is the commit message #4: Add Reanimated native view (#7366) ## Summary This PR is the first phase of rewriting `createAnimatedComponent` to a native view wrapper that uses `display: content`. Currently, `ReanimatedNativeView` is exported as a public component, but this is just temporary for development and testing purposes. We need to remove that export once we finish rewriting `createAnimatedComponent`.  ## Test plan <details> <summary>code</summary> ```jsx import React from 'react'; import { StyleSheet, Text, View } from 'react-native'; import { ReanimatedNativeView } from 'react-native-reanimated'; export default function EmptyExample() { return ( <View style={styles.container}> <Text>Hello world!</Text> <ReanimatedNativeView style={{width: 200, backgroundColor: 'green' }}> <Text>Reanimated View</Text> <View style={{width: 100, height: 100, backgroundColor: 'red' }} /> <View style={{width: 100, height: 100, backgroundColor: 'blue' }} /> <View style={{width: 100, height: 100, backgroundColor: 'yellow' }} /> </ReanimatedNativeView> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, alignItems: 'center', justifyContent: 'center', }, }); ``` </details> # This is the commit message #5: chore(deps): bump axios from 1.7.7 to 1.8.4 (#7349) Bumps [axios](https://github.com/axios/axios) from 1.7.7 to 1.8.4. <details> <summary>Release notes</summary> <p><em>Sourced from <a href="https://github.com/axios/axios/releases">axios's releases</a>.</em></p> <blockquote> <h2>Release v1.8.4</h2> <h2>Release notes:</h2> <h3>Bug Fixes</h3> <ul> <li><strong>buildFullPath:</strong> handle <code>allowAbsoluteUrls: false</code> without <code>baseURL</code> (<a href="https://github.com/axios/axios/issues/6833">#6833</a>) (<a href="https://github.com/axios/axios/commit/f10c2e0de7fde0051f848609a29c2906d0caa1d9">f10c2e0</a>)</li> </ul> <h3>Contributors to this release</h3> <ul> <li><!-- raw HTML omitted --> <a href="https://github.com/mhassan1" title="+5/-1 ([#6833](axios/axios#6833) )">Marc Hassan</a></li> </ul> <h2>Release v1.8.3</h2> <h2>Release notes:</h2> <h3>Bug Fixes</h3> <ul> <li>add missing type for allowAbsoluteUrls (<a href="https://github.com/axios/axios/issues/6818">#6818</a>) (<a href="https://github.com/axios/axios/commit/10fa70ef14fe39558b15a179f0e82f5f5e5d11b2">10fa70e</a>)</li> <li><strong>xhr/fetch:</strong> pass <code>allowAbsoluteUrls</code> to <code>buildFullPath</code> in <code>xhr</code> and <code>fetch</code> adapters (<a href="https://github.com/axios/axios/issues/6814">#6814</a>) (<a href="https://github.com/axios/axios/commit/ec159e507bdf08c04ba1a10fe7710094e9e50ec9">ec159e5</a>)</li> </ul> <h3>Contributors to this release</h3> <ul> <li><!-- raw HTML omitted --> <a href="https://github.com/Electroid" title="+6/-0 ([#6811](axios/axios#6811) )">Ashcon Partovi</a></li> <li><!-- raw HTML omitted --> <a href="https://github.com/StefanBRas" title="+4/-0 ([#6818](axios/axios#6818) )">StefanBRas</a></li> <li><!-- raw HTML omitted --> <a href="https://github.com/mhassan1" title="+2/-2 ([#6814](axios/axios#6814) )">Marc Hassan</a></li> </ul> <h2>Release v1.8.2</h2> <h2>Release notes:</h2> <h3>Bug Fixes</h3> <ul> <li><strong>http-adapter:</strong> add allowAbsoluteUrls to path building (<a href="https://github.com/axios/axios/issues/6810">#6810</a>) (<a href="https://github.com/axios/axios/commit/fb8eec214ce7744b5ca787f2c3b8339b2f54b00f">fb8eec2</a>)</li> </ul> <h3>Contributors to this release</h3> <ul> <li><!-- raw HTML omitted --> <a href="https://github.com/lexcorp16" title="+1/-1 ([#6810](axios/axios#6810) )">Fasoro-Joseph Alexander</a></li> </ul> <h2>Release v1.8.1</h2> <h2>Release notes:</h2> <h3>Bug Fixes</h3> <ul> <li><strong>utils:</strong> move <code>generateString</code> to platform utils to avoid importing crypto module into client builds; (<a href="https://github.com/axios/axios/issues/6789">#6789</a>) (<a href="https://github.com/axios/axios/commit/36a5a620bec0b181451927f13ac85b9888b86cec">36a5a62</a>)</li> </ul> <h3>Contributors to this release</h3> <ul> <li><!-- raw HTML omitted --> <a href="https://github.com/DigitalBrainJS" title="+51/-47 ([#6789](axios/axios#6789) )">Dmitriy Mozgovoy</a></li> </ul> <h2>Release v1.8.0</h2> <h2>Release notes:</h2> <h3>Bug Fixes</h3> <ul> <li><strong>examples:</strong> application crashed when navigating examples in browser (<a href="https://github.com/axios/axios/issues/5938">#5938</a>) (<a href="https://github.com/axios/axios/commit/1260ded634ec101dd5ed05d3b70f8e8f899dba6c">1260ded</a>)</li> <li>missing word in SUPPORT_QUESTION.yml (<a href="https://github.com/axios/axios/issues/6757">#6757</a>) (<a href="https://github.com/axios/axios/commit/1f890b13f2c25a016f3c84ae78efb769f244133e">1f890b1</a>)</li> <li><strong>utils:</strong> replace getRandomValues with crypto module (<a href="https://github.com/axios/axios/issues/6788">#6788</a>) (<a href="https://github.com/axios/axios/commit/23a25af0688d1db2c396deb09229d2271cc24f6c">23a25af</a>)</li> </ul> <!-- raw HTML omitted --> </blockquote> <p>... (truncated)</p> </details> <details> <summary>Changelog</summary> <p><em>Sourced from <a href="https://github.com/axios/axios/blob/v1.x/CHANGELOG.md">axios's changelog</a>.</em></p> <blockquote> <h2><a href="https://github.com/axios/axios/compare/v1.8.3...v1.8.4">1.8.4</a> (2025-03-19)</h2> <h3>Bug Fixes</h3> <ul> <li><strong>buildFullPath:</strong> handle <code>allowAbsoluteUrls: false</code> without <code>baseURL</code> (<a href="https://github.com/axios/axios/issues/6833">#6833</a>) (<a href="https://github.com/axios/axios/commit/f10c2e0de7fde0051f848609a29c2906d0caa1d9">f10c2e0</a>)</li> </ul> <h3>Contributors to this release</h3> <ul> <li><!-- raw HTML omitted --> <a href="https://github.com/mhassan1" title="+5/-1 ([#6833](axios/axios#6833) )">Marc Hassan</a></li> </ul> <h2><a href="https://github.com/axios/axios/compare/v1.8.2...v1.8.3">1.8.3</a> (2025-03-10)</h2> <h3>Bug Fixes</h3> <ul> <li>add missing type for allowAbsoluteUrls (<a href="https://github.com/axios/axios/issues/6818">#6818</a>) (<a href="https://github.com/axios/axios/commit/10fa70ef14fe39558b15a179f0e82f5f5e5d11b2">10fa70e</a>)</li> <li><strong>xhr/fetch:</strong> pass <code>allowAbsoluteUrls</code> to <code>buildFullPath</code> in <code>xhr</code> and <code>fetch</code> adapters (<a href="https://github.com/axios/axios/issues/6814">#6814</a>) (<a href="https://github.com/axios/axios/commit/ec159e507bdf08c04ba1a10fe7710094e9e50ec9">ec159e5</a>)</li> </ul> <h3>Contributors to this release</h3> <ul> <li><!-- raw HTML omitted --> <a href="https://github.com/Electroid" title="+6/-0 ([#6811](axios/axios#6811) )">Ashcon Partovi</a></li> <li><!-- raw HTML omitted --> <a href="https://github.com/StefanBRas" title="+4/-0 ([#6818](axios/axios#6818) )">StefanBRas</a></li> <li><!-- raw HTML omitted --> <a href="https://github.com/mhassan1" title="+2/-2 ([#6814](axios/axios#6814) )">Marc Hassan</a></li> </ul> <h2><a href="https://github.com/axios/axios/compare/v1.8.1...v1.8.2">1.8.2</a> (2025-03-07)</h2> <h3>Bug Fixes</h3> <ul> <li><strong>http-adapter:</strong> add allowAbsoluteUrls to path building (<a href="https://github.com/axios/axios/issues/6810">#6810</a>) (<a href="https://github.com/axios/axios/commit/fb8eec214ce7744b5ca787f2c3b8339b2f54b00f">fb8eec2</a>)</li> </ul> <h3>Contributors to this release</h3> <ul> <li><!-- raw HTML omitted --> <a href="https://github.com/lexcorp16" title="+1/-1 ([#6810](axios/axios#6810) )">Fasoro-Joseph Alexander</a></li> </ul> <h2><a href="https://github.com/axios/axios/compare/v1.8.0...v1.8.1">1.8.1</a> (2025-02-26)</h2> <h3>Bug Fixes</h3> <ul> <li><strong>utils:</strong> move <code>generateString</code> to platform utils to avoid importing crypto module into client builds; (<a href="https://github.com/axios/axios/issues/6789">#6789</a>) (<a href="https://github.com/axios/axios/commit/36a5a620bec0b181451927f13ac85b9888b86cec">36a5a62</a>)</li> </ul> <h3>Contributors to this release</h3> <ul> <li><!-- raw HTML omitted --> <a href="https://github.com/DigitalBrainJS" title="+51/-47 ([#6789](axios/axios#6789) )">Dmitriy Mozgovoy</a></li> </ul> <h1><a href="https://github.com/axios/axios/compare/v1.7.9...v1.8.0">1.8.0</a> (2025-02-25)</h1> <!-- raw HTML omitted --> </blockquote> <p>... (truncated)</p> </details> <details> <summary>Commits</summary> <ul> <li><a href="https://github.com/axios/axios/commit/9f6f97bcfb7c510103dfcb05641ae8e8f5c08bcc"><code>9f6f97b</code></a> chore(release): v1.8.4 (<a href="https://github.com/axios/axios/issues/6844">#6844</a>)</li> <li><a href="https://github.com/axios/axios/commit/f10c2e0de7fde0051f848609a29c2906d0caa1d9"><code>f10c2e0</code></a> fix(buildFullPath): handle <code>allowAbsoluteUrls: false</code> without <code>baseURL</code> (<a href="https://github.com/axios/axios/issues/6833">#6833</a>)</li> <li><a href="https://github.com/axios/axios/commit/1e6632cd6253c89be7cb1ff757ba91afbd247de1"><code>1e6632c</code></a> chore(deps): bump tj-actions/changed-files in the github-actions group (<a href="https://github.com/axios/axios/issues/6838">#6838</a>)</li> <li><a href="https://github.com/axios/axios/commit/39ec206483a89921732bdc8a5be67e350bfc23f0"><code>39ec206</code></a> chore(release): v1.8.3 (<a href="https://github.com/axios/axios/issues/6819">#6819</a>)</li> <li><a href="https://github.com/axios/axios/commit/10fa70ef14fe39558b15a179f0e82f5f5e5d11b2"><code>10fa70e</code></a> fix: add missing type for allowAbsoluteUrls (<a href="https://github.com/axios/axios/issues/6818">#6818</a>)</li> <li><a href="https://github.com/axios/axios/commit/7821ef9f5be2d62fbc3f01040d9df6f2225eb9d8"><code>7821ef9</code></a> docs: update readme to include bun install (<a href="https://github.com/axios/axios/issues/6811">#6811</a>)</li> <li><a href="https://github.com/axios/axios/commit/ec159e507bdf08c04ba1a10fe7710094e9e50ec9"><code>ec159e5</code></a> fix(xhr/fetch): pass <code>allowAbsoluteUrls</code> to <code>buildFullPath</code> in <code>xhr</code> and `fet...</li> <li><a href="https://github.com/axios/axios/commit/a9f7689b0c4b6d68c7f587c3aa376860da509d94"><code>a9f7689</code></a> chore(release): v1.8.2 (<a href="https://github.com/axios/axios/issues/6812">#6812</a>)</li> <li><a href="https://github.com/axios/axios/commit/fb8eec214ce7744b5ca787f2c3b8339b2f54b00f"><code>fb8eec2</code></a> fix(http-adapter): add allowAbsoluteUrls to path building (<a href="https://github.com/axios/axios/issues/6810">#6810</a>)</li> <li><a href="https://github.com/axios/axios/commit/98120457559e573024862e2925d56295a965ad7e"><code>9812045</code></a> chore(sponsor): update sponsor block (<a href="https://github.com/axios/axios/issues/6804">#6804</a>)</li> <li>Additional commits viewable in <a href="https://github.com/axios/axios/compare/v1.7.7...v1.8.4">compare view</a></li> </ul> </details> <br /> [](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores) Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting `@dependabot rebase`. [//]: # (dependabot-automerge-start) [//]: # (dependabot-automerge-end) --- <details> <summary>Dependabot commands and options</summary> <br /> You can trigger Dependabot actions by commenting on this PR: - `@dependabot rebase` will rebase this PR - `@dependabot recreate` will recreate this PR, overwriting any edits that have been made to it - `@dependabot merge` will merge this PR after your CI passes on it - `@dependabot squash and merge` will squash and merge this PR after your CI passes on it - `@dependabot cancel merge` will cancel a previously requested merge and block automerging - `@dependabot reopen` will reopen this PR if it is closed - `@dependabot close` will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually - `@dependabot show <dependency name> ignore conditions` will show all of the ignore conditions of the specified dependency - `@dependabot ignore this major version` will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself) - `@dependabot ignore this minor version` will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself) - `@dependabot ignore this dependency` will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself) You can disable automated security fix PRs for this repo from the [Security Alerts page](https://github.com/software-mansion/react-native-reanimated/network/alerts). </details> Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> # This is the commit message #6: Add `RCTInvalidating` protocol in `ReanimatedModule` and `WorkletsModule` on iOS (#7381) ## Summary This PR adds `RCTInvalidating` protocol in `ReanimatedModule` and `WorkletsModule` since they both already implement `invalidate` methods with custom cleanup code on iOS according to the suggestion in https://reactnative.dev/docs/next/the-new-architecture/native-modules-lifecycle. I haven't noticed any major changes after this change, here's the stack trace before and after: <img width="514" alt="Screenshot 2025-04-10 at 17 25 35" src="https://github.com/user-attachments/assets/726ff4b8-914c-4e70-8c28-99053339064f" /> <img width="512" alt="Screenshot 2025-04-10 at 17 24 38" src="https://github.com/user-attachments/assets/e5766852-80dc-47e7-bc03-001dea369a52" /> ## Test plan Reload app during bokeh example a few times. # This is the commit message #7: fix: Return proper initial styles in PropsFilter for animated style objects (#7385) ## Summary This PR changes the `PropsFilter` behavior for animated styles. Before these changes, initial styles of all animated style objects were merged into a single initial style object. After the first render, the same initial style object was returned for each animated style, so e.g. when we had multiple animated styles, the same initial style object was added to the style array multiple times. Even though the previous implementation worked on Fabric, I decided to change it for consistency with implementation in reanimated `3.x.x`. The new implementation, that returns a correct initial style corresponding to the animated style object, feels better (in terms of logic) as gives more expected results (each animated style is given its own initial style properties, not combined props from all animated styles). The original PR merged to the `3.17-stable` branch: #7376 # This is the commit message #8: Bump example apps to React Native 0.79.0 (#7389) ## Summary This PR bumps `fabric-example` as well as other apps to `[email protected]`. ## Test plan # This is the commit message #9: fix: separate implementation for custom errors (#7390) ## Summary Turns out that exporting `createCustomError` function is error-prone and sometimes the errors don't work properly. The solution to that is duplicating the code - it's quite small so it shouldn't be a problem. ## Test plan Trigger `WorkletsError` and `ReanimatedError` and see they work properly now.
…ftware-mansion#7376) ## Summary This PR fixes software-mansion#7375. ### The problem After removing style flattening the old implementation started being invalid because the `_initialStyle` object that was created during the initial render of the component contained props from all animated styles. If a view had more than just one animated style, this object contained props from all of these styles. Let's say we had these 3 animated styles: ```tsx const aStyle1 = useAnimatedStyle(() => ({})); // empty const aStyle2 = useAnimatedStyle(() => ({ height: 100 })); const aStyle3 = useAnimatedStyle(() => ({ width: 100 })); <Animated.View style={[aStyle1, aStyle2, aStyle3]} /> ``` The style array on the first render looked like this: ``` [{}, { height: 100 }, { height: 100, width: 100 }] // subsequent objects contain all props from previous objects because of merging ``` On the next render, however, the `_initialStyle` was used for all animated styles, so we ended up with this array: ``` [{ height: 100, width: 100 }, { height: 100, width: 100 }, { height: 100, width: 100 }] ``` As a result, 2 of 3 styles changed. Because the implementation is different on Paper and we have no props registry (similar to what we have on Fabric), this change resulted in the view's style update, even though the animated style wasn't recalculated and didn't return a new style. This is an incorrect behavior resulting in problems described in the attached issue. ### The solution I decided to create a map with style objects and their initial run values. As a result, instead of returning the same single style object with all style props from all animated styles, we can now return proper initial style values for a specific animated style. ## Test plan Copy the example from software-mansion#7375 issue and see that it now works.
## Summary Included fixes: - software-mansion#7376 - software-mansion#7395 - software-mansion#7394 - software-mansion#7400 ## Current state || Fabric (iOS) | Fabric (Android) | Paper (iOS) | Paper (Android) | Web | MacOS | TVOS (iOS) | TVOS (android) | |-|-|-|-|-|-|-|-|-| | Builds | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | | Runs | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
Summary
This PR fixes #7375.
The problem
After removing style flattening the old implementation started being invalid because the
_initialStyleobject that was created during the initial render of the component contained props from all animated styles. If a view had more than just one animated style, this object contained props from all of these styles.Let's say we had these 3 animated styles:
The style array on the first render looked like this:
On the next render, however, the
_initialStylewas used for all animated styles, so we ended up with this array:As a result, 2 of 3 styles changed. Because the implementation is different on Paper and we have no props registry (similar to what we have on Fabric), this change resulted in the view's style update, even though the animated style wasn't recalculated and didn't return a new style. This is an incorrect behavior resulting in problems described in the attached issue.
The solution
I decided to create a map with style objects and their initial run values. As a result, instead of returning the same single style object with all style props from all animated styles, we can now return proper initial style values for a specific animated style.
Test plan
Copy the example from #7375 issue and see that it now works.