diff --git a/app/src/examples/WithClampExample.tsx b/app/src/examples/WithClampExample.tsx
deleted file mode 100644
index e5735771f49..00000000000
--- a/app/src/examples/WithClampExample.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-import Animated, {
- useSharedValue,
- useAnimatedStyle,
- withSpring,
- withClamp,
-} from 'react-native-reanimated';
-import { View, Text, Button, StyleSheet, ViewStyle } from 'react-native';
-import React, { useState } from 'react';
-
-const VIOLET = '#b58df1';
-const BORDER_WIDTH = 4;
-const FRAME_WIDTH = 300;
-
-function renderFramedExample(testedStyle: ViewStyle, description: string) {
- return (
- <>
- {description}
-
-
-
-
-
- >
- );
-}
-
-export default function AnimatedStyleUpdateExample() {
- const randomWidth = useSharedValue(100);
- const [toggle, setToggle] = useState(false);
-
- const config = {
- duration: 25000,
- dampingRatio: 0.075,
- clamp: [120, 220],
- };
-
- const clampedStyle = useAnimatedStyle(() => {
- return {
- width: withClamp(
- { min: 120, max: 220 },
- withSpring(randomWidth.value, config)
- ),
- };
- });
- const style = useAnimatedStyle(() => {
- return {
- width: withSpring(randomWidth.value, config),
- };
- });
-
- return (
-
- {renderFramedExample(clampedStyle, 'Clamp example')}
-
- {renderFramedExample(style, 'Default')}
-
- );
-}
-
-const styles = StyleSheet.create({
- container: {
- flex: 1,
- flexDirection: 'column',
- padding: 40,
- },
- clampMarker: {
- margin: 0,
- opacity: 0.5,
- height: 40,
- backgroundColor: VIOLET,
- },
- movingBox: {
- height: 100,
- opacity: 0.5,
- backgroundColor: 'black',
- },
- text: {
- fontSize: 16,
- marginVertical: 4,
- },
-});
diff --git a/app/src/examples/index.ts b/app/src/examples/index.ts
index a3a76662018..86ad7e5d20c 100644
--- a/app/src/examples/index.ts
+++ b/app/src/examples/index.ts
@@ -110,7 +110,6 @@ import WobbleExample from './WobbleExample';
import WorkletExample from './WorkletExample';
import WorkletRuntimeExample from './WorkletRuntimeExample';
import NestedLayoutAnimationConfig from './LayoutAnimations/NestedLayoutAnimationConfig';
-import WithClampExample from './WithClampExample';
import WorkletFactoryCrash from './WorkletFactoryCrashExample';
interface Example {
@@ -411,11 +410,6 @@ export const EXAMPLES: Record = {
title: 'Pendulum example',
screen: PendulumExample,
},
- SpringClampExample: {
- icon: '🗜',
- title: 'Spring with Clamp',
- screen: WithClampExample,
- },
ReducedMotionExample: {
icon: '⏸️',
title: 'Reduced Motion',
diff --git a/src/reanimated2/animation/clamp.ts b/src/reanimated2/animation/clamp.ts
deleted file mode 100644
index c8352f683ba..00000000000
--- a/src/reanimated2/animation/clamp.ts
+++ /dev/null
@@ -1,102 +0,0 @@
-'use strict';
-import { defineAnimation, getReduceMotionForAnimation } from './util';
-import type {
- Animation,
- Timestamp,
- AnimatableValue,
- AnimationObject,
- ReduceMotion,
-} from '../commonTypes';
-import type { ClampAnimation } from './commonTypes';
-
-type withClampType = (
- config: { min?: number; max?: number; reduceMotion?: ReduceMotion },
- clampedAnimation: T
-) => T;
-
-// TODO This feature is not documented yet
-export const withClamp = function >(
- config: { min?: number; max?: number; reduceMotion?: ReduceMotion },
- _clampedAnimation: T | (() => T)
-): Animation {
- 'worklet';
- return defineAnimation(
- _clampedAnimation,
- (): ClampAnimation => {
- 'worklet';
- const clampedAnimation =
- typeof _clampedAnimation === 'function'
- ? _clampedAnimation()
- : _clampedAnimation;
-
- function clampOnFrame(
- animation: ClampAnimation,
- now: Timestamp
- ): boolean {
- const finished = clampedAnimation.onFrame(clampedAnimation, now);
-
- if (clampedAnimation.current === undefined) {
- // This should never happen
- // TODO check if nextAnimation.current should be optional
- console.warn(
- "[Reanimated] Error inside 'withClamp' animation, the inner animation has invalid current value"
- );
- return true;
- } else {
- const clampUpper = config.max ? config.max : clampedAnimation.current;
- const clampLower = config.min ? config.min : clampedAnimation.current;
- animation.current = Math.max(
- clampLower,
- Math.min(clampUpper, clampedAnimation.current)
- );
- }
- return finished;
- }
-
- function onStart(
- animation: Animation,
- value: AnimatableValue,
- now: Timestamp,
- previousAnimation: Animation | null
- ): void {
- animation.startTime = now;
- animation.started = false;
- animation.current = value;
- if (previousAnimation === animation) {
- animation.previousAnimation = previousAnimation.previousAnimation;
- } else {
- animation.previousAnimation = previousAnimation;
- }
-
- // child animations inherit the setting, unless they already have it defined
- // they will have it defined only if the user used the `reduceMotion` prop
- if (clampedAnimation.reduceMotion === undefined) {
- clampedAnimation.reduceMotion = animation.reduceMotion;
- }
-
- clampedAnimation.onStart(
- clampedAnimation,
- value,
- now,
- previousAnimation!
- );
- }
-
- const callback = (finished?: boolean): void => {
- if (clampedAnimation.callback) {
- clampedAnimation.callback(finished);
- }
- };
-
- return {
- isHigherOrder: true,
- onFrame: clampOnFrame,
- onStart,
- current: clampedAnimation.current!,
- callback,
- previousAnimation: null,
- reduceMotion: getReduceMotionForAnimation(config.reduceMotion),
- };
- }
- );
-} as withClampType;
diff --git a/src/reanimated2/animation/commonTypes.ts b/src/reanimated2/animation/commonTypes.ts
index 9c66a5ea02f..a4e62ecbb69 100644
--- a/src/reanimated2/animation/commonTypes.ts
+++ b/src/reanimated2/animation/commonTypes.ts
@@ -24,12 +24,6 @@ export interface DelayAnimation
current: AnimatableValue;
}
-export interface ClampAnimation
- extends Animation,
- HigherOrderAnimation {
- current: AnimatableValue;
-}
-
export interface RepeatAnimation
extends Animation,
HigherOrderAnimation {
diff --git a/src/reanimated2/animation/index.ts b/src/reanimated2/animation/index.ts
index a4349190c7f..3379a134c1d 100644
--- a/src/reanimated2/animation/index.ts
+++ b/src/reanimated2/animation/index.ts
@@ -13,7 +13,6 @@ export type { TimingAnimation, WithTimingConfig } from './timing';
export { withSpring } from './spring';
export type { SpringAnimation, WithSpringConfig } from './springUtils';
export { withDecay } from './decay';
-export { withClamp } from './clamp';
export type { DecayAnimation, WithDecayConfig } from './decay';
export { withDelay } from './delay';
export { withRepeat } from './repeat';
diff --git a/src/reanimated2/commonTypes.ts b/src/reanimated2/commonTypes.ts
index 5a5f9990d5d..a5f41e74179 100644
--- a/src/reanimated2/commonTypes.ts
+++ b/src/reanimated2/commonTypes.ts
@@ -94,12 +94,12 @@ export type AnimatableValueObject = { [key: string]: Animatable };
export type AnimatableValue = Animatable | AnimatableValueObject;
-export interface AnimationObject {
+export interface AnimationObject {
[key: string]: any;
callback?: AnimationCallback;
- current?: T;
- toValue?: AnimationObject['current'];
- startValue?: AnimationObject['current'];
+ current?: AnimatableValue;
+ toValue?: AnimationObject['current'];
+ startValue?: AnimationObject['current'];
finished?: boolean;
strippedCurrent?: number;
cancelled?: boolean;
diff --git a/src/reanimated2/index.ts b/src/reanimated2/index.ts
index dcb5e72d833..ff4219a684a 100644
--- a/src/reanimated2/index.ts
+++ b/src/reanimated2/index.ts
@@ -64,7 +64,6 @@ export {
withSpring,
withDecay,
withDelay,
- withClamp,
withRepeat,
withSequence,
} from './animation';