useAnimatedProps not updating on web

[oxbits]

Description

when i go to here :

https://docs.swmansion.com/react-native-reanimated/examples/slider

the TextInput updates as you slide the slider

when i run the snack web client the TextInput does not update

[same issue when i run the code locally in my workspace on the web]

Steps to reproduce

go to this snack and run on web, the TextInput does not update :

https://snack.expo.io/?platform=android&name=Slider%20%7C%20React%20Native%20Reanimated&dependencies=react-native-reanimated%40*%2Creact-native-gesture-handler%40*%2C%40shopify%2Fflash-list%40*&hideQueryParams=true&sourceUrl=https%3A%2F%2Fdocs.swmansion.com%2Freact-native-reanimated%2Fexamples%2FSlider.js

(better snack version:)

https://snack.expo.dev/@oxbits/slider-%7C-react-native-reanimated

Snack or a link to a repository

https://snack.expo.io/?platform=android&name=Slider%20%7C%20React%20Native%20Reanimated&dependencies=react-native-reanimated%40*%2Creact-native-gesture-handler%40*%2C%40shopify%2Fflash-list%40*&hideQueryParams=true&sourceUrl=https%3A%2F%2Fdocs.swmansion.com%2Freact-native-reanimated%2Fexamples%2FSlider.js

(better snack version:)

https://snack.expo.dev/@oxbits/slider-%7C-react-native-reanimated

Reanimated version

3.10.1 or 3.12.1 [i tried both and others too]

React Native version

0.74

Platforms

Web

JavaScript runtime

None

Workflow

None

Architecture

None

Build type

None

Device

None

Device model

No response

Acknowledgements

Yes

all of this makes me wonder why it works on the documentation web page but not in the snack or on my local box ?

[github-actions]

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?

[oxbits]

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?

@gihub-actions

i have provided the link to the snack above

here it is again :

https://snack.expo.io/?platform=android&name=Slider%20%7C%20React%20Native%20Reanimated&dependencies=react-native-reanimated%40*%2Creact-native-gesture-handler%40*%2C%40shopify%2Fflash-list%40*&hideQueryParams=true&sourceUrl=https%3A%2F%2Fdocs.swmansion.com%2Freact-native-reanimated%2Fexamples%2FSlider.js

better version:

https://snack.expo.dev/@oxbits/slider-%7C-react-native-reanimated

[andreshsingh]

+1, we're facing the same issue

[oxbits]

Here is a better version of the snack that reproduces the issue:

https://snack.expo.dev/@oxbits/slider-%7C-react-native-reanimated

[idrisssakhi]

@oxbits just add placeholder: Box width: ${Math.round(boxWidth.value)}, to your useAnimated Props. since react-native-web 0.19 reanimated do not transform props for web, you need to precise the name of the correct prop on web

[idrisssakhi]

@andreshsingh check my answer

[nemgreene]

Ive added the placeholder to the animated props and still not able to recreate the demo's behavior, still not working on web. See the snack here

[oxbits]

Hello @idrisssakhi and @nemgreene and @andreshsingh

idrisssakhi's suggestion is not working: look at nemgreene's snack

the thing i do not understand: this example is working on Software Mansion's website in at least two locations:

https://docs.swmansion.com/react-native-reanimated/examples/slider/
and
https://docs.swmansion.com/react-native-reanimated/examples/

so what is the difference between these working examples and the example code provided we are using in the snack ?!?!

like you would think the code being used by the website would be the same or not ?

[patrycjakalinska]

hi @oxbits, it is working in examples in documentation because our documentation uses react-native-web <= 18, and updating props happened using legacy setNativeProps function. On newer react-native-web it caused a problem, as setNativeProps wasn't available, and setAttribute haven't produces expected output.
I've prepared a PR (and also kudos to @5ZYSZ3K) that explicitly resolve issues with animatedProps on input component, by explicitly setting props.