redash

Utility library for React Native 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)[https://github.com/kmagiera/react-native-reanimated/blob/master/Example/Interactable.js]. Documentation of this component is available (here)[https://github.com/wix/react-native-interactable].

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)

lookup(nodes, index, notFound)

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

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

interpolateColors(node, inputRange, colors)

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

interpolateColors(value: Node, inputRange: number[], colors: Colors)

Example Usage:

interpolateColors(
  x,
  [0, 1],
  ["#C52B27", "#E1B044"]
)

getSnapPoint(point, velocity, points)

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

const snapPoints = [-width, 0, width];
runSpring(clock, x, getSnapPoint(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
/>