React Native Redash
AnimationsArraysColorsCoordinatesGesturesHooksMathReadmeRun AnimationsSVGStringsTransformationsTransitionsAttach a transition to a stateAttach a transition to an animation valueuseTimingTransition()useSpringTransition()withTimingTransition()withSpringTransition()Vectors

Transitions

Transitions are essential to the user experience. Redash offers four utility functions for transitions which are broke down in the table below. If you want to build a transition based on a React state change use useTimingTransition() or useSpringTransition(). To transition an animation value change, use withTimingTransition() or withSpringTransition().

State (JS Thread)Value (UI Thread)
TiminguseTimingTransition()withTimingTransition()
SpringuseSpringTransition()withSpringTransition()

Attach a transition to a state

import {useTimingTransition} from "react-native-redash";
const Toggle = () => {
  const [open, setOpen] = useState(false);
  const transition = useTimingTransition(open, { duration: 400 });
}

Attach a transition to an animation value

import {withTimingTransition} from "react-native-redash";
const Toggle = () => {
  const open = new Value<number>(0);
  const transition = withTimingTransition(open, { duration: 400 });
}

useTimingTransition()

const useTimingTransition: (state: number | boolean, config?: Partial<Pick<Animated.TimingConfig, "duration" | "easing">>) => Animated.Node<number>;

useSpringTransition()

const useSpringTransition: (state: number | boolean, config?: Partial<Pick<Animated.SpringConfig, "damping" | "mass" | "stiffness" | "overshootClamping" | "restSpeedThreshold" | "restDisplacementThreshold">>) => Animated.Node<number>;

withTimingTransition()

const withTimingTransition: (value: Animated.Node<number>, timingConfig?: Partial<Pick<Animated.TimingConfig, "duration" | "easing">>, gestureState?: Animated.Value<State>) => Animated.Node<number>;

withSpringTransition()

const withSpringTransition: (value: Animated.Node<number>, springConfig?: Partial<Pick<Animated.SpringConfig, "damping" | "mass" | "stiffness" | "overshootClamping" | "restSpeedThreshold" | "restDisplacementThreshold">>, velocity?: Animated.Adaptable<number>, gestureState?: Animated.Value<State>) => Animated.Node<number>;