Registry / ai-ml / react-native-redash

react-native-redash

library18.1.5jsnpmunverified

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.

ai-ml llm-agents

npm install react-native-redash

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-NATIVE-REDAS

react-native-redash

ai-mljavascriptv18.1.5

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

mix

✓ import { mix } from 'react-native-redash';

✗ 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

✓ import { useVector } from 'react-native-redash';

✗ const useVector = require('react-native-redash').useVector;

A hook for creating and managing an animated 2D vector (x, y) using Reanimated's shared values. Primarily used with TypeScript and ESM.

ReText

✓ import { ReText } from 'react-native-redash';

✗ import ReText from 'react-native-redash/ReText';

A component that displays animated text, optimized for performance with Reanimated. It accepts arbitrary React Native Text props since v18.1.0.

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

Debug

Known issues

breakingRedash 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`.

affects: >=17.0.0

breakingRedash 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.

affects: >=18.0.0

gotchaRedash 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.

affects: >=16.0.0

gotchaNative 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.

affects: >=1.0.0

Errors

Common errors & fixes

Error: Reanimated 1 is no longer supported.

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

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.

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.

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.

Upgrade

Version history

18.1.5latest on npm

Audit

Dependencies

reactrequiredCore React library for component definition and lifecycle.

react-nativerequiredCore React Native framework for mobile UI.

react-native-gesture-handlerrequiredRequired for gesture recognition and handling, which Redash utilities often interact with.

react-native-reanimatedrequiredThe primary animation library Redash extends and provides utilities for.

Agent activity

23 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/wcandillon/react-native-redash ↗

packagehttps://www.npmjs.com/package/react-native-redash ↗