react-native-reanimated-hooks


react hooks for "react-native-reanimated"

The code for this example is here.

- Install
- Usage
- useLoop()
- Example

Install

``sh
yarn add react-native-reanimated-indicators
`

Usage

$3

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 (

onPress={loop.toggle} // onPress={() => (loop.isAnimating.current ? loop.stop() : loop.start())}
style={styles.rect}
>



)
}
`

The loop is the following

!this

NOT following

!not-this

Loop animated values as indicated by name.
Just work as expected.

Example

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 (

IndicatorScreen
onPress={() => {
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",
},
});
``