react hooks for react-native-reanimated
npm install react-native-reanimated-hooks

react hooks for "react-native-reanimated"

The code for this example is here.
- Install
- Usage
- useLoop()
- Example
``sh`
yarn add react-native-reanimated-indicators
simple loop animation
value will be looped from min(default 0) to max(default 1)
`tsx
import { interpolate } from 'react-native-reanimated'
import { useLoop } from 'react-native-reanimated-hooks'
export const Example: React.FC
const loop = useLoop()
const animatedStyle = useAnimatedStyle(() => {
const size = interpolate(loop.value.value, [0, 1], [20, 70] )
return { width: size, height: size, backgroundColor: 'pink', borderRadius: size }
}, [loop.value])
return (
style={styles.rect}
>
)
}
`
The loop is the following
!this
NOT following
Loop animated values as indicated by name.
Just work as expected.
An example with react-native-reanimated-indicators
`tsx
import React, { useMemo, useRef } from "react";
import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
import Animated, { interpolate, useAnimatedStyle } from "react-native-reanimated";
import { useLoop } from "react-native-reanimated-hooks";
import { BallIndicator, DotIndicator } from "react-native-reanimated-indicators";
export const IndicatorScreen: React.FC = () => {
const loop = useLoop();
const rectStyle = useAnimatedStyle(() => {
const size = interpolate(loop.value.value, [0, 1], [20, 70]);
return { width: size, height: size, backgroundColor: "pink", borderRadius: size };
}, [loop.value]);
const isAnimating = useRef(true);
return (
if (isAnimating.current) {
isAnimating.current = false;
loop.stop();
} else {
isAnimating.current = true;
loop.start();
}
}}
style={styles.rect}
>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "black",
},
rect: {
flex: 1,
alignItems: "center",
justifyContent: "center",
flexDirection: "row",
},
indicator: {
flex: 1,
flexDirection: "row",
},
});
``