Skip to content
New issue

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

Sign up for GitHub

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

Jump to bottom

CellRendererComponent prop does not work with Animated.Flatlist #5931

Closed
regalstreak opened this issue Apr 23, 2024 · 3 comments · Fixed by #5951
Closed

CellRendererComponent prop does not work with Animated.Flatlist #5931

regalstreak opened this issue Apr 23, 2024 · 3 comments · Fixed by #5951
Labels
Platform: Android This issue is specific to Android Platform: iOS This issue is specific to iOS Repro provided A reproduction with a snippet of code, snack or repo is provided

Comments

@regalstreak
Copy link

Description

CellRendererComponent prop does not work with Animated.Flatlist

Steps to reproduce

Use a Animated.FlatList

Put in a CellRendererComponent prop

It wouldn't render on Android

Snack or a link to a repository

https://snack.expo.dev/wI0E5xWM3_QzmQbwRYnwV

Reanimated version

3.8.1

React Native version

0.73

Platforms

Android, iOS

JavaScript runtime

None

Workflow

None

Architecture

None

Build type

None

Device

None

Device model

No response

Acknowledgements

Yes
@github-actions github-actions bot added Platform: Android This issue is specific to Android Platform: iOS This issue is specific to iOS Repro provided A reproduction with a snippet of code, snack or repo is provided labels Apr 23, 2024
@hirbod
Copy link
Contributor

hirbod commented Apr 24, 2024 •
edited
Loading

This is expected:

react-native-reanimated/src/reanimated2/component/FlatList.tsx

Line 95 in f5dfead

CellRendererComponent={CellRendererComponent}

You could copy the implementation and adapt it to your needs instead of using Animated.FlastList.

@Latropos
Copy link
Contributor

Yes, this is an expected behaviour. I can confirm that @hirbod suggestions above are very reliable and you can follow them to customise CellRendererComponent according to your needs

@Latropos Latropos mentioned this issue Apr 29, 2024
Merged
@el-banna
Copy link

I would really recommend thinking of a way to provide styles to each item's wrapper view.
A very common use case of CellRendererComponent is to set the zIndex of the items.

Copying the implementation of Animated.FlatList is kinda an overkill to achieve that. It also prevents us from getting any bug fixes that will be pushed for Animated.FlatList in the future.

ngocle2497 pushed a commit to ngocle2497/react-native-reanimated that referenced this issue May 5, 2024
@dependabot
Bump axios from 1.4.0 to 1.6.0 (software-mansion#5359)
c205c90 
Bumps [axios](https://github.com/axios/axios) from 1.4.0 to 1.6.0.
<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.6.0</h2>
<h2>Release notes:</h2>
<h3>Bug Fixes</h3>
<ul>
<li><strong>CSRF:</strong> fixed CSRF vulnerability CVE-2023-45857 (<a
href="https://redirect.github.com/axios/axios/issues/6028">#6028</a>)
(<a
href="https://github.com/axios/axios/commit/96ee232bd3ee4de2e657333d4d2191cd389e14d0">96ee232</a>)</li>
<li><strong>dns:</strong> fixed lookup function decorator to work
properly in node v20; (<a
href="https://redirect.github.com/axios/axios/issues/6011">#6011</a>)
(<a
href="https://github.com/axios/axios/commit/5aaff532a6b820bb9ab6a8cd0f77131b47e2adb8">5aaff53</a>)</li>
<li><strong>types:</strong> fix AxiosHeaders types; (<a
href="https://redirect.github.com/axios/axios/issues/5931">#5931</a>)
(<a
href="https://github.com/axios/axios/commit/a1c8ad008b3c13d53e135bbd0862587fb9d3fc09">a1c8ad0</a>)</li>
</ul>
<h3>PRs</h3>
<ul>
<li>CVE 2023 45857 ( <a
href="https://api.github.com/repos/axios/axios/pulls/6028">#6028</a>
)</li>
</ul>
<pre><code>
⚠️ Critical vulnerability fix. See
https://security.snyk.io/vuln/SNYK-JS-AXIOS-6032459
</code></pre>
<h3>Contributors to this release</h3>
<ul>
<li><!-- raw HTML omitted --> <a
href="https://github.com/DigitalBrainJS" title="+449/-114
([software-mansion#6032](axios/axios#6032)
[software-mansion#6021](axios/axios#6021)
[software-mansion#6011](axios/axios#6011)
[software-mansion#5932](axios/axios#5932)
[software-mansion#5931](axios/axios#5931) )">Dmitriy
Mozgovoy</a></li>
<li><!-- raw HTML omitted --> <a
href="https://github.com/valentin-panov" title="+4/-4
([software-mansion#6028](axios/axios#6028) )">Valentin
Panov</a></li>
<li><!-- raw HTML omitted --> <a href="https://github.com/therealrinku"
title="+1/-1 ([software-mansion#5889](axios/axios#5889)
)">Rinku Chaudhari</a></li>
</ul>
<h2>Release v1.5.1</h2>
<h2>Release notes:</h2>
<h3>Bug Fixes</h3>
<ul>
<li><strong>adapters:</strong> improved adapters loading logic to have
clear error messages; (<a
href="https://redirect.github.com/axios/axios/issues/5919">#5919</a>)
(<a
href="https://github.com/axios/axios/commit/e4107797a7a1376f6209fbecfbbce73d3faa7859">e410779</a>)</li>
<li><strong>formdata:</strong> fixed automatic addition of the
<code>Content-Type</code> header for FormData in non-browser
environments; (<a
href="https://redirect.github.com/axios/axios/issues/5917">#5917</a>)
(<a
href="https://github.com/axios/axios/commit/bc9af51b1886d1b3529617702f2a21a6c0ed5d92">bc9af51</a>)</li>
<li><strong>headers:</strong> allow <code>content-encoding</code> header
to handle case-insensitive values (<a
href="https://redirect.github.com/axios/axios/issues/5890">#5890</a>)
(<a
href="https://redirect.github.com/axios/axios/issues/5892">#5892</a>)
(<a
href="https://github.com/axios/axios/commit/4c89f25196525e90a6e75eda9cb31ae0a2e18acd">4c89f25</a>)</li>
<li><strong>types:</strong> removed duplicated code (<a
href="https://github.com/axios/axios/commit/9e6205630e1c9cf863adf141c0edb9e6d8d4b149">9e62056</a>)</li>
</ul>
<h3>Contributors to this release</h3>
<ul>
<li><!-- raw HTML omitted --> <a
href="https://github.com/DigitalBrainJS" title="+89/-18
([software-mansion#5919](axios/axios#5919)
[software-mansion#5917](axios/axios#5917) )">Dmitriy
Mozgovoy</a></li>
<li><!-- raw HTML omitted --> <a href="https://github.com/DavidJDallas"
title="+11/-5 ()">David Dallas</a></li>
<li><!-- raw HTML omitted --> <a href="https://github.com/fb-sean"
title="+2/-8 ()">Sean Sattler</a></li>
<li><!-- raw HTML omitted --> <a href="https://github.com/0o001"
title="+4/-4 ()">Mustafa Ateş Uzun</a></li>
<li><!-- raw HTML omitted --> <a
href="https://github.com/sfc-gh-pmotacki" title="+2/-1
([software-mansion#5892](axios/axios#5892) )">Przemyslaw
Motacki</a></li>
<li><!-- raw HTML omitted --> <a href="https://github.com/Cadienvan"
title="+1/-1 ()">Michael Di Prisco</a></li>
</ul>
<h2>Release v1.5.0</h2>
<h2>Release notes:</h2>
<h3>Bug Fixes</h3>
<ul>
<li><strong>adapter:</strong> make adapter loading error more clear by
using platform-specific adapters explicitly (<a
href="https://redirect.github.com/axios/axios/issues/5837">#5837</a>)
(<a
href="https://github.com/axios/axios/commit/9a414bb6c81796a95c6c7fe668637825458e8b6d">9a414bb</a>)</li>
<li><strong>dns:</strong> fixed <code>cacheable-lookup</code>
integration; (<a
href="https://redirect.github.com/axios/axios/issues/5836">#5836</a>)
(<a
href="https://github.com/axios/axios/commit/b3e327dcc9277bdce34c7ef57beedf644b00d628">b3e327d</a>)</li>
<li><strong>headers:</strong> added support for setting header names
that overlap with class methods; (<a
href="https://redirect.github.com/axios/axios/issues/5831">#5831</a>)
(<a
href="https://github.com/axios/axios/commit/d8b4ca0ea5f2f05efa4edfe1e7684593f9f68273">d8b4ca0</a>)</li>
<li><strong>headers:</strong> fixed common Content-Type header merging;
(<a
href="https://redirect.github.com/axios/axios/issues/5832">#5832</a>)
(<a
href="https://github.com/axios/axios/commit/8fda2766b1e6bcb72c3fabc146223083ef13ce17">8fda276</a>)</li>
</ul>
<h3>Features</h3>
<!-- 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>
<h1><a
href="https://github.com/axios/axios/compare/v1.5.1...v1.6.0">1.6.0</a>
(2023-10-26)</h1>
<h3>Bug Fixes</h3>
<ul>
<li><strong>CSRF:</strong> fixed CSRF vulnerability CVE-2023-45857 (<a
href="https://redirect.github.com/axios/axios/issues/6028">#6028</a>)
(<a
href="https://github.com/axios/axios/commit/96ee232bd3ee4de2e657333d4d2191cd389e14d0">96ee232</a>)</li>
<li><strong>dns:</strong> fixed lookup function decorator to work
properly in node v20; (<a
href="https://redirect.github.com/axios/axios/issues/6011">#6011</a>)
(<a
href="https://github.com/axios/axios/commit/5aaff532a6b820bb9ab6a8cd0f77131b47e2adb8">5aaff53</a>)</li>
<li><strong>types:</strong> fix AxiosHeaders types; (<a
href="https://redirect.github.com/axios/axios/issues/5931">#5931</a>)
(<a
href="https://github.com/axios/axios/commit/a1c8ad008b3c13d53e135bbd0862587fb9d3fc09">a1c8ad0</a>)</li>
</ul>
<h3>PRs</h3>
<ul>
<li>CVE 2023 45857 ( <a
href="https://api.github.com/repos/axios/axios/pulls/6028">#6028</a>
)</li>
</ul>
<pre><code>
⚠️ Critical vulnerability fix. See
https://security.snyk.io/vuln/SNYK-JS-AXIOS-6032459
</code></pre>
<h3>Contributors to this release</h3>
<ul>
<li><!-- raw HTML omitted --> <a
href="https://github.com/DigitalBrainJS" title="+449/-114
([software-mansion#6032](axios/axios#6032)
[software-mansion#6021](axios/axios#6021)
[software-mansion#6011](axios/axios#6011)
[software-mansion#5932](axios/axios#5932)
[software-mansion#5931](axios/axios#5931) )">Dmitriy
Mozgovoy</a></li>
<li><!-- raw HTML omitted --> <a
href="https://github.com/valentin-panov" title="+4/-4
([software-mansion#6028](axios/axios#6028) )">Valentin
Panov</a></li>
<li><!-- raw HTML omitted --> <a href="https://github.com/therealrinku"
title="+1/-1 ([software-mansion#5889](axios/axios#5889)
)">Rinku Chaudhari</a></li>
</ul>
<h2><a
href="https://github.com/axios/axios/compare/v1.5.0...v1.5.1">1.5.1</a>
(2023-09-26)</h2>
<h3>Bug Fixes</h3>
<ul>
<li><strong>adapters:</strong> improved adapters loading logic to have
clear error messages; (<a
href="https://redirect.github.com/axios/axios/issues/5919">#5919</a>)
(<a
href="https://github.com/axios/axios/commit/e4107797a7a1376f6209fbecfbbce73d3faa7859">e410779</a>)</li>
<li><strong>formdata:</strong> fixed automatic addition of the
<code>Content-Type</code> header for FormData in non-browser
environments; (<a
href="https://redirect.github.com/axios/axios/issues/5917">#5917</a>)
(<a
href="https://github.com/axios/axios/commit/bc9af51b1886d1b3529617702f2a21a6c0ed5d92">bc9af51</a>)</li>
<li><strong>headers:</strong> allow <code>content-encoding</code> header
to handle case-insensitive values (<a
href="https://redirect.github.com/axios/axios/issues/5890">#5890</a>)
(<a
href="https://redirect.github.com/axios/axios/issues/5892">#5892</a>)
(<a
href="https://github.com/axios/axios/commit/4c89f25196525e90a6e75eda9cb31ae0a2e18acd">4c89f25</a>)</li>
<li><strong>types:</strong> removed duplicated code (<a
href="https://github.com/axios/axios/commit/9e6205630e1c9cf863adf141c0edb9e6d8d4b149">9e62056</a>)</li>
</ul>
<h3>Contributors to this release</h3>
<ul>
<li><!-- raw HTML omitted --> <a
href="https://github.com/DigitalBrainJS" title="+89/-18
([software-mansion#5919](axios/axios#5919)
[software-mansion#5917](axios/axios#5917) )">Dmitriy
Mozgovoy</a></li>
<li><!-- raw HTML omitted --> <a href="https://github.com/DavidJDallas"
title="+11/-5 ()">David Dallas</a></li>
<li><!-- raw HTML omitted --> <a href="https://github.com/fb-sean"
title="+2/-8 ()">Sean Sattler</a></li>
<li><!-- raw HTML omitted --> <a href="https://github.com/0o001"
title="+4/-4 ()">Mustafa Ateş Uzun</a></li>
<li><!-- raw HTML omitted --> <a
href="https://github.com/sfc-gh-pmotacki" title="+2/-1
([software-mansion#5892](axios/axios#5892) )">Przemyslaw
Motacki</a></li>
<li><!-- raw HTML omitted --> <a href="https://github.com/Cadienvan"
title="+1/-1 ()">Michael Di Prisco</a></li>
</ul>
<h3>PRs</h3>
<ul>
<li>CVE 2023 45857 ( <a
href="https://api.github.com/repos/axios/axios/pulls/6028">#6028</a>
)</li>
</ul>
<pre><code>
⚠️ Critical vulnerability fix. See
https://security.snyk.io/vuln/SNYK-JS-AXIOS-6032459
</code></pre>
<h1><a
href="https://github.com/axios/axios/compare/v1.4.0...v1.5.0">1.5.0</a>
(2023-08-26)</h1>
<!-- raw HTML omitted -->
</blockquote>
<p>... (truncated)</p>
</details>
<details>
<summary>Commits</summary>
<ul>
<li><a
href="https://github.com/axios/axios/commit/f7adacdbaa569281253c8cfc623ad3f4dc909c60"><code>f7adacd</code></a>
chore(release): v1.6.0 (<a
href="https://redirect.github.com/axios/axios/issues/6031">#6031</a>)</li>
<li><a
href="https://github.com/axios/axios/commit/9917e67cbb6c157382863bad8c741de58e3f3c2b"><code>9917e67</code></a>
chore(ci): fix release-it arg; (<a
href="https://redirect.github.com/axios/axios/issues/6032">#6032</a>)</li>
<li><a
href="https://github.com/axios/axios/commit/96ee232bd3ee4de2e657333d4d2191cd389e14d0"><code>96ee232</code></a>
fix(CSRF): fixed CSRF vulnerability CVE-2023-45857 (<a
href="https://redirect.github.com/axios/axios/issues/6028">#6028</a>)</li>
<li><a
href="https://github.com/axios/axios/commit/7d45ab2e2ad6e59f5475e39afd4b286b1f393fc0"><code>7d45ab2</code></a>
chore(tests): fixed tests to pass in node v19 and v20 with
<code>keep-alive</code> enabl...</li>
<li><a
href="https://github.com/axios/axios/commit/5aaff532a6b820bb9ab6a8cd0f77131b47e2adb8"><code>5aaff53</code></a>
fix(dns): fixed lookup function decorator to work properly in node v20;
(<a
href="https://redirect.github.com/axios/axios/issues/6011">#6011</a>)</li>
<li><a
href="https://github.com/axios/axios/commit/a48a63ad823fc20e5a6a705f05f09842ca49f48c"><code>a48a63a</code></a>
chore(docs): added AxiosHeaders docs; (<a
href="https://redirect.github.com/axios/axios/issues/5932">#5932</a>)</li>
<li><a
href="https://github.com/axios/axios/commit/a1c8ad008b3c13d53e135bbd0862587fb9d3fc09"><code>a1c8ad0</code></a>
fix(types): fix AxiosHeaders types; (<a
href="https://redirect.github.com/axios/axios/issues/5931">#5931</a>)</li>
<li><a
href="https://github.com/axios/axios/commit/2ac731d60545ba5c4202c25fd2e732ddd8297d82"><code>2ac731d</code></a>
chore(docs): update readme.md (<a
href="https://redirect.github.com/axios/axios/issues/5889">#5889</a>)</li>
<li><a
href="https://github.com/axios/axios/commit/88fb52b5fad7aabab0532e7ad086c5f1b0178905"><code>88fb52b</code></a>
chore(release): v1.5.1 (<a
href="https://redirect.github.com/axios/axios/issues/5920">#5920</a>)</li>
<li><a
href="https://github.com/axios/axios/commit/e4107797a7a1376f6209fbecfbbce73d3faa7859"><code>e410779</code></a>
fix(adapters): improved adapters loading logic to have clear error
messages; ...</li>
<li>Additional commits viewable in <a
href="https://github.com/axios/axios/compare/v1.4.0...v1.6.0">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.4.0&new-version=1.6.0)](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] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
github-merge-queue bot pushed a commit that referenced this issue May 14, 2024
@Latropos @tjzel
Remove CellRendererComponent from Animated.FlatList props (#5951)
22927c8 
## Summary

Closes #5931 

In our implementation of Animated.FlatList we overwrite
`CellRendererComponent` and providing it is not supported. Therefore I
remove it from valid props

## Error message
Error message should contain the information "CellRendererComponent is
not supported in Animated.FlatList"
Code:
<img width="717" alt="image"
src="https://github.com/software-mansion/react-native-reanimated/assets/56199675/0e59d647-26ac-4f2c-8082-333b9b3ecd67">

Error message:
<img width="717" alt="image"
src="https://github.com/software-mansion/react-native-reanimated/assets/56199675/e569fa48-9d90-48f6-a6ae-1bbdea698dc6">

## Test plan

Tests in `__typetests__/common/AnimatedComponentTest.tsx` added

---------

Co-authored-by: Tomasz Żelawski <40713406+tjzel@users.noreply.github.com>
@gunnsteinnskula gunnsteinnskula mentioned this issue Oct 4, 2024
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Platform: Android This issue is specific to Android Platform: iOS This issue is specific to iOS Repro provided A reproduction with a snippet of code, snack or repo is provided
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Remove CellRendererComponent from Animated.FlatList props software-mansion/react-native-reanimated
4 participants
@hirbod @regalstreak @el-banna @Latropos