React Native Redash is a utility library for React Native that provides a set of helper functions and hooks to simplify common tasks in React Native development. It focuses on animations, gestures, and other frequently used operations, making it easier for developers to create smooth and interactive mobile applications.

Pros

• Simplifies complex animations and gestures in React Native
• Provides a wide range of utility functions for common tasks
• Integrates well with React Native Reanimated and React Native Gesture Handler
• Regularly updated and maintained

Cons

• Adds an additional dependency to your project
• Some functions may have a learning curve for beginners
• Requires React Native Reanimated and React Native Gesture Handler as peer dependencies
• May introduce unnecessary overhead for simple projects

Code Examples

1. Using the useVector hook for 2D animations:

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

const MyComponent = () => {
  const translation = useVector();

  return (
    <Animated.View
      style={{
        transform: [{ translateX: translation.x }, { translateY: translation.y }],
      }}
    />
  );
};

2. Implementing a circular progress indicator:

import { polar2Canvas } from 'react-native-redash';

const CircularProgress = ({ progress }) => {
  const { x, y } = polar2Canvas(
    { theta: progress * 2 * Math.PI, radius: 50 },
    { x: 50, y: 50 }
  );

  return (
    <Svg width={100} height={100}>
      <Circle cx={50} cy={50} r={45} stroke="gray" strokeWidth={10} />
      <Line x1={50} y1={50} x2={x} y2={y} stroke="blue" strokeWidth={10} strokeLinecap="round" />
    </Svg>
  );
};

3. Using the useScrollHandler hook for scroll animations:

import { useScrollHandler } from 'react-native-redash';

const ScrollComponent = () => {
  const { scrollHandler, x } = useScrollHandler();

  return (
    <Animated.ScrollView
      horizontal
      onScroll={scrollHandler}
      scrollEventThrottle={16}
    >
      {/* Scroll content */}
    </Animated.ScrollView>
  );
};

Getting Started

To start using React Native Redash, first install it along with its peer dependencies:

npm install react-native-redash react-native-reanimated react-native-gesture-handler

Then, import the desired functions or hooks in your React Native components:

import { useVector, polar2Canvas, useScrollHandler } from 'react-native-redash';

// Use the imported functions in your components

Make sure to follow the installation instructions for React Native Reanimated and React Native Gesture Handler as well, as they are required for Redash to work properly.