Skip to content

Conversation

@piaskowyk
Copy link
Member

@piaskowyk piaskowyk commented Apr 9, 2025

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.

image

Test plan

code
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',
  },
});

@piaskowyk piaskowyk requested review from MatiPl01 and tomekzaw April 9, 2025 07:12
Copy link
Member

@MatiPl01 MatiPl01 left a comment

Choose a reason for hiding this comment

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

Looks fine. I left just 2 questions.

@piaskowyk piaskowyk enabled auto-merge April 10, 2025 15:06
@piaskowyk piaskowyk added this pull request to the merge queue Apr 10, 2025
Merged via the queue into main with commit f24d6f4 Apr 10, 2025
16 checks passed
@piaskowyk piaskowyk deleted the @piaskowyk/create-reanimated-native-view branch April 10, 2025 15:07
tjzel pushed a commit that referenced this pull request Apr 15, 2025
# 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`.


![image](https://github.com/user-attachments/assets/982a08c6-6e63-4f3b-a3bc-37578e37303d)


## 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 />


[![Dependabot compatibility
score](https://dependabot-badges.githubapp.com/badges/compatibility_score?dependency-name=axios&package-manager=npm_and_yarn&previous-version=1.7.7&new-version=1.8.4)](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.
@piaskowyk piaskowyk mentioned this pull request Jul 25, 2025
github-merge-queue bot pushed a commit that referenced this pull request Jul 25, 2025
## Summary
We currently don't use the Native View because we're still experimenting
with replacing commit hooks, etc. With @MatiPl01, we've decided to
remove those changes from the main branch for now because they are
causing some issues. We'll move them later to a branch with the
experimental implementation of `display: content`.
Related PRs:
- #7366
- #7380
## Test plan
See at CI
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.

4 participants