Utility library for React Native Gesture Handler and Reanimated.

Installation

yarn add react-native-redash

⚠️ v1 Users ⚠️

v1 documentation: https://wcandillon.github.io/react-native-redash-v1-docs/

To access functions that work with Reanimated v1 nodes, use the following import:

import {usePanGestureHandler} from  "react-native-redash/lib/module/v1";

To add TypeScript support for the v1 functions, add the following type to your tsconfig:

  "include": ["node_modules/react-native-redash/lib/typescript/v1/index.d.ts"]

Animations

Animations in Reanimated v2 have powerful composability built-in. The following are functions TypeScript types that will help you to build custom animations.

Arrays

Colors

Coordinates

In order to easily build certain types of animations, it can be extremely useful to switch from one coordinate system to another.

For instance, to convert a x and y coordinate from the React Native canvas to a polar coordinate system centered at x = 100 and y = 100:

Gestures

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.

SVG

Redash provides some utilities functions to deal with SVG paths. parsePath() will normalize the SVG path in a sequence of Bézier curves that can be processed on the UI thread using Reanimated.

Strings

---

<ReText>

This component is like <Text> but accepts a string animation node as property. Behind the scene, <ReText> is using <TextInput> with some default styling. Therefore there might be some slight inconsistencies with <Text>.

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().