withClamp

withClamp is an animation modifier that lets you limit the scope of movement of your animation to make it stay within some predefined range. Use it with withSpring animation.

Loading...

Reference

import { withClamp } from 'react-native-reanimated';

function App() {
  sv.value = withClamp({ min: -1, max: 1 }, withSpring(0));
  // ...
}

Type definitions

type AnimatableValue = number | string | number[];

function withClamp<T extends number | string>(
  config: {
    min?: T;
    max?: T;
  },
  clampedAnimation: T
): T;

enum ReduceMotion {
  System = 'system',
  Always = 'always',
  Never = 'never',
}

Arguments

config

An object with following properties:

| Name | Type Description | | ---------------- | ---------------- | ------------------------------------------------ | | min

Optional

| number | The lowest value your animation can ever reach | | max

Optional

| number | The greatest value your animation can ever reach |

animation

The spring animation you want to clamp.

const clampedStyleWithDelay = useAnimatedStyle(() => {
  return {
    width: withClamp({ min: 0, max: 100 }, withSpring(randomWidth.value)),
  };
});

Returns

withClamp returns an animation object. It can be either assigned directly to a shared value or can be used as a value for a style object returned from useAnimatedStyle.

Android	iOS	Web
✅	✅	✅