# react-native-animation-hooks

> Easily add React Native animations with hooks

Latest version **1.0.1** (published 2018-11-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-animation-hooks
pnpm add react-native-animation-hooks
yarn add react-native-animation-hooks
bun add react-native-animation-hooks
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2018-11-27 |
| First published | 2018-11-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 8.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | slorber |
| Keywords | react, react-native, animation, animated, motion, expo, hooks, spring, timing |

## Links

- npm: https://www.npmjs.com/package/react-native-animation-hooks
- npm.io page: https://npm.io/package/react-native-animation-hooks

## Alternatives

- [persona-harness](https://npm.io/package/persona-harness.md) — 4.7K weekly downloads
- [@tsparticles/effect-bubble](https://npm.io/package/@tsparticles/effect-bubble.md) — 4.6K weekly downloads
- [f3d](https://npm.io/package/f3d.md) — 730 weekly downloads
- [spark-html-motion](https://npm.io/package/spark-html-motion.md) — 298 weekly downloads
- [cra-template-particles-typescript](https://npm.io/package/cra-template-particles-typescript.md) — 227 weekly downloads

## Recent versions

- 1.0.1 (latest) — 2018-11-27
- 1.0.0 — 2018-11-27

## README

# react-native-animation-hooks

`yarn add react-native-animation-hooks`

The most convenient way to add little animations to your ReactNative application.

```jsx
const Comp = () => {
  const [bool, setBool] = useState(false)
  const toggle = () => setBool(!bool);

  const animatedOpacity = useAnimation({
    toValue: bool ? 1 : 0.5,
  })

  return (
    <Animated.View style={{ opacity: animatedOpacity }}>
      <Text onPress={toggle}>Hello</Text>
    </Animated.View>
  )
}
```

- Tiny interface using hooks and Animated framework
- Compatible with Expo
- Reduce Animated.Value management boilerplate
- Full support for `spring` and `timing` animations
- Typescript definitions

# Advanced example:

This repo is an Expo app that you can run with `yarn start`.

```tsx
import React, { useState } from 'react'
import { Animated, Switch, View, StyleProp, ViewStyle } from 'react-native'

import { useAnimation } from 'AnimationHooks'

const AnimatedShape = ({ style }: { style?: StyleProp<ViewStyle> }) => (
  <Animated.View
    style={[{ width: 50, height: 50, backgroundColor: 'red' }, style]}
  />
)

const ExampleScreen = () => {
  const [bool, setBool] = useState(false)

  const animatedValue = useAnimation({
    type: 'timing',
    initialValue: 1,
    toValue: bool ? 1 : 0,
    duration: bool ? 1000 : 300,
    useNativeDriver: true,
  })

  return (
    <View style={{ flex: 1 }}>
      <View style={{ padding: 10 }}>
        <Switch value={bool} onValueChange={setBool} />
      </View>
      <View
        style={{
          flex: 1,
          padding: 10,
          justifyContent: 'space-around',
          alignItems: 'center',
        }}
      >
        <AnimatedShape
          style={{
            opacity: animatedValue.interpolate({
              inputRange: [0, 1],
              outputRange: [0.3, 1],
            }) as any,
          }}
        />
        <AnimatedShape
          style={{
            transform: [
              {
                scale: animatedValue.interpolate({
                  inputRange: [0, 1],
                  outputRange: [0.5, 1],
                }) as any,
              },
            ],
          }}
        />
        <AnimatedShape
          style={{
            transform: [
              {
                translateX: animatedValue.interpolate({
                  inputRange: [0, 1],
                  outputRange: [-100, 100],
                }) as any,
              },
            ],
          }}
        />
      </View>
    </View>
  )
}

export default ExampleScreen
```

# TODO

- Animated XY values
- Tests

# License

MIT

---
_Source: https://npm.io/package/react-native-animation-hooks · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._