withSpring is behaving weirdly

[pranshuchittora]

Description

I am trying to use withSpring to animate the height and width. After completing the animation it's going to some weird values.

Screenshots

The box with the dashed border is the expected size, after completing it's going to some unexpected values.

Steps To Reproduce

It should work as expected. I tried using withTiming and it's working as expected on withSpring is behaving weirdly.

Snack or minimal code example

Snack is not allowing to install Reanimated v2 :(

Package versions

• React:17.0.1
• React Native: 0.63.4
• React Native Reanimated: v2.0.0
• NodeJS: v14 stable

Edit

Here's the hosted preview
https://affectionate-perlman-8d974a.netlify.app/

Repro steps

1. Hit Shuffle
2. Hit Play Animation

You will notice after completing the animation it goes to some arbitrary value.
And here's the code -> https://github.com/funcsio/reanimated-web-setup

Let me know if there's an issue with my implementation

[github-actions]

Issue validator

The issue is invalid!

• Section required but not found: expected behavior(for label 🐞 bug)
• Section required but not found: actual behavior(for label 🐞 bug)

[nandorojo]

I've also noticed issues with withSpring, namely on web. I'll see if I can create a reproduction.

[pranshuchittora]

@nandorojo If you want I can host a demo, I already have a custom setup for the web handy

[mrousavy]

Could you create/share a reproduction of that issue? Minimal GitHub repos are fine if snack doesn't work

[pranshuchittora]

Here's the hosted preview
https://affectionate-perlman-8d974a.netlify.app/

Repro steps

1. Hit Shuffle
2. Hit Play Animation

You will notice after completing the animation it goes to some arbitrary value.
And here's the code -> https://github.com/funcsio/reanimated-web-setup

Let me know if there's an issue with my implementation

[piaskowyk]

@pranshuchittora This is related to react-native-web version. Look at this comment It just a temporary solution, but we will work on this.

[pranshuchittora]

Thanks

[nandorojo]

@piaskowyk thanks! I'm already on RNW 14, so that solution unfortunately won't work for me. Do you have an idea of when this might be resolved?

[piaskowyk]

@nandorojo I debugged this today and I found a reason - this isn't problem with forwardedRef. In my opinion this is a bug in react-native-web. I created an issue and described a problem there. I know how to fix it but I want to discuss with RNW team. Probably I will prepare PR with fix to RNW next week.

[nandorojo]

That looks right, thanks for taking the time. I believe setNativeProps is going to get deprecated in the future. Is there an alternative?

See fixes: https://github.com/necolas/react-native-web/releases?after=0.13.4

[pranshuchittora]

Just found out that setting Overshoot Clamping of withSpring to true, makes the withSpring work as expected on web.
On the other hand, setting it to false (default) makes the animation glitchy on completion.

[nandorojo]

@pranshuchittora Great to know. Do you have a video/example showing the difference, by chance?

[pranshuchittora]

@nandorojo you can replicate the same over here -> https://reanimated.funcs.io/

[nandorojo]

Can we re-open this issue? While overshootClamping: false solves it, this is not a full solution.

Once react-native-web merges necolas/react-native-web#1939, it should be good to close.

[nandorojo]

If anyone is coming here from Moti, I added relevant docs here with this commit.

[piaskowyk]

My PR for react-native-web with the fix of this issue is on the roadmap to release RNW. I suppose It'll be merged within the next release of RNW.

[nandorojo]

I upgraded to RNW 0.15.3, (the patch was in 0.15.2) but my withSpring behavior is the same. Do I need to change anything else? I'm using 2.0.0-rc.0.

[pranshuchittora]

Hi @nandorojo , I just upgraded the deps and it's working perfectly.

   "react-native": "^0.64.0",
    "react-native-reanimated": "^2.1.0",
    "react-native-web": "^0.15.5",

For demo -> https://reanimated.funcs.io/#/reanimated/dimensions