{"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.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-native-redash"],"cli":null},"imports":["import { mix } from 'react-native-redash';","import { useVector } from 'react-native-redash';","import { ReText } from 'react-native-redash';"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}