# useAnimation

The `useAnimation()` hook can be used to create simple animations.

It's a simple wrapper for React Native's `new Animated.Value()` & `Animated.decay()`, `Animated.spring()` or`Animated.timing()` with an optional `Animation.delay()`.

## API

The API is the same for each hook as the original React Native API, with the addition of the `delay` prop for all three of them.

`useAnimatedSpring()` and `useAnimatedTiming()` both accept an additional field called `fromValue`.

- `useAnimatedDecay()` - https://facebook.github.io/react-native/docs/animated#decay
- `useAnimatedTiming()` - https://facebook.github.io/react-native/docs/animated#timing
- `useAnimatedSpring()` - https://facebook.github.io/react-native/docs/animated#spring

## Usage

```jsx
import { Animated, Dimensions } from 'react-native';

import { useAnimatedDecay } from './useAnimation';

function MyComponent({ children }) {
  // Animate `opacity` from `0` to `1`,
  // duration should be equal to `theme.orbit.durationFast`
  const opacity = useAnimatedTiming({
    fromValue: 0,
    toValue: 1,
    duration: 'fast',
  });

  // Animate `translateY` from `1` to `0`,
  // duration should be equal to `theme.orbit.durationNormal`
  // with a delay of `theme.orbit.durationFast`
  const translateY = useAnimatedTiming({
    fromValue: 1,
    toValue: 0,
    duration: 'normal',
    delay: 'fast',
  });

  const { height: windowHeight } = Dimensions.get('window');
  return (
    <Animated.View
      style={{
        position: 'absolute',
        width: '100%',
        height: '100%',
        backgroundColor: 'rgba(0, 0, 0, 0.5)',
        // `opacity` can be passed as-is
        opacity,
        // we need to interpolate the value, so
        // 0...1 translates to 0...windowHeight
        // (the value itself will be passed from 1...0)
        transform: [
          {
            translateY: translateY.interpolate({
              inputRange: [0, 1],
              outputRange: [0, windowHeight],
            }),
          },
        ],
      }}
    >
      {children}
    </Animated.View>
  );
}
```