react-native-reanimated-hooks

react hooks for react-native-reanimated

Usage no npm install needed!

<script type="module">
  import reactNativeReanimatedHooks from 'https://cdn.skypack.dev/react-native-reanimated-hooks';
</script>

README

CircleCI semantic-release

react hooks for "react-native-reanimated"

Install

yarn add react-native-reanimated-indicators

Usage

Examples

Utils

useLoop()

simple loop animation

value will be looped from min(default 0) to max(default 1)

import { useLoop } from 'react-native-reanimated-hooks'

export const Example: React.FC<ExampleProps> = () => {
  const loop = useLoop()

  const circleStyle = useMemo(() => {
    const size = interpolate(loop.position, { inputRange: [0, 1], outputRange: [20, 70] })

    return { width: size, height: size, backgroundColor: 'pink', borderRadius: size }
  }, [loop.position])

  return (
    <View style={styles.container}>
      <TouchableOpacity
        onPress={loop.toggle} // onPress={() => (loop.isAnimating.current ? loop.stop() : loop.start())}
        style={styles.rect}
      >
        <Animated.View style={rectStyle} />
      </TouchableOpacity>
    </View>
  )
}

The loop is the following

this

NOT following

not-this

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

useSwitch

not works yet.