{"id":11795,"library":"react-native-redash","title":"React Native Redash","description":"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.","status":"active","version":"18.1.5","language":"javascript","source_language":"en","source_url":"https://github.com/wcandillon/react-native-redash","tags":["javascript","typescript"],"install":[{"cmd":"npm install react-native-redash","lang":"bash","label":"npm"},{"cmd":"yarn add react-native-redash","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-native-redash","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core React library for component definition and lifecycle.","package":"react","optional":false},{"reason":"Core React Native framework for mobile UI.","package":"react-native","optional":false},{"reason":"Required for gesture recognition and handling, which Redash utilities often interact with.","package":"react-native-gesture-handler","optional":false},{"reason":"The primary animation library Redash extends and provides utilities for.","package":"react-native-reanimated","optional":false}],"imports":[{"note":"A fundamental utility function for interpolating between two values based on a progress value, commonly used in animations.","wrong":"import mix from 'react-native-redash';","symbol":"mix","correct":"import { mix } from 'react-native-redash';"},{"note":"A hook for creating and managing an animated 2D vector (x, y) using Reanimated's shared values. Primarily used with TypeScript and ESM.","wrong":"const useVector = require('react-native-redash').useVector;","symbol":"useVector","correct":"import { useVector } from 'react-native-redash';"},{"note":"A component that displays animated text, optimized for performance with Reanimated. It accepts arbitrary React Native Text props since v18.1.0.","wrong":"import ReText from 'react-native-redash/ReText';","symbol":"ReText","correct":"import { ReText } from 'react-native-redash';"}],"quickstart":{"code":"import React from 'react';\nimport { StyleSheet, View } from 'react-native';\nimport Animated, {\n  useSharedValue,\n  useAnimatedStyle,\n  withSpring,\n} from 'react-native-reanimated';\nimport { mix, useVector } from 'react-native-redash';\nimport { GestureHandlerRootView, Gesture } from 'react-native-gesture-handler';\n\nexport default function App() {\n  const isPressed = useSharedValue(false);\n  const offset = useVector(0, 0); // Redash helper for 2D vectors\n\n  const animatedStyles = useAnimatedStyle(() => {\n    const scale = mix(isPressed.value, 1, 1.2); // Redash mix helper\n    const borderRadius = mix(isPressed.value, 0, 15);\n    return {\n      transform: [\n        { translateX: offset.x.value },\n        { translateY: offset.y.value },\n        { scale },\n      ],\n      borderRadius,\n      backgroundColor: isPressed.value ? 'dodgerblue' : 'hotpink',\n    };\n  });\n\n  const panGesture = Gesture.Pan()\n    .onBegin(() => {\n      isPressed.value = true;\n    })\n    .onChange((event) => {\n      offset.x.value = event.translationX;\n      offset.y.value = event.translationY;\n    })\n    .onEnd(() => {\n      isPressed.value = false;\n      offset.x.value = withSpring(0); // Animate back to origin\n      offset.y.value = withSpring(0); // Animate back to origin\n    });\n\n  return (\n    <GestureHandlerRootView style={{ flex: 1 }}>\n      <View style={styles.container}>\n        <GestureDetector gesture={panGesture}>\n          <Animated.View style={[styles.box, animatedStyles]} />\n        </GestureDetector>\n      </View>\n    </GestureHandlerRootView>\n  );\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    justifyContent: 'center',\n    alignItems: 'center',\n    backgroundColor: '#F5FCFF',\n  },\n  box: {\n    width: 100,\n    height: 100,\n  },\n});\n","lang":"typescript","description":"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."},"warnings":[{"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`.","message":"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.","severity":"breaking","affected_versions":">=17.0.0"},{"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.","message":"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.","severity":"breaking","affected_versions":">=18.0.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=16.0.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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.","cause":"Attempting to use `react-native-redash` v17 or higher with `react-native-reanimated` v1.","error":"Error: Reanimated 1 is no longer supported."},{"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.","cause":"The `mix` function (or other Redash utilities) was not correctly imported or `react-native-redash` is not properly linked/installed.","error":"TypeError: undefined is not a function (evaluating 'mix(...)')"},{"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`).","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.","error":"Invariant Violation: `new NativeEventEmitter()` was called with a non-null argument without the corresponding native module being installed."},{"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.","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.","error":"Tried to synchronously call an asynchronously-available module. You need to ensure the module is importing 'react-native-reanimated' first."}],"ecosystem":"npm"}