chore: cherry-pick commits for 3.17.0 release #7038
Merged
Conversation
This file contains hidden or 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
…ated (#6815) Bumps [nanoid](https://github.com/ai/nanoid) from 3.3.6 to 3.3.8. <details> <summary>Changelog</summary> <p><em>Sourced from <a href="https://github.com/ai/nanoid/blob/main/CHANGELOG.md">nanoid's changelog</a>.</em></p> <blockquote> <h2>3.3.8</h2> <ul> <li>Fixed a way to break Nano ID by passing non-integer size (by <a href="https://github.com/myndzi"><code>@myndzi</code></a>).</li> </ul> <h2>3.3.7</h2> <ul> <li>Fixed <code>node16</code> TypeScript support (by Saadi Myftija).</li> </ul> </blockquote> </details> <details> <summary>Commits</summary> <ul> <li><a href="https://github.com/ai/nanoid/commit/3044cd5e73f4cf31795f61f6e6b961c8c0a5c744"><code>3044cd5</code></a> Release 3.3.8 version</li> <li><a href="https://github.com/ai/nanoid/commit/4fe34959c34e5b3573889ed4f24fe91d1d3e7231"><code>4fe3495</code></a> Update size limit</li> <li><a href="https://github.com/ai/nanoid/commit/d643045f40d6dc8afa000a644d857da1436ed08c"><code>d643045</code></a> Fix pool pollution, infinite loop (<a href="https://redirect.github.com/ai/nanoid/issues/510">#510</a>)</li> <li><a href="https://github.com/ai/nanoid/commit/89d82d2ce4b0411e73ac7ccfe57bc03e932416e2"><code>89d82d2</code></a> Release 3.3.7 version</li> <li><a href="https://github.com/ai/nanoid/commit/5022c35acaaedd9da4b56cad37b02bbcb87635e1"><code>5022c35</code></a> Update dual-publish</li> <li><a href="https://github.com/ai/nanoid/commit/3e7a8e557b9d93a582ef2c3bb9f7306fc339ef35"><code>3e7a8e5</code></a> Remove benchmark from CI for v3</li> <li><a href="https://github.com/ai/nanoid/commit/d3561446aee52fdf38325e1d30c905d989a8ccd2"><code>d356144</code></a> Fix CI for v3</li> <li><a href="https://github.com/ai/nanoid/commit/37b25dfac2edfd73d7bbc88886e4c6067fac8619"><code>37b25df</code></a> Move to pnpm 8</li> <li>See full diff in <a href="https://github.com/ai/nanoid/compare/3.3.6...3.3.8">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>
## Summary This PR adds missing `cmake-format` dependency installation step in the workflow file. ## Test plan --------- Co-authored-by: Tomasz Żelawski <[email protected]>
## Summary Monorepo setups have become more and more diverse over the years and in turn this workflow barely checks anything while on the other side it's notoriously hard to maintain since so many changes can break it. It's time to move forward.
## Description This PR adds a State of React Native 2024 banner to the top of Reanimated documentation. _Fill out the survey now_ button leads to https://survey.stateofreactnative.com/ The banner **will automatically disappear January 8.** ### Desktop <img width="1728" alt="image" src="https://github.com/user-attachments/assets/fdb47af2-9046-40bc-b4ba-1b6ccf959ed6" /> ### Tablet <img width="787" alt="image" src="https://github.com/user-attachments/assets/f3f8093c-7e05-4a92-ad25-409067805f47" /> ### Mobile <img width="435" alt="image" src="https://github.com/user-attachments/assets/34dab9eb-fa6d-4ec0-8f52-26da4847b9bf" /> ## How to test? ``` cd packages/docs-reanimated yarn yarn start ```
…#6835) ## Summary `initializeUIRuntime` gets called in top level, therefore the JS engine may decide to execute it before `ReanimatedModule` is resolved, which is generally bad. This fixes that. ## Test plan See `CounterExample` before and after.
## Summary FlipCard example was "flickering" and not showing current card (on iOS and Android). Change in styles fixed that. It was discovered in #6722 Before: https://github.com/user-attachments/assets/373980e1-c86d-4521-bfe3-fe1e312ba920 After: https://github.com/user-attachments/assets/32b47476-27c2-4eb8-9300-362c45ffb238
There was a **change request** from our design team considering the mobile styles of the State of React Native 2024 banner. ps. CSS is hard ### Before <img width="435" alt="image" src="https://github.com/user-attachments/assets/f35a9324-0fdb-46ec-93a9-b463629f5b12" /> ## After <img width="428" alt="image" src="https://github.com/user-attachments/assets/04f535fb-db46-4937-9945-462ea5336ac1" />
## Summary Currently we use the `setMountingOverrideDelegate` function to pass `LayoutAnimationProxy` to every surface, when we find out that a new surface was created. However, the `setMountingOverrideDelegate` function actually doesn't override the `MountingOverrideDelegate` - it stores all of them. This would lead to us processing the same transaction multiple times, so now we skip each already configured surface. ## Test plan
## Summary This PR replaces an invalid link in docs with a valid one. ## Test plan - click the old invalid link (don't) - click the new valid link
## Summary This PR streamlines the definition of the `JS_RUNTIME_HERMES` flag. Previously, the flag wasn't consistently defined across all usage points (which prevented the compilation of certain branches of code - for example in WorkletsModuleProxy.cpp), and it also had duplicated definitions. Additionally, I've removed outdated and unnecessary checks from the flag definition. ## Test plan
Bumps [next](https://github.com/vercel/next.js) from 15.1.1 to 15.1.3. <details> <summary>Release notes</summary> <p><em>Sourced from <a href="https://github.com/vercel/next.js/releases">next's releases</a>.</em></p> <blockquote> <h2>v15.1.3</h2> <blockquote> <p>[!NOTE]<br /> This release is backporting bug fixes. It does <strong>not</strong> include all pending features/changes on canary.</p> </blockquote> <h3>Core Changes</h3> <ul> <li>Retry manifest file loading only in dev mode: <a href="https://redirect.github.com/vercel/next.js/issues/73900">#73900</a></li> <li>Use shared worker for lint & typecheck steps: <a href="https://redirect.github.com/vercel/next.js/issues/74154">#74154</a></li> </ul> <h3>Credits</h3> <p>Huge thanks to <a href="https://github.com/unstubbable"><code>@unstubbable</code></a> and <a href="https://github.com/ztanner"><code>@ztanner</code></a> for helping!</p> <h2>v15.1.2</h2> <blockquote> <p>[!NOTE]<br /> This release is backporting bug fixes. It does <strong>not</strong> include all pending features/changes on canary.</p> </blockquote> <h3>Core Changes</h3> <ul> <li>Update React from 7283a213-20241206 to 65e06cb7-20241218: <a href="https://redirect.github.com/vercel/next.js/pull/74117">vercel/next.js#74117</a></li> </ul> <h3>Credits</h3> <p>Huge thanks to <a href="https://github.com/ztanner"><code>@ztanner</code></a> for helping!</p> </blockquote> </details> <details> <summary>Commits</summary> <ul> <li><a href="https://github.com/vercel/next.js/commit/4cbaaa118d2138edd32263da0dc4b2ecb9ddbc2b"><code>4cbaaa1</code></a> v15.1.3</li> <li><a href="https://github.com/vercel/next.js/commit/221d18ba18d832d2bd86f4a5313b572d7380891b"><code>221d18b</code></a> Backport v15: used shared worker for lint & typecheck steps (<a href="https://redirect.github.com/vercel/next.js/issues/74154">#74154</a>) (<a href="https://redirect.github.com/vercel/next.js/issues/74285">#74285</a>)</li> <li><a href="https://github.com/vercel/next.js/commit/7d880a3b5bef34d5b26ca33e2fdb78bb2eaeabdc"><code>7d880a3</code></a> Backport v15: Retry manifest file loading only in dev mode (<a href="https://redirect.github.com/vercel/next.js/issues/73900">#73900</a>) (<a href="https://redirect.github.com/vercel/next.js/issues/74283">#74283</a>)</li> <li><a href="https://github.com/vercel/next.js/commit/df392a1b9748d5e88eeffbab6ba9e00c0aa9473a"><code>df392a1</code></a> v15.1.2</li> <li><a href="https://github.com/vercel/next.js/commit/40c9424beba3fae7fac341e73e50db0895326bec"><code>40c9424</code></a> Backport (v15): Update React from 7283a213-20241206 to 65e06cb7-20241218 (<a href="https://redirect.github.com/vercel/next.js/issues/74">#74</a>...</li> <li>See full diff in <a href="https://github.com/vercel/next.js/compare/v15.1.1...v15.1.3">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>
## Summary This PR adds `ReanimatedSystraceSection` class that allow for easy marking of relevant code sections on Android (through ATrace) and iOS (through signposts). When `REANIMATED_PROFILING` is not defined the profiling code will compile to `no-op`, meaning we can have these systrace sections in our code permanently. ## Test plan --------- Co-authored-by: Tomasz Żelawski <[email protected]>
## Summary
In the `maybeDropAncestors` function we can remove the view if it has no
remaining animating views. Let's say we have nested exiting animations:
```mermaid
flowchart TD
A((A: EXITING))
B((B: EXITING))
C((C: WAITING))
D((D: WAITING))
E((E: WAITING))
A --> B
A --> C
A --> D
A --> E
```
In the current implementation in this case if the animation in `B` ended
before `A`, we would visit `A` in `maybeDropAncestors` and decided to
remove `A`, even though it still has some waiting children. Then `A`
would be added to the view recycling pool while still having children.
This would cause us to see some zombie views when the view is reused.
I changed the `maybeDropAncestors` condition to check the size of the
`children` list. I also removed `node->animatedChildren` as I think it
is no longer necessary.
Fixes #6644
## Test plan
Chceck `[LA] View recycling` example, if there are no zombie views in
the `WheelPicker` component.
…tructor on Android (#6877) ## Summary This PR adds a comment in `ReactModuleInfo` constructor in ReanimatedPackage.java. We set `canOverrideExistingModule` to `true` because Reanimated overrides `UIManagerModule`. ## Test plan
## Summary This PR removes `#include <react/utils/CoreFeatures.h>` in ReanimatedModuleProxy.cpp which breaks build on RN 0.77. See also facebook/react-native#45626 ## Test plan
## Summary This PR removes `shouldYield` commit option that was used in `ShadowTree::commit` in `ReanimatedModuleProxy::performOperations`. The reason for the change is that `shouldYield` commit option has been removed in RN 0.77 in facebook/react-native#47191. ## Test plan
…#6864) ## Summary This PR addresses the issue of respecting reduced motion settings for Layout Animations on Fabric. In addition it avoids double initialisation of entering animation for Fabric. Fixes #6863 ### With Disabled Reduced Motion https://github.com/user-attachments/assets/af80a2e7-dbac-453a-ba1b-fca3549245fb ### With Enabled Reduced Motion | before | after | | --- | --- | | <video src="https://github.com/user-attachments/assets/caa7f8f0-4980-43a0-9433-880bf44d8c7d" /> | <video src="https://github.com/user-attachments/assets/0a9c04a0-66ab-4430-aa33-0cd305193ffe" /> | ## Test plan <details> <summary>Test Example code</summary> ```js import { Text, StyleSheet, View, Button } from 'react-native'; import Animated, { FadeIn, FadeOut, LinearTransition } from 'react-native-reanimated'; import React from 'react'; export default function EmptyExample() { const [toggle, setToggle] = React.useState(true); return ( <View style={styles.container}> <Button title="Toggle" onPress={() => setToggle((prev) => !prev)} /> {toggle && <Animated.Text entering={FadeIn.duration(2000)} exiting={FadeOut.duration(1000)} > Title 1, Title 1, Title 1, Title 1, Title 1, Title 1, Title 1, Title 1, Title 1, Title 1, Title 1, Title 1, Title 1, Title 1, Title 1, Title 1, Title 1, Title 1, Title 1, Title 1, Title 1, Title 1, Title 1, Title 1, Title 1, Title 1, Title 1, Title 1, Title 1, Title 1, </Animated.Text> } <Animated.Text layout={LinearTransition.duration(1000)} > Paragraph 1, Paragraph 1, Paragraph 1, Paragraph 1, Paragraph 1, Paragraph 1, Paragraph 1, Paragraph 1, Paragraph 1, Paragraph 1, Paragraph 1, Paragraph 1, Paragraph 1, Paragraph 1, Paragraph 1, Paragraph 1, Paragraph 1, Paragraph 1, Paragraph 1, Paragraph 1 </Animated.Text> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, }, }); ``` </details>
<!-- 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 If you run NextJs application in edge runtime, library throws an error `__reanimatedLoggerConfig is not defined` we needs to declare global or globalThis on every usage in workers on edge runtime. ## Collaboration **It was found and made in collaboration with @vault-developer** ## Test plan Tested with patch-package and it worked
## Summary The method findHostInstance in [email protected] has been moved from a named export to the default export. This PR fix compatibility issue. ## Test plan Run application with `[email protected]`
Breaks circular reference in the `LayoutAnimations`. `LayoutAnimations ` is a `HybridClass` with a C++ counterpart holding a global reference to the Java object. This structure creates a circular reference between C++ and Java, which the garbage collector cannot clean up. To resolve this issue, I manually removed the reference between C++ and Java by resetting the global ref during the destructor of the `NativeProxy`. - tested in Expo Go ✅ --------- Co-authored-by: Tomasz Żelawski <[email protected]>
## Summary This PR adds a missing null check for certain components that do not contain the `_componentRef` field. This can happen for example when you uses `useAnimatedRef` with FlashList. ## Test plan Use FlashList as a animated component
## Summary
This PR fixes the following errors that occur when trying to run
web-example using `yarn start --reset-cache`:
```
Web Bundling failed 174ms apps/web-example/index.js (1 module)
ERROR index.js: Cannot find module '@stylexjs/babel-plugin'
Require stack:
- /Users/tomekzaw/RNOS/react-native-reanimated/apps/web-example/babel.config.js
- /Users/tomekzaw/RNOS/react-native-reanimated/node_modules/@babel/core/lib/config/files/module-types.js
- /Users/tomekzaw/RNOS/react-native-reanimated/node_modules/@babel/core/lib/config/files/configuration.js
- /Users/tomekzaw/RNOS/react-native-reanimated/node_modules/@babel/core/lib/config/files/index.js
- /Users/tomekzaw/RNOS/react-native-reanimated/node_modules/@babel/core/lib/index.js
- /Users/tomekzaw/RNOS/react-native-reanimated/apps/web-example/node_modules/@expo/metro-config/build/transform-worker/metro-transform-worker.js
- /Users/tomekzaw/RNOS/react-native-reanimated/apps/web-example/node_modules/@expo/metro-config/build/transform-worker/transform-worker.js
- /Users/tomekzaw/RNOS/react-native-reanimated/node_modules/metro/src/DeltaBundler/Worker.flow.js
- /Users/tomekzaw/RNOS/react-native-reanimated/node_modules/metro/src/DeltaBundler/Worker.js
- /Users/tomekzaw/RNOS/react-native-reanimated/node_modules/jest-worker/build/workers/processChild.js
```
Then I faced another error:
```
Web Bundling failed 5562ms apps/web-example/index.js (1325 modules)
ERROR ReferenceError: SHA-1 for file /Users/tomekzaw/RNOS/react-native-reanimated/node_modules/@react-native/js-polyfills/error-guard.js is not computed.
Potential causes:
1) You have symlinks in your project - watchman does not follow symlinks.
2) Check `blockList` in your metro.config.js and make sure it isn't excluding the file path.
at DependencyGraph.getSha1 (/Users/tomekzaw/RNOS/react-native-reanimated/node_modules/metro/src/node-haste/DependencyGraph.js:181:13)
at Transformer._getSha1 (/Users/tomekzaw/RNOS/react-native-reanimated/node_modules/metro/src/Bundler.js:15:26)
at Transformer.transformFile (/Users/tomekzaw/RNOS/react-native-reanimated/node_modules/metro/src/DeltaBundler/Transformer.js:92:19)
at Bundler.transformFile (/Users/tomekzaw/RNOS/react-native-reanimated/node_modules/metro/src/Bundler.js:43:30)
at processTicksAndRejections (node:internal/process/task_queues:95:5)
at Object.transform (/Users/tomekzaw/RNOS/react-native-reanimated/node_modules/metro/src/lib/transformHelpers.js:134:12)
at transform (/Users/tomekzaw/RNOS/react-native-reanimated/node_modules/metro/src/DeltaBundler/Graph.js:164:26)
at visit (/Users/tomekzaw/RNOS/react-native-reanimated/node_modules/metro/src/DeltaBundler/buildSubgraph.js:82:29)
at async Promise.all (index 3)
at buildSubgraph (/Users/tomekzaw/RNOS/react-native-reanimated/node_modules/metro/src/DeltaBundler/buildSubgraph.js:103:3)
```
Turns out it's dependent on whether react-native is hoisted or not so I
applied the following patch for `metro.config.js` that @tjzel had sent
me:
```js
const hasReactNative = require.resolve('react-native/package.json', {
paths: [projectRoot],
});
if (!hasReactNative) {
const modulesToBlock = ['@react-native'];
// @ts-expect-error
config.resolver.blacklistRE = exclusionList(
modulesToBlock.map(
(m) =>
new RegExp(
`^${escape(path.join(monorepoRoot, 'node_modules', m))}\\/.*$`
)
)
);
}
```
Finally, I bumped `react-native-web` and `@expo/metro-runtime` to the
latest versions.
Now we can launch web-example using `yarn start --reset-cache`.
## Test plan
## Summary Unsubscribes listeners that were not removed correctly during the app reload. ## Test plan I tested it with a new project using Expo (SDK 52) and with Fabric enabled. I reloaded the app several times and performed a heap dump to verify that everything was removed correctly. --------- Co-authored-by: Krzysztof Piaskowy <[email protected]>
This PR bumps `react-native` in paper-example and fabric-example from `0.76.5` to `0.77.0-rc.6` (golden RC) accordingly to https://react-native-community.github.io/upgrade-helper/?from=0.76.5&to=0.77.0-rc.6. Apart from this, changes have been made in macos-example, tvos-example and web-example to align versions of common native dependencies so they are hoisted by yarn. I had to patch `@shopify/flash-list`: * Shopify/flash-list#1466 – fixes Android build * Shopify/flash-list#1041 – fixes `scrollTo` example Changes required by Reanimated to support RN 0.77 have been moved to separate PRs for the sake of atomicity and transparency: * #6875 * #6876 * #6883 * #6884 --------- Co-authored-by: Krzysztof Piaskowy <[email protected]>
## Summary This PR adds Reanimated 3.16.7 row and React Native 0.77 column in the compatibility table in the docs. ## Test plan
## Summary This PR configures build and publishes with provenance for nightly package build on npm as described in [Generating provenance statements](https://docs.npmjs.com/generating-provenance-statements). ## Test plan See if the CI works.
## Summary This PR adds React Native 0.77 for Paper and Fabric to the test matrix in compatibility check workflow for GitHub Actions. ## Test plan
## Summary This PR changes the logic of generating nightly release version name. Before this change, the next published version would be `4.0.0-beta.1-nightly-20250121-9a907dd8b`. After this change, it will be `4.0.0-nightly-20250121-9a907dd8b` (without `-beta.1` part). ## Test plan
## Summary Fixes #6724 Turns out that `TabNavigatorObserver's` `onFragmentUpdate` didn't handle `NullPointerException`, which in turn sometimes crashed release builds on android. ## Test plan I wasn't able to create a simple reproduction but I have at least one SWM project that used the exact same code to patch Reanimated and it took care of their android crashes.
## Summary This PR addresses an issue where color-based properties (`backgroundColor`, `boxShadow`) were causing flickering when used with withSpring animations. The root cause of the flickering was RGBA values going below `0`, resulting in `NaN` values. I introduced `clampRGBA` function that guards values within given limits. Before: https://github.com/user-attachments/assets/ace128a8-3f4b-41be-98c6-d34339808283 After: https://github.com/user-attachments/assets/b29f1248-2385-48c2-8fad-e261ee21b46a ## Test plan Paste this code to EmptyExample - it should work on both Paper and Fabric: <details> <summary>EmptyExample code</summary> ```js import { Text, StyleSheet, View, Pressable } from 'react-native'; import React from 'react'; import Animated, { useSharedValue, withSpring, useAnimatedStyle, } from 'react-native-reanimated'; export default function EmptyExample() { const pressed = useSharedValue(false); const animatedStyle = useAnimatedStyle(() => { return { backgroundColor: withSpring(pressed.value ? 'blue' : 'red'), }; }); return ( <View> <Animated.View style={[styles.box, animatedStyle]} /> <Pressable onPress={() => { pressed.value = !pressed.value; }}> <Text>Press me</Text> </Pressable> </View> ); } const styles = StyleSheet.create({ box: { width: 50, height: 50, }, }); ``` </details>
## Summary As it was discovered in #6757, `withRepeat` run along with `withDecay` triggered repeat only once, even if the number of repeats was greater. `withDecay` relies on the value of `velocity`. The `initialVelocity` is the velocity provided (or default), and during the animation, the `velocity` value decreases, causing the animated object to slowly stop. The problem was, after first repeat the `velocity` was already decreased to almost zero and the animation could not run, as it had no momentum. I was able to fix that by adjusting `finished` prop, and reseting `velocity` to initial value, if `finished` is `true`. Fixes #6757 Before: https://github.com/user-attachments/assets/98b64f3e-8a08-4bed-8480-856735e6dc68 After: https://github.com/user-attachments/assets/354c0842-3bab-457c-b75a-d1eea9df782f ## Test plan Run provided code snipped on Fabric example <details> <summary>Code snipped provided in issue</summary> ```ts import React from 'react'; import { View, Pressable, Text, StyleSheet } from 'react-native'; import Animated, { useAnimatedStyle, useSharedValue, withDecay, withRepeat, } from 'react-native-reanimated'; import { GestureHandlerRootView, GestureDetector, Gesture, } from 'react-native-gesture-handler'; const ballSize = 100; export default function EmptyExample() { const position = useSharedValue(1); const animatedStyle = useAnimatedStyle(() => ({ transform: [{ translateY: position.value }], })); const tap = Gesture.Tap().onStart(() => { position.value = withRepeat( withDecay({ velocity: 200, clamp: [-50, 100] }), 5 ); // position.value = withDecay({ velocity: 200, clamp: [-500, 500] }); }); return ( <GestureHandlerRootView style={{ flex: 1 }}> <View style={{ flex: 1, justifyContent: 'center', backgroundColor: 'red' }}> <GestureDetector gesture={tap}> <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', flexDirection: 'column', }}> <Animated.View style={[styles.ball, animatedStyle]} /> </View> </GestureDetector> </View> </GestureHandlerRootView> ); } const styles = StyleSheet.create({ ball: { width: ballSize, height: ballSize, borderRadius: ballSize / 2, backgroundColor: 'black', margin: 30, }, }); ``` </details>
## Summary Fixes #6799. Shared value which contains a number array will not behave as expected with a `withRepeat` hook. Because it was an array the `animation.startValue` and `nextAnimation.current` became connected by reference, and therefore `startValue` was rising as `current` instead of staying a actual `startValue`. I discovered that in `arrayOnStart`, `animation.current === value` caused a referenced so i spread it. ## Test plan Example code: ```js import { Text, SafeAreaView, StyleSheet } from 'react-native'; import { useEffect } from 'react'; import { useAnimatedReaction, useSharedValue, withRepeat, withTiming } from 'react-native-reanimated'; export default function App() { const arrayValue = useSharedValue([0]); const objValue = useSharedValue({x:0}); const numberValue = useSharedValue(0); const textValue = useSharedValue('0'); useEffect( () => { const duration = 300; // ❌ changes from [0,0,0] to [30,30,30] but then stops arrayValue.value = withRepeat( withTiming([30], { duration} ), 2, true); // ✅ repeats from 0 to 30 and back to 0 numberValue.value = withRepeat( withTiming(30, { duration} ), 2, true); // ✅ repeats from {x:0,y:0,z:0} to {x:30,y:30,z:30} and back to {x:0,y:0,z:0} objValue.value = withRepeat( withTiming({x: 30}, { duration} ), 2, true); },[]); useAnimatedReaction( () => [arrayValue.value, numberValue.value, objValue.value], ([arrayValue, numberValue, objValue]) => { // ✅ works - value reaches 30, then back to 0 // textValue.value = `${numberValue.toFixed(2)}`; // ✅ works - value reaches 30, then back to 0 // textValue.value = `${objValue.x.toFixed(2)}`; // ❌ value reaches 30, then remains textValue.value = `${arrayValue[0].toFixed(2)}` console.log('value:', textValue.value); } ) return ( <SafeAreaView style={styles.container}> <Text style={styles.text}>See console.log</Text> </SafeAreaView> ); } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#ecf0f1', padding: 8, }, text: { margin: 24, fontSize: 18, fontWeight: 'bold', textAlign: 'center', } }); ```
<!-- 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 <!-- Explain the motivation for this PR. Include "Fixes #<number>" if applicable. --> In this PR, I've introduced color interpolation based on the [OKLAB](https://en.wikipedia.org/wiki/Oklab_color_space) color space. <img src="https://facelessuser.github.io/coloraide/images/oklab-3d.png" width="33%" height="33%"/> <sup>(image credit: <a href="https://facelessuser.github.io/coloraide">ColorAide</a>)</sup> ### Details OKLAB is derived from CIELAB - both considered improvements compared to RGB and HSV/L in terms of color gradient computation, as the linear interpolations over their channels results in a smoother experience. That's for 2 reasons: 1. The color space tends to better preserve light intensity across the transition (largely thanks to the L channel) 1. They minimize the inter-color transitivity **L\*a\*b\* does often yield results very similar to RGB w/ gamma correction, as in the case of the default colors on the web-site:**  Nevertheless, there are some cases where the result can be considered better. Going from red to blue, for example, LAB shows a smoother transition with less intermediate coloring (purple in this case):  Also, in yellow-to-blue, LAB better preserves lightness:  ### Things to notice * In my implementation, I've completely relied on `culori`, but had to rip their code off from it (all-the-while keeping the credit). I couldn't use it as-is, because I had no way to specify it's meant for off-loaded execution (i.e. using the `worklet` notation). **I could definitely use some advice with that** by the maintainers ❗ * In terms of user-facing API's, I've decided to name the color-space selection `LAB` (alongisde `RGB` and `HSV`), hiding the implementation details (i.e. the underlying selection of _oklab_, in particular). I believe that any future offering of other LAB spaces (e.g. CIELAB) could be introduced by allowing for LAB-specific `options`. * OKLAB is the default implementation in native Android development, offered by Jetpack Compose. ## Motivation There are potential screens in the apps we're working on where a smooth color transition could improve the user experience. We're avid users of `reanimated` and would love to be able to incorporate the best experience though it. ## 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. --> TBD
## Summary This PR introduces support for boxShadow - a new feature from React Native 0.76+ NewArch. At the same time it address #6687 . * Adds parser for `boxShadow` prop, that transforms string into a `boxShadow` object. * Adds Jest tests * Fix colors flickering when run with `withSpring` Runtime test are added for future fabric support in RuntimeTests. Fixes #6687 https://github.com/user-attachments/assets/9051d98f-cfb0-41b0-a2b4-6a8c11b477da ## Test plan To test, paste this code snippet to `EmptyExample` and run. <details> <summary>EmptyExample code</summary> ```js import React from 'react'; import { Pressable, SafeAreaView, ScrollView, Text, View } from 'react-native'; import Animated, { Easing, interpolate, interpolateColor, useAnimatedStyle, useSharedValue, withTiming, } from 'react-native-reanimated'; import processBoxShadow from 'react-native-reanimated/src/processBoxShadow'; const AnimatedPressable = Animated.createAnimatedComponent(Pressable); const BUTTON_TRANSITION_TIME = 500; const EmptyExample = () => { const pressed = useSharedValue<number>(0); const animatedBoxShadow = useAnimatedStyle(() => { const blurRadius = interpolate(pressed.value, [0, 1], [10, 0]); const color = interpolateColor( pressed.value, [0, 1], ['#57b495', '#31775d'] ); const boxShadow = `0px 4px ${blurRadius} 0px ${color}`; return { boxShadow, }; }); const backgroundColorStyle = useAnimatedStyle(() => { const backgroundColor = interpolateColor( pressed.value, [0, 1], ['#b1dfd0', '#57b495'] ); return { backgroundColor, }; }); const handlePressIn = () => { pressed.value = withTiming(1, { duration: BUTTON_TRANSITION_TIME, easing: Easing.out(Easing.ease), }); }; const handlePressOut = () => { pressed.value = withTiming(0, { duration: BUTTON_TRANSITION_TIME, easing: Easing.out(Easing.ease), }); }; return ( <SafeAreaView style={backgroundStyle}> <ScrollView style={backgroundStyle}> <View style={{ padding: 24, }}> <Text style={{ fontSize: 18, color: '#001a72', fontWeight: 'bold', textAlign: 'center', marginBottom: 16, }}> The background color animation will work and so will the shadow ✨ </Text> <Text style={{ fontSize: 14, color: '#001a72', marginBottom: 8, }}> BoxShadow is officially supported by Reanimated 💅 </Text> <AnimatedPressable style={[ backgroundColorStyle, animatedBoxShadow, { padding: 16, borderRadius: 100, marginVertical: 16, }, ]} onPressIn={handlePressIn} onPressOut={handlePressOut}> <Text style={{ color: '#001a72' }}> Hello I am button with shadow </Text> </AnimatedPressable> </View> </ScrollView> </SafeAreaView> ); }; const backgroundStyle = { backgroundColor: '#f8f9ff', flex: 1, }; export default EmptyExample; ``` </details>
This PR adds the missing call to `calculateTimestampWithSlowAnimations`, which is necessary to properly handle slow animations on iOS. | before | after | | --- | --- | | <video src="https://github.com/user-attachments/assets/e09f3e50-5a12-472d-aea1-71d98c1638bb" /> | <video src="https://github.com/user-attachments/assets/d3a6d047-d443-4f3b-9947-b6f96ee9d479" /> | Runa animation and toggle slow animation on iOS.
## Summary After update to Reanimated 3.16.x we started to have hundreds of crashes due to this error: ``` Exception java.lang.NullPointerException: Attempt to invoke virtual method 'java.lang.Object java.lang.ref.WeakReference.get()' on a null object reference. ``` More info could be found in this issue #4472 ## Test plan I am not able to reproduce issue locally since it's happening for some small percentage of users. According to stack trace I am pretty sure it will help but I am not sure if it's proper fix because I don't have deeper understanding of surrounding code. --------- Co-authored-by: Krzysztof Piaskowy <[email protected]>
## Summary `yarn build` is now necessary when preparing Reanimated package. ## Test plan 🚀
## Summary Our current implementation of keyframe parsing mutates the keyframe definition object (e.g. we remove the easing function). If we try to call `build()` on a `Keyframe` object more than once, we will end up with a different animation after the first time. This is bad because we want people to memoize their Keyframes. I decided to fix this problem by caching the calculated animation. This fixes this problem, and also allows us to reuse the result of parsing. ## Test plan
## Summary This PR fixes build crash because of missing namespace usage. ## Test plan Just build the app in the release mode (I tested on android).
…6769) ## Summary To ensure the animation is correctly initialized and starts as expected we set its current value to undefined. Setting current to 0 breaks the animation. Fixes #6680. ## Test plan Run code snippet in React Native Paper example 🚀 <details> <summary>Code snippet used in issue</summary> ```ts import React from 'react'; import { Pressable, Text } from 'react-native'; import Animated, { useAnimatedStyle, useSharedValue, withDecay, } from 'react-native-reanimated'; export default function EmptyExample() { const translateY = useSharedValue(0); const style = useAnimatedStyle(() => ({ transform: [{ translateY: translateY.value }], })); return ( <> <Pressable style={{ padding: 100, backgroundColor: 'purple' }} onPress={() => { translateY.value = withDecay({ velocity: 200, }); }}> <Text style={{ fontSize: 50 }}>open</Text> </Pressable> <Animated.View style={[ { backgroundColor: 'blue', width: 100, height: 100, }, style, ]} /> </> ); } ``` </details>
<!-- 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. --> Previously, NativeReanimatedModule::handleRawEvent would intercept all events received by the event listener. This resulted in an issue where onLayout would not fire in JS on the New Architecture. Instead, only intercept events with waiting handlers. This prevents asJSIValue from being called on the Reanimated event loop and allows onLayout to bubble up in JS. See https://github.com/facebook/react-native/blob/v0.76.2/packages/react-native/ReactCommon/react/renderer/components/view/BaseViewEventEmitter.cpp#L82-L112, which prevents onLayout from being dispatched more than once. asJSIValue evaluates the lambda above in https://github.com/facebook/react-native/blob/v0.76.2/packages/react-native/ReactCommon/react/renderer/core/ValueFactoryEventPayload.cpp#L16. Fixes #6684 See reproducer in #6684. Without this change, `onLayout` will not fire on device rotation. With this change, `onLayout` will fire as expected. --------- Co-authored-by: Krzysztof Piaskowy <[email protected]>
## Summary Fixes #6896 When adding support for fabric, we have inadvertently kept previous listeners still active for fabric. This way, we registered twice with the same `NodesManager` for React Native's `FabricEventDispatcher`, resulting in pretty much all the events doubling in number on android. I added a simple check that takes care of it. ## Test plan Paste the following into `EmptyExample` and run `FabricExample`. Check logs making sure that both `start` and `end` are logged only once per gesture. ```TSX import React, { useState } from 'react'; import { View, Text } from 'react-native'; import Animated, { useAnimatedScrollHandler } from 'react-native-reanimated'; function EmptyExample() { const [w, sW] = useState(0); const scrollHandler = useAnimatedScrollHandler({ onBeginDrag() { console.log('start'); }, onMomentumEnd() { console.log('end'); }, }); return ( <View style={{ flex: 1 }} onLayout={(evt) => sW(evt.nativeEvent.layout.width)}> <Animated.ScrollView onScroll={scrollHandler} horizontal snapToInterval={w} decelerationRate="fast"> {Array.from({ length: 20 }) .fill(0) .map((_, i) => { return ( <View key={i} style={{ width: w }}> <Text>{i}</Text> </View> ); })} </Animated.ScrollView> </View> ); } export default EmptyExample; ```
## Summary This PR sets version for `react-native-reanimated` project in build.gradle so it is passed to prefab tool. ## Test plan 1. Build example app. 2. Run `find . -name prefab.json` 3. Confirm that `"version": "4.0.0-beta.1"` is present in `prefab.json`
Fixes #6703. Based on @Thend007's patch from #6703 (comment).
With current monorepo setup `fabric-example` etc. (not counting `common-app`) are linked in `node_modules` so they could be imported in another workspace, which is unnecessary. This doesn't really bother us, but sometimes when you need to find something in `node_modules` it's annoying that these show up. 🚀
## Summary Fixes #6951 `Cannot read properties of undefined (reading 'map')` error crashed a site every time user called entering or exiting animation w/o `transform` prop. It was caused by calling `addPxToTransform` (and therefore calling `map`), before checking if `transform` is not an empty prop. ## Test plan <details> <summary>minimal repro to run on web</summary> ```tsx import React, { useState } from 'react'; import { View, Pressable, Text, Dimensions } from 'react-native'; import Animated, { SlideInRight } from 'react-native-reanimated'; const { width } = Dimensions.get('window'); export default function App() { const [visible, setVisible] = useState(false); return ( <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', minHeight: 200, }}> {visible && ( <Animated.View entering={SlideInRight.delay(0) .duration(400) .withInitialValues({ originX: width + 50 })} style={{ width: 100, height: 100, backgroundColor: '#82cab2', borderRadius: 20, position: 'absolute', }} /> )} <Pressable onPress={() => setVisible((prev) => !prev)}> <Text style={{ color: 'white', backgroundColor: '#b58df1', paddingHorizontal: 16, paddingVertical: 8, borderRadius: 10, }}> Toggle </Text> </Pressable> </View> ); } ``` </details>
## Summary Fixes #6202. Due to React Native's `_valueTracker`, using `useAnimatedProps` won't work on input component. Before when using `react-native-web` <= 18 we were able to set `text` props using `setNativeProps` legacy function. Currently on newer `react-native-web`, (and due to the `_valueTracker`), we were trying to `setAttribute` `text` on input component -unsuccessfully. This PR implements fix that checks whether current component is `input` with a prop `text`, if so it updates props directly on it. With a support from this [PR](#6691). ## Test plan Run **JS props** or **Amount** in `web-example` --------- Co-authored-by: Tomek Zawadzki <[email protected]>
Bumps [esbuild](https://github.com/evanw/esbuild) from 0.20.2 to 0.25.0. <details> <summary>Release notes</summary> <p><em>Sourced from <a href="https://github.com/evanw/esbuild/releases">esbuild's releases</a>.</em></p> <blockquote> <h2>v0.25.0</h2> <p><strong>This release deliberately contains backwards-incompatible changes.</strong> To avoid automatically picking up releases like this, you should either be pinning the exact version of <code>esbuild</code> in your <code>package.json</code> file (recommended) or be using a version range syntax that only accepts patch upgrades such as <code>^0.24.0</code> or <code>~0.24.0</code>. See npm's documentation about <a href="https://docs.npmjs.com/cli/v6/using-npm/semver/">semver</a> for more information.</p> <ul> <li> <p>Restrict access to esbuild's development server (<a href="https://github.com/evanw/esbuild/security/advisories/GHSA-67mh-4wv8-2f99">GHSA-67mh-4wv8-2f99</a>)</p> <p>This change addresses esbuild's first security vulnerability report. Previously esbuild set the <code>Access-Control-Allow-Origin</code> header to <code>*</code> to allow esbuild's development server to be flexible in how it's used for development. However, this allows the websites you visit to make HTTP requests to esbuild's local development server, which gives read-only access to your source code if the website were to fetch your source code's specific URL. You can read more information in <a href="https://github.com/evanw/esbuild/security/advisories/GHSA-67mh-4wv8-2f99">the report</a>.</p> <p>Starting with this release, <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS">CORS</a> will now be disabled, and requests will now be denied if the host does not match the one provided to <code>--serve=</code>. The default host is <code>0.0.0.0</code>, which refers to all of the IP addresses that represent the local machine (e.g. both <code>127.0.0.1</code> and <code>192.168.0.1</code>). If you want to customize anything about esbuild's development server, you can <a href="https://esbuild.github.io/api/#serve-proxy">put a proxy in front of esbuild</a> and modify the incoming and/or outgoing requests.</p> <p>In addition, the <code>serve()</code> API call has been changed to return an array of <code>hosts</code> instead of a single <code>host</code> string. This makes it possible to determine all of the hosts that esbuild's development server will accept.</p> <p>Thanks to <a href="https://github.com/sapphi-red"><code>@sapphi-red</code></a> for reporting this issue.</p> </li> <li> <p>Delete output files when a build fails in watch mode (<a href="https://redirect.github.com/evanw/esbuild/issues/3643">#3643</a>)</p> <p>It has been requested for esbuild to delete files when a build fails in watch mode. Previously esbuild left the old files in place, which could cause people to not immediately realize that the most recent build failed. With this release, esbuild will now delete all output files if a rebuild fails. Fixing the build error and triggering another rebuild will restore all output files again.</p> </li> <li> <p>Fix correctness issues with the CSS nesting transform (<a href="https://redirect.github.com/evanw/esbuild/issues/3620">#3620</a>, <a href="https://redirect.github.com/evanw/esbuild/issues/3877">#3877</a>, <a href="https://redirect.github.com/evanw/esbuild/issues/3933">#3933</a>, <a href="https://redirect.github.com/evanw/esbuild/issues/3997">#3997</a>, <a href="https://redirect.github.com/evanw/esbuild/issues/4005">#4005</a>, <a href="https://redirect.github.com/evanw/esbuild/pull/4037">#4037</a>, <a href="https://redirect.github.com/evanw/esbuild/pull/4038">#4038</a>)</p> <p>This release fixes the following problems:</p> <ul> <li> <p>Naive expansion of CSS nesting can result in an exponential blow-up of generated CSS if each nesting level has multiple selectors. Previously esbuild sometimes collapsed individual nesting levels using <code>:is()</code> to limit expansion. However, this collapsing wasn't correct in some cases, so it has been removed to fix correctness issues.</p> <pre lang="css"><code>/* Original code */ .parent { > .a, > .b1 > .b2 { color: red; } } <p>/* Old output (with --supported:nesting=false) */<br /> .parent > :is(.a, .b1 > .b2) {<br /> color: red;<br /> }</p> <p>/* New output (with --supported:nesting=false) */<br /> .parent > .a,<br /> .parent > .b1 > .b2 {<br /> color: red;<br /> }<br /> </code></pre></p> <p>Thanks to <a href="https://github.com/tim-we"><code>@tim-we</code></a> for working on a fix.</p> </li> <li> <p>The <code>&</code> CSS nesting selector can be repeated multiple times to increase CSS specificity. Previously esbuild ignored this possibility and incorrectly considered <code>&&</code> to have the same specificity as <code>&</code>. With this release, this should now work correctly:</p> <pre lang="css"><code>/* Original code (color should be red) */ </code></pre> </li> </ul> </li> </ul> <!-- raw HTML omitted --> </blockquote> <p>... (truncated)</p> </details> <details> <summary>Changelog</summary> <p><em>Sourced from <a href="https://github.com/evanw/esbuild/blob/main/CHANGELOG-2024.md">esbuild's changelog</a>.</em></p> <blockquote> <h1>Changelog: 2024</h1> <p>This changelog documents all esbuild versions published in the year 2024 (versions 0.19.12 through 0.24.2).</p> <h2>0.24.2</h2> <ul> <li> <p>Fix regression with <code>--define</code> and <code>import.meta</code> (<a href="https://redirect.github.com/evanw/esbuild/issues/4010">#4010</a>, <a href="https://redirect.github.com/evanw/esbuild/issues/4012">#4012</a>, <a href="https://redirect.github.com/evanw/esbuild/pull/4013">#4013</a>)</p> <p>The previous change in version 0.24.1 to use a more expression-like parser for <code>define</code> values to allow quoted property names introduced a regression that removed the ability to use <code>--define:import.meta=...</code>. Even though <code>import</code> is normally a keyword that can't be used as an identifier, ES modules special-case the <code>import.meta</code> expression to behave like an identifier anyway. This change fixes the regression.</p> <p>This fix was contributed by <a href="https://github.com/sapphi-red"><code>@sapphi-red</code></a>.</p> </li> </ul> <h2>0.24.1</h2> <ul> <li> <p>Allow <code>es2024</code> as a target in <code>tsconfig.json</code> (<a href="https://redirect.github.com/evanw/esbuild/issues/4004">#4004</a>)</p> <p>TypeScript recently <a href="https://devblogs.microsoft.com/typescript/announcing-typescript-5-7/#support-for---target-es2024-and---lib-es2024">added <code>es2024</code></a> as a compilation target, so esbuild now supports this in the <code>target</code> field of <code>tsconfig.json</code> files, such as in the following configuration file:</p> <pre lang="json"><code>{ "compilerOptions": { "target": "ES2024" } } </code></pre> <p>As a reminder, the only thing that esbuild uses this field for is determining whether or not to use legacy TypeScript behavior for class fields. You can read more in <a href="https://esbuild.github.io/content-types/#tsconfig-json">the documentation</a>.</p> <p>This fix was contributed by <a href="https://github.com/billyjanitsch"><code>@billyjanitsch</code></a>.</p> </li> <li> <p>Allow automatic semicolon insertion after <code>get</code>/<code>set</code></p> <p>This change fixes a grammar bug in the parser that incorrectly treated the following code as a syntax error:</p> <pre lang="ts"><code>class Foo { get *x() {} set *y() {} } </code></pre> <p>The above code will be considered valid starting with this release. This change to esbuild follows a <a href="https://redirect.github.com/microsoft/TypeScript/pull/60225">similar change to TypeScript</a> which will allow this syntax starting with TypeScript 5.7.</p> </li> <li> <p>Allow quoted property names in <code>--define</code> and <code>--pure</code> (<a href="https://redirect.github.com/evanw/esbuild/issues/4008">#4008</a>)</p> <p>The <code>define</code> and <code>pure</code> API options now accept identifier expressions containing quoted property names. Previously all identifiers in the identifier expression had to be bare identifiers. This change now makes <code>--define</code> and <code>--pure</code> consistent with <code>--global-name</code>, which already supported quoted property names. For example, the following is now possible:</p> <pre lang="js"><code></code></pre> </li> </ul> <!-- raw HTML omitted --> </blockquote> <p>... (truncated)</p> </details> <details> <summary>Commits</summary> <ul> <li><a href="https://github.com/evanw/esbuild/commit/e9174d671b1882758cd32ac5e146200f5bee3e45"><code>e9174d6</code></a> publish 0.25.0 to npm</li> <li><a href="https://github.com/evanw/esbuild/commit/c27dbebb9e7a55dd9a084dd151dddd840787490e"><code>c27dbeb</code></a> fix <code>hosts</code> in <code>plugin-tests.js</code></li> <li><a href="https://github.com/evanw/esbuild/commit/6794f602a453cf0255bcae245871de120a89a559"><code>6794f60</code></a> fix <code>hosts</code> in <code>node-unref-tests.js</code></li> <li><a href="https://github.com/evanw/esbuild/commit/de85afd65edec9ebc44a11e245fd9e9a2e99760d"><code>de85afd</code></a> Merge commit from fork</li> <li><a href="https://github.com/evanw/esbuild/commit/da1de1bf77a65f06654b49878d9ec4747ddaa21f"><code>da1de1b</code></a> fix <a href="https://redirect.github.com/evanw/esbuild/issues/4065">#4065</a>: bitwise operators can return bigints</li> <li><a href="https://github.com/evanw/esbuild/commit/f4e9d19fb20095a98bf40634f0380f6a16be91e7"><code>f4e9d19</code></a> switch case liveness: <code>default</code> is always last</li> <li><a href="https://github.com/evanw/esbuild/commit/7aa47c3e778ea04849f97f18dd9959df88fa0886"><code>7aa47c3</code></a> fix <a href="https://redirect.github.com/evanw/esbuild/issues/4028">#4028</a>: minify live/dead <code>switch</code> cases better</li> <li><a href="https://github.com/evanw/esbuild/commit/22ecd306190b8971ec4474b5485266c20350e266"><code>22ecd30</code></a> minify: more constant folding for strict equality</li> <li><a href="https://github.com/evanw/esbuild/commit/4cdf03c03697128044fa8fb76e5c478e9765b353"><code>4cdf03c</code></a> fix <a href="https://redirect.github.com/evanw/esbuild/issues/4053">#4053</a>: reordering of <code>.tsx</code> in <code>node_modules</code></li> <li><a href="https://github.com/evanw/esbuild/commit/dc719775b7140120916bd9e6777ca1cb8a1cdc0e"><code>dc71977</code></a> fix <a href="https://redirect.github.com/evanw/esbuild/issues/3692">#3692</a>: <code>0</code> now picks a random ephemeral port</li> <li>Additional commits viewable in <a href="https://github.com/evanw/esbuild/compare/v0.20.2...v0.25.0">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>
## Summary This PR fixes the transform computation for layout transitions on the web. It includes adjustments for the layout shift to the initial transform that occurs after a component's scale changes. | before | after | | --- | --- | | <video src="https://github.com/user-attachments/assets/2decffaf-532b-4226-a307-c8b2b1e23375" /> | <video src="https://github.com/user-attachments/assets/574de97c-b51c-456f-8036-5de66801a669" /> | ## Test plan <details> <summary>Test Example code</summary> ```js import { Button } from '@/apps/css/components'; import React, { useState } from 'react'; import { StyleSheet, View } from 'react-native'; import Animated, { LinearTransition } from 'react-native-reanimated'; export default function EmptyExample() { const [toggle, setToggle] = useState(true); return ( <View style={styles.container}> <Button onPress={() => setToggle(!toggle)} title="Toggle" /> {toggle && <View style={styles.block}/>} <View style={{ flexDirection: 'row' }}> <Animated.View style={[ { backgroundColor: 'red', borderWidth: 2, zIndex: 1 }, toggle ? { width: 100, height: 100 } : { width: 200, height: 200 } ]} layout={LinearTransition} /> {toggle && <View style={styles.block}/>} </View> </View> ); } const styles = StyleSheet.create({ container: {}, block: { width: 100, height: 100, backgroundColor: 'blue', borderWidth: 2, } }); ``` </details>
## Summary This PR fixes the following iOS build errors reported by @kkafar when `USE_FRAMEWORKS=dynamic` is set:  ``` Undefined symbol: facebook::jsi::dynamicFromValue(facebook::jsi::Runtime&, facebook::jsi::Value const&, std::__1::function<bool (std::__1::basic_string<char, std::__1::char_traits<char>, std::__1::allocator<char>> const&)> const&) ``` This is just the minimal fix, I will remove `install_modules_dependencies_legacy` in an upcoming PR. ## Test plan 1. Add `ENV['USE_FRAMEWORKS'] = 'dynamic'` in `fabric-example/ios/Podfile` 2. Run `bundle install && bundle exec pod install` 3. Open fabric-example in Xcode using `xed ios` 4. Build fabric-example app
…7032) ## Summary This PR removes the definition of `install_modules_dependencies_legacy` method in RNReanimated.podspec which is unused since React Native 0.72. ## Test plan * ✅ Build fabric-example on iOS * ✅ Build fabric-example on iOS with `ENV['USE_FRAMEWORKS'] = 'static'` in Podfile * ✅ Build fabric-example on iOS with `ENV['USE_FRAMEWORKS'] = 'dynamic'` in Podfile
MatiPl01
approved these changes
Feb 17, 2025
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.
Summary
Cherry-picking most of relevant PRs to
3.17.0frommain.Test plan
CIs won't work, since they are designed to be ran on
main.