Skip to content

Latest commit

 

History

History
337 lines (235 loc) · 6.97 KB

README.md

File metadata and controls

337 lines (235 loc) · 6.97 KB

redash

CircleCI npm version

Utility library for React Native Gesture Handler and Reanimated.

Usage

yarn add react-native-redash
import { atan2 } from "react-native-redash";

atan2(y, x);

Components

<Interactable>

Implementation of Interactable from react-native-interactable with react-native-gesture-handler and react-native-reanimated. The original implementation has been built by the reanimated team. Documentation of this component is available here.

Example usage:

<Interactable
  snapPoints={[{ x: -width }, { x: 0 }, { x: width }]}
  style={{ ...StyleSheet.absoluteFillObject, backgroundColor: "blue" }}
  onSnap={() => alert("oh snap!")}
/>

<ReText>

Component that display an animation value as text.

Example usage:

<ReText text={new Value("hello world!")} style={{ color: "blue" }} />

Math

toRad(node)

Transforms an angle in degrees in radians.

(deg: Node) => Node;

toDeg(node)

Transforms an angle in radians in degrees.

toDeg(rad: Node) => Node

min(...nodes)

Takes one or more nodes as an input and returns a minimum of all the node's values. This is equivalent to Animated.min but with support for more than two parameters.

min(...args: Node[]) => Node

max(...nodes)

Takes one or more nodes as an input and returns a maximum of all the node's values. This is equivalent to Animated.min but with support for more than two parameters.

max(...args: Node[]) => Node

atan(node)

Returns a arc-tangent of the value in radians of the given node. We provide this function in case you are using a version of reanimated that doesn't ship atan. Beware that this function is not as precise at Math.atan() nor Animated.atan().

atan(rad: Node) => Node

atan2(node)

Returns the angle in the plane (in radians) between the positive x-axis and the ray from (0,0) to the point (x,y), atan2(y,x). Beware that this function is not as precise at Math.atan2().

atan2(y: Node, x Node) => Node

Animations

runTiming(clock, value, config)

Convenience function to run a timing animation.

runTiming(clock: Clock, value: Node, config: TimingConfig): Node

Example usage:

const config = {
  duration: 10 * 1000,
  toValue: 1,
  easing: Easing.linear,
};
runTiming(clock, 0, config);

runDecay(clock, value, velocity, rerunDecaying)

Convenience function to run a decay animation.

runDecay(clock: Clock, value: Node, velocity: Node, rerunDecaying: Node): Node

Example usage: Look

find(nodes, index, notFound)

Returns the node from the list of nodes at the specified index. If not, it returns the notFound node.

find(values: Node[], index: Node, notFound: Node) => Node

contains(nodes, index, notFound)

Returns 1 if the node value is contained in the array of nodes, 0 otherwise.

contains(values: Node[], value: Node) => Node

binaryInterpolation(node, from, to)

Interpolate the node from 0 to 1 without clamping.

interpolateColors(node, inputRange, colors, [colorSpace = "hsv"])

Interpolate colors based on an animation value and its value range.

interpolateColors(value: Node, inputRange: number[], colors: Colors, colorSpace?: "hsv" | "rgb")

Example Usage:

const from = {
  r: 197,
  g: 43,
  b: 39,
};
const to = {
  r: 225,
  g: 176,
  b: 68,
};

// Interpolate in default color space (HSV)
interpolateColors(x, [0, 1], [from, to]);

// Interpolate in RGB color space
interpolateColors(x, [0, 1], [from, to], "rgb");

Interpolating between red and blue, with in-between colors shown. Image source: this tool.

snapPoint(point, velocity, points)

Select a point based on a node value and its velocity. Example usage:

const snapPoints = [-width, 0, width];
runSpring(clock, x, snapPoint(x, velocityX, snapPoints));

Transformations

translateZ

Convert a translateZ transformation into a scale transformation.

translateZ(perspective: Node, z: Node)

Example usage with transform.

const perspective = 800;
const z = new Value(100);
//...
transform: [{ perspective }, translateZ(perspective, z)];

Gestures

onScroll({ x: node, y: node })

Returns a reanimated event handler for the ScrollView.

onScroll(contentOffset: { x?: Node; y?: Node; }) => EventNode

Example usage for a vertical ScrollView.

<Animated.ScrollView onScroll={onScroll({ y: new Value(0) })} vertical />

And for an horizontal one.

<Animated.ScrollView onScroll={onScroll({ x: new Value(0) })} horizontal />

decay

Decorates animated value to decay after pan

constructor(props) {
  const dragX = new Value(0);
  const panState = new Value(0);
  const velocityX = new Value(0);

  this.handlePan = event([
    {
      nativeEvent: {
        translationX: dragX,
        state: panState,
        velocityX,
      },
    },
  ]);

  this.X = decay(dragX, panState, velocityX);
}

preserveOffset

Decorates animated value to save previous offset of pan

constructor(props) {
  const dragX = new Value(0);
  const panState = new Value(0);

  this.handlePan = event([
    {
      nativeEvent: {
        translationX: dragX,
        state: panState,
      },
    },
  ]);

  this.X = preserveOffset(dragX, panState);
}

preserveMultiplicativeOffset

Decorates animated value to save previous offset of pinch

constructor(props) {
  const scale = new Value(1);
  const scaleState = new Value(0);

  this.handleZoom = event([
    {
      nativeEvent: {
        scale,
        state: panState,
      },
    },
  ]);

  this.X = preserveMultiplicativeOffset(scale, scaleState);
}

limit

Decorates animated value to set limits of panning

constructor(props) {
  const dragX = new Value(0);
  const panState = new Value(0);

  this.handlePan = event([
    {
      nativeEvent: {
        translationX: dragX,
        state: panState,
      },
    },
  ]);

  this.X = limit(dragX, panState, -100, 100);
}