React Native Redash

18.1.5 · active · verified Sun Apr 19

Redash is a utility library specifically designed to augment React Native Reanimated and React Native Gesture Handler, providing a collection of powerful helper functions and components for building complex, performant animations and interactions in React Native applications. It serves as a comprehensive toolbelt, simplifying common animation patterns that are frequently showcased in the popular 'Can it be done in React Native?' YouTube series. The current stable version is 18.1.5, with a consistent release cadence focusing on bug fixes and compatibility updates for new Reanimated versions. It maintains strong ties to the Reanimated ecosystem, abstracting away complex mathematical operations and animation logic into more accessible APIs, differentiating itself by its curated set of practical utilities for advanced animation scenarios.

Common errors

```
Error: Reanimated 1 is no longer supported.
```
cause Attempting to use `react-native-redash` v17 or higher with `react-native-reanimated` v1.

fix Upgrade `react-native-reanimated` to version 2.0.0 or higher, or downgrade `react-native-redash` to `v14.2.2` if `react-native-reanimated` v1 is a strict requirement.
```
TypeError: undefined is not a function (evaluating 'mix(...)')
```
cause The `mix` function (or other Redash utilities) was not correctly imported or `react-native-redash` is not properly linked/installed.

fix Verify that `import { mix } from 'react-native-redash';` is correct. Ensure `react-native-redash` is installed and that your native module linking (if applicable) is complete. Clean your build cache and rebuild the app.
```
Invariant Violation: `new NativeEventEmitter()` was called with a non-null argument without the corresponding native module being installed.
```
cause This error typically indicates that the native modules for `react-native-gesture-handler` or `react-native-reanimated` are not correctly linked or initialized, especially after a fresh install or adding new packages.

fix Run `npx pod-install` in your `ios/` directory (for iOS), clear the Metro bundler cache (`npm start -- --reset-cache` or `yarn start --reset-cache`), and then rebuild your application (`npx react-native run-ios` or `npx react-native run-android`).
```
Tried to synchronously call an asynchronously-available module. You need to ensure the module is importing 'react-native-reanimated' first.
```
cause This is a common setup issue with `react-native-reanimated`, indicating that its Babel plugin might not be correctly configured or the cache is stale.

fix Ensure that `plugins: ['react-native-reanimated/plugin']` is present and correctly ordered as the last plugin in your `babel.config.js` file. Then, clear your Metro bundler cache and rebuild the application.

Warnings

breaking Redash v17.0.0 introduced a breaking change, dropping support for React Native Reanimated v1. Applications using Reanimated v1 must remain on Redash v14.2.2 or upgrade their Reanimated dependency.
Fix: Upgrade `react-native-reanimated` to version 2.0.0 or higher. If Reanimated v1 is strictly required, downgrade `react-native-redash` to `v14.2.2`.
breaking Redash v18.0.0 changed the internal format of its matrix math utilities. Any code directly manipulating or relying on the previous matrix representation will break.
Fix: Review and update any code that uses Redash's matrix math functions or relies on their internal structure. Consult the v18.0.0 release notes for details on the new format.
gotcha Redash relies heavily on its peer dependencies `react-native-reanimated` and `react-native-gesture-handler`. Version incompatibilities between these libraries can lead to runtime errors or unexpected behavior.
Fix: Always ensure your `react-native-redash`, `react-native-reanimated`, and `react-native-gesture-handler` versions are compatible. Refer to the Redash documentation (e.g., v18.1.4 added Reanimated 3 support) and the respective libraries' changelogs for recommended pairings.
gotcha Native modules for `react-native-reanimated` and `react-native-gesture-handler` must be correctly linked and configured. Simply installing the npm package is often not enough.
Fix: After installing, ensure proper native setup: run `npx pod-install` in your `ios/` directory for iOS, and verify `babel.config.js` includes `react-native-reanimated/plugin` for both platforms. Clear Metro cache and rebuild your application.

Install

npm install react-native-redash npm
yarn add react-native-redash yarn
pnpm add react-native-redash pnpm

Imports

mix
wrong:
```
import mix from 'react-native-redash';
```
correct:
```
import { mix } from 'react-native-redash';
```
A fundamental utility function for interpolating between two values based on a progress value, commonly used in animations.
useVector
wrong:
```
const useVector = require('react-native-redash').useVector;
```
correct:
```
import { useVector } from 'react-native-redash';
```
A hook for creating and managing an animated 2D vector (x, y) using Reanimated's shared values. Primarily used with TypeScript and ESM.
ReText
wrong:
```
import ReText from 'react-native-redash/ReText';
```
correct:
```
import { ReText } from 'react-native-redash';
```
A component that displays animated text, optimized for performance with Reanimated. It accepts arbitrary React Native Text props since v18.1.0.

Quickstart

Demonstrates a draggable animated square using Redash's `mix` and `useVector` helpers in conjunction with React Native Reanimated and Gesture Handler for interactive scaling, rounding, and movement.

import React from 'react';
import { StyleSheet, View } from 'react-native';
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withSpring,
} from 'react-native-reanimated';
import { mix, useVector } from 'react-native-redash';
import { GestureHandlerRootView, Gesture } from 'react-native-gesture-handler';

export default function App() {
  const isPressed = useSharedValue(false);
  const offset = useVector(0, 0); // Redash helper for 2D vectors

  const animatedStyles = useAnimatedStyle(() => {
    const scale = mix(isPressed.value, 1, 1.2); // Redash mix helper
    const borderRadius = mix(isPressed.value, 0, 15);
    return {
      transform: [
        { translateX: offset.x.value },
        { translateY: offset.y.value },
        { scale },
      ],
      borderRadius,
      backgroundColor: isPressed.value ? 'dodgerblue' : 'hotpink',
    };
  });

  const panGesture = Gesture.Pan()
    .onBegin(() => {
      isPressed.value = true;
    })
    .onChange((event) => {
      offset.x.value = event.translationX;
      offset.y.value = event.translationY;
    })
    .onEnd(() => {
      isPressed.value = false;
      offset.x.value = withSpring(0); // Animate back to origin
      offset.y.value = withSpring(0); // Animate back to origin
    });

  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <View style={styles.container}>
        <GestureDetector gesture={panGesture}>
          <Animated.View style={[styles.box, animatedStyles]} />
        </GestureDetector>
      </View>
    </GestureHandlerRootView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  box: {
    width: 100,
    height: 100,
  },
});

view raw JSON →