Utility library for React Native Gesture Handler and Reanimated.
yarn add react-native-redash
import { atan2 } from "react-native-redash";
atan2(y, x);
Component that display an animation value as text.
Example usage:
<ReText text={new Value("hello world!")} style={{ color: "blue" }} />
Given an SVG Path, returns an denormalized object of values that can be used for animations on that path. From the perspective of the user, the returned value should be considered a black box. Here is an example below:
// We get the data from the SVG Path denormalized a way that can be handled with Reanimated
const path = parsePath(d);
const { y, x } = getPointAtLength(path, length);
Implementation of getPointAtLength for Reanimated.
// We get the data from the SVG Path denormalized a way that can be handled with Reanimated
const path = parsePath(d);
const { y, x } = getPointAtLength(path, length);
Interpolate from one SVG point to the other, this function assumes that each path has the same number of points.
const rhino = "M 217.765 29.683 C 225.855 29.683 ";
const rhinoPath = parsePath(rhino);
const elephant = "M 223.174 43.413 ...";
const elephantPath = parsePath(elephant);
return (
<>
<Animated.Code>
{() =>
set(
progress,
runTiming(clock, progress, {
toValue: 1,
duration: 2000,
easing: Easing.linear
})
)
}
</Animated.Code>
<Svg style={styles.container} viewBox="0 0 409 280">
<AnimatedPath
d={interpolatePath(rhinoPath, elephantPath, progress)}
fill="#7d8f9b"
/>
</Svg>
</>
);
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
Clamps a node with a lower and upper bound.
clamp(new Value(-1), 0, 100); // 0
clamp(new Value(1), 0, 100); // 1
clamp(new Value(101), 0, 100); // 100
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
Returns the coordinate of a cubic bezier curve.
t
is the length of the curve from 0 to 1. cubicBezier(0, p0, p1, p2, p3)
equals p0
and cubicBezier(1, p0, p1, p2, p3)
equals p3
.
p0
and p3
are respectively the starting and ending point of the curve.
p1
and p2
are the control points.
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
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
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);
}
Decorates animated value to spring after pan
constructor(props) {
const dragX = new Value(0);
const panState = new Value(0);
const snapPoint = new Value(100);
this.handlePan = event([
{
nativeEvent: {
state: panState,
velocityX,
},
},
]);
this.X = spring(dragX, panState, snapPoint);
}