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[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?

[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