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 = useVector(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);
const deltaX = useDiff(x);
const deltaY = useDiff(y);

useDebug()

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

Examples:

useDebug({
  translateX,
  translateY
})