Utility library for React Native Gesture Handler and Reanimated.
yarn add react-native-redash
import { atan2 } from "react-native-redash";
atan2(y, x);
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!")}
/>
Component that display an animation value as text.
Example usage:
<ReText text={new Value("hello world!")} style={{ color: "blue" }} />
Transforms an angle in degrees in radians.
(deg: Node) => Node;
Transforms an angle in radians in degrees.
toDeg(rad: Node) => Node
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
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
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
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
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);
Convenience function to run a decay animation.
runDecay(clock: Clock, value: Node, velocity: Node, rerunDecaying: Node): Node
Example usage: Look
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
Returns 1 if the node value is contained in the array of nodes, 0 otherwise.
contains(values: Node[], value: Node) => Node
Interpolate the node from 0 to 1 without clamping.
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.
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));
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)];
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 />
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);
}
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);
}
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);
}
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);
}