React Native Redash
AnimationsArraysColorsCoordinatesGesturesHooksuseValue()useValues()useClock()useClocks()useVector()useGestureHandler()usePanGestureHandler()usePinchGestureHandler()useTapGestureHandler()useDiff()useDebug()MathReadmeRun AnimationsSVGStringsTransformationsTransitionsVectors

Hooks


The hooks provided by redash are here so you can create animation values, clocks, and event nodes that will keep their identity across component re-renders.

useValue()

const useValue: <V extends string | number | boolean>(value: V) => Animated.Value<V>;

Creates an animation value which identity is preserved during the whole component lifecycle.

const toggle = useValue(0);

useValues()

const useValues: <V extends string | number | boolean>(values: V[]) => Animated.Value<V>[];

Creates an animation values which identity is preserved during the whole component lifecycle.

const [toggle, state] = useValues([0, State.UNDETERMINED]);

useClock()

const useClock: () => Animated.Clock;

Creates a clock which identity is preserved during the whole component lifecycle.

const clock = useClock();

useClocks()

const useClocks: (numberOfClocks: number) => Animated.Clock[];

Creates clocks which identity is preserved during the whole component lifecycle.

const [clock1, clock2, clock3] = useClocks(3);

useVector()

const useVector: (x: number, y: number) => Vector<Animated.Value>;

Creates a vector which identity is preserved by deps.

const vector = useValue(width, height);

useGestureHandler()

const useGestureHandler = (
nativeEvent: Parameters<typeof onGestureEvent>[0])

Example:

const state = useValue(State.UNDETERMINED);
const gestureHandler = useGestureHandler({ state });
return (
<TapGestureHandler {...gestureHandler}>
//...
</TapGestureHandler>
)

usePanGestureHandler()

const usePanGestureHandler = () => {
position: Vector<Animated.Value<number>>,
translation: Vector<Animated.Value<number>>,
velocity: Vector<Animated.Value<number>>,
state: Animated.Value<State>,
gestureHandler: Animated.Node<number>
};

Example:

const {gestureHandler, state, translation} = usePanGestureHandler();
return (
<PanGestureHandler {...gestureHandler}>
<Animated.View style={{ flex: 1, backgroundColor: "cyan", transform: [{ translateX: translation.x }] }} />
</PanGestureHandler>
)

usePinchGestureHandler()

const {gestureHandler, state, scale, focal} = usePanGestureHandler();
return (
<PinchGestureHandler {...gestureHandler}>
<Image style={{ transform: [{ scale }] }} {...{source}} />
</PinchGestureHandler>
);

useTapGestureHandler()

const {gestureHandler, position, absolutePosition} = useTapGestureHandler();
return (
<TapGestureHandler {...gestureHandler}>
<Text>Tap me!</Text>
</TapGestureHandler>
);

useDiff()

const useDiff: (node: Animated.Node<number>) => Animated.Value<number>;

Returns a difference between the node value from the last frame and the current one. useDiff works for every frame whereas diff works on every evaluation.

Examples:

const [state, x, y] = useValues([State.UNDETERMINED, 0, 0, 0, 0]);
const deltaX = useDiff(x);
const deltaY = useDiff(y);

useDebug()

const useDebug: (values: { [key: string]: Animated.Node<number> });

Examples:

useDebug({
translateX,
translateY
})