Skip to content

cherry-pick: withSpring overshoot clamping coordinates (#7959) #7967

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
Merged
merged 1 commit into from
Aug 1, 2025
Merged

cherry-pick: withSpring overshoot clamping coordinates (#7959) #7967

merged 1 commit into from
Aug 1, 2025

Conversation

tjzel
Copy link
Collaborator

@tjzel tjzel commented Jul 31, 2025

@tjzel
fix(Reanimated): withSpring overshoot clamping coordinates (#7959)
59b9335 
## Summary

Fixes #7947

When fixing various thing in withSpring in #7803 I moved over to a
coherent coordinate system for the animation. This means that when
animating a value from 700 to 600, the animation internally animated
from 100 to 0. For 600 to 700 it's -100 to 0. I accidentally didn't
reflect that change for `overshootClamping` checks.

## Test plan

```tsx
import React, { useEffect, useState } from 'react';
import { Button, StyleSheet, Text, View } from 'react-native';
import Animated, {
  useAnimatedStyle,
  useSharedValue,
  withSpring,
} from 'react-native-reanimated';

export default function EmptyExample() {
  const [toggle, setToggle] = useState(false);
  const height = useSharedValue(600);

  const animatedStyle = useAnimatedStyle(() => {
    return {
      height: withSpring(height.value, {
        overshootClamping: true,
      }),
    };
  });

  return (
    <View style={styles.container}>
      <Animated.View
        style={[{ width: 100, backgroundColor: 'blue' }, animatedStyle]}
      />
      <Button
        title="Change Height"
        onPress={() => {
          const target = toggle ? 600 : 500;
          height.value = target;
          setToggle(!toggle);
        }}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});
```


| Before | After |
|--------|--------|
| <video
src="https://github.com/user-attachments/assets/75ac8595-90dd-44f1-ab04-5c5126941e1e"/>
| <video
src="https://github.com/user-attachments/assets/45c6f4e8-0291-42be-a268-8ee43ee72fb7"/>
|
@tjzel tjzel requested a review from MatiPl01 July 31, 2025 16:35
@tjzel tjzel mentioned this pull request Jul 31, 2025
Closed
15 tasks
@tjzel tjzel merged commit 0a644d5 into 4.0-stable Aug 1, 2025
11 checks passed
@tjzel tjzel deleted the @tjzel/reanimated/cherry-pick-7959 branch August 1, 2025 07:06
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@MatiPl01 MatiPl01 MatiPl01 approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@tjzel @MatiPl01