Skip to content
A simple declarative API for React-Native animations, using hooks
TypeScript JavaScript
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets
example initial commit Nov 27, 2018
src initial commit Nov 27, 2018
.gitignore initial commit Nov 27, 2018
.prettierrc initial commit Nov 27, 2018
.watchmanconfig initial commit Nov 27, 2018
App.js initial commit Nov 27, 2018
LICENSE Initial commit Feb 7, 2018
README.md badges Jun 11, 2019
app.json typo Nov 27, 2018
babel.config.js initial commit Nov 27, 2018
package.json v1.0.1 Nov 27, 2018
tsconfig.json initial commit Nov 27, 2018
yarn.lock initial commit Nov 27, 2018

README.md

react-native-animation-hooks

NPM Build Status

yarn add react-native-animation-hooks

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

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.

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

import { useAnimation } from 'react-native-animation-hooks'

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

Hire a freelance expert

Looking for a React/ReactNative freelance expert with more than 5 years production experience? Contact me from my website or with Twitter.

You can’t perform that action at this time.