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


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)

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 });


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


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


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


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>;