https://github.com/slorber/react-native-animation-hooks

A simple declarative API for React-Native animations, using hooks
https://github.com/slorber/react-native-animation-hooks

Last synced: 13 days ago
JSON representation

A simple declarative API for React-Native animations, using hooks

• Host: GitHub
• URL: https://github.com/slorber/react-native-animation-hooks
• Owner: slorber
• License: mit
• Created: 2018-02-07T20:49:33.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2022-12-06T15:15:25.000Z (almost 2 years ago)
• Last Synced: 2024-10-22T23:39:01.076Z (21 days ago)
• Language: TypeScript
• Homepage: https://sebastienlorber.com
• Size: 1.31 MB
• Stars: 243
• Watchers: 5
• Forks: 12
• Open Issues: 15
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-native-animation-hooks

[![NPM](https://img.shields.io/npm/dm/react-native-animation-hooks.svg)](https://www.npmjs.com/package/react-native-animation-hooks)

[![Build Status](https://travis-ci.com/slorber/react-native-animation-hooks.svg?branch=master)](https://travis-ci.com/slorber/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 (

    

      Hello

    

  )

}

```

- 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 'react-native-animation-hooks'

const AnimatedShape = ({ style }: { style?: StyleProp }) => (

  

)

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 (

    

      

        

      

      

        

        

        

      

    

  )

}

export default ExampleScreen

```

# 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](https://sebastienlorber.com/) or with [Twitter](https://twitter.com/sebastienlorber).