ReanimatedSwipeable generating warnings

[jbrodriguez]

Description

trying the example for ReanimatedSwipeable generates warnings on the logs

in my case, i just used RightAction, however those SharedValues seem to be causing the warnings

Steps to reproduce

run the example from the repo

Snack or a link to a repository

https://github.com/software-mansion/react-native-gesture-handler/blob/main/example/src/release_tests/swipeableReanimation/index.tsx

Gesture Handler version

2.22.0

React Native version

0.76.0-rc.6

Platforms

iOS

JavaScript runtime

Hermes

Workflow

None

Architecture

Fabric (New Architecture)

Build type

Debug mode

Device

iOS simulator

Device model

No response

Acknowledgements

Yes

[jbrodriguez]

for the time being, im just setting strict to false 🤷‍♂️

[latekvo]

Hi @jbrodriguez, thank you for reporting this issue.

Would it be possible for you to share a branch or a repository on which you reproduced this issue?

I could not find this issue occurring on:

• rn 0.74.1 + rngh 2.20.0 + rea 3.10.0 + oldArch.
• rn 0.74.1 + rngh 2.20.0 + rea 3.16.0 + oldArch.
• rn 0.74.1 + rngh 2.20.0 + rea 3.16.0 + newArch.

Unfortunately I couldn't test on rn 0.76.0-rc.6, there are multiple breaking changes when upgrading from rn 0.74.1 to rn 0.76.0-rc.6, both on android and iOS.

Tested everything in StrictMode.

I also couldn't manually find any instance of .value anywhere in the render body of either the ReanimatedSwipeable component, or the example you linked.

Are you certain this is an issue with our example or component?

[jbrodriguez]

sure, ill provide a repo later today

[BrightFoxApps]

I have this same issue (same warnings) with ReanimatedSwipeable. I have created a minimal repro of this issue that has the component with no props and still gives the warning. The warning happens with version 3.16.1 of rnr but not 3.15.4, and happens irrespective of versions of rngh and rn. So it seems it's the new version of react-native-reanimated causing the warning to happen, but due to something in ReanimatedSwipeable?

This is a newly initiated project with rngh and rnr installed according to instructions. Clicking the counter causes the screen to re-render and causes the warning to happen. https://github.com/BrightFoxApps/SwipeableTest

rn 0.75.4 + rngh 2.20.0 + rnr 3.15.4 + old arch = no warnings rn 0.76.1 + rngh 2.20.2 + rnr 3.15.4 + new arch = no warnings rn 0.75.4 + rngh 2.20.0 + rnr 3.16.1 + old arch = warnings rn 0.76.1 + rngh 2.20.2 + rnr 3.16.1 + new arch = warnings

(NOBRIDGE) WARN  [Reanimated] Reading from `value` during component render. Please ensure that you do not access the `value` property or use `get` method of a shared value while React is rendering a component.

If you don't want to see this message, you can disable the `strict` mode. Refer to:
https://docs.swmansion.com/react-native-reanimated/docs/debugging/logger-configuration for more details.

edit: Some more testing: The warnings happen with ReanimatedSwipeable from react-native-gesture-handler/ReanimatedSwipeable, but not with Swipeable from react-native-gesture-handler, which makes sense given the warnings come from react-native-reanimated

[danieltott]

@latekvo The version of src/components/ReanimatedSwipeable.tsx in main is reading from leftWidth.value and rightWidth.value in the useCallback dependency array:

https://github.com/software-mansion/react-native-gesture-handler/blob/da9eed867ff09633c506fc9ad08634eaf707cbdb/src/components/ReanimatedSwipeable.tsx#L431-L441

[github-actions[bot]]

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

[danieltott]

(The version that is in npm on 2.20.2 has this code at line 415)

[latekvo]

Hey @danieltott, thank you for pointing that out.

I'm aware of the issue and what causes it and I'm currently working on it. Removed majority of the offending .value dependencies in this unfinished PR. I'll come back to this issue shortly.

Also, thank you a lot @BrightFoxApps for finding the exact versions on which the issue occurs and providing a repro, it'll really help with testing.

[duanykruger]

I encountered the same issue using Reanimated Swipeable, even with the example provided in the documentation.

Here are the dependencies I'm using:

"@shopify/flash-list": "^1.7.1",
"react": "18.3.1",
"react-native": "0.76.1",
"react-native-gesture-handler": "^2.20.2",
"react-native-reanimated": "^3.16.1"

The problem occurred with the GitHub example; I only added an input field to save the item. Starting from the second item, these warnings flood the screen with each new item added.

[latekvo]

I believe this PR should've fixed all of these warnings, please let me know if you're still encountering them. Feel free to close this issue if the problem is resolved.

[usmansbk]

@latekvo has the PR been published? Otherwise, I am still seeing the warnings.

[shuo-hiwintech]

+1

[latekvo]

has the PR been published? Otherwise, I am still seeing the warnings.

The fix isn't published yet, it'll be included in the upcoming release.

[duanykruger]

Thanks a lot for the fix, @latekvo! Do you have any estimate on when the next version might be released?

[latekvo]

Hey, the fix is now live in version 2.21.0, sorry for the wait

[usmansbk]

I am still seeing this warning in expo 52 (bridgeless mode).

[latekvo]

Tested on the swipeable example, incl. all the programatic controls, the swipe gestures and the tap gestures with the following packages:

"expo": "~52.0.6",
"react-native": "0.76.1",
"react-native-gesture-handler": "2.21.0",
"react-native-reanimated": "^3.16.1",

with fabric & bridgeless mode enabled. With this setup I'm not encountering this issue anymore.

@usmansbk, are you certain you're using the latest rngh and reanimated versions?

[usmansbk]

@latekvo warnings disappeared after deleting node_modules. My bad! Thanks.

[duanykruger]

Hey, the fix is now live in version 2.21.0, sorry for the wait

Awesome job! Worked flawlessly here!