animatable

You can enable css-animation and css-transition for react-native easily.
Also works on web.

Install

npm install animatable

Usage

Transition

Animation will be triggered when specified style prop changed.
When property option is specified behaviour is like css-transition.

import { View } from 'react-native'
import animatable from 'animatable'

const TransitionLeftView = animatable({
  property: 'left',
  duration: 400,
  timingFunction: 'ease-in-out'
})(View)

<TransitionLeftView
  onClick={() => this.setState({ on: !this.state.on })}
  style={{
    position: 'absolute',
    left: this.state.on ? 100 : 0,
    top: 0,
    width: 100,
    height: 100,
    backgroundColor: 'red'
  }}
/>

Screenshot

Animation

When keyframes option is specified behaviour is like css-animation.

import { View } from 'react-native'
import animatable from 'animatable'

// define keyframes 
const keyframes = {
  '0%':   { marginLeft: '0%',   marginRight: '100%' },
  '50%':  { marginLeft: '25%',  marginRight: '0%' },
  '100%': { marginLeft: '100%', marginRight: '0%' }
}
const Bar = animatable({
  keyframes: keyframes,
  direction: 'alternate-reverse',
  duration: 1000,
  timingFunction: 'linear',
  iterationCount: 'infinite',
})(View)

// render
const Indicator = (props) => (
  <View style={{
    width: 100,
    height: 20,
    backgroundColor: 'lightgray'
  }}>
    <Bar
      style={{
        height: '100%',
        backgroundColor: 'black',
      }}
    />
  </View>)

Screenshot

Examples

1) specify property values as function

const Bar = animatable({
  keyframes: {
    '0%':   { marginLeft: '0%',   marginRight: '100%' },
    '50%':  { marginLeft: '25%',  marginRight: '0%' },
    '100%': { marginLeft: '100%', marginRight: '0%' }
  },
  duration: 1000,

  // you can set `(prop) => value`
  playState: (props) => props.enabled ? 'paused' : 'running'

})(View)

<Bar
  onClick={() => this.setState({ enabled: !this.state.enabled })}
  enabled={this.state.enabled}
/>

2) Use with style-components etc.

import styled from 'styled-components'

const Bar = styled(animatable({
  keyframes: {
    '0%':   { marginLeft: '0%',   marginRight: '100%' },
    '50%':  { marginLeft: '25%',  marginRight: '0%' },
    '100%': { marginLeft: '100%', marginRight: '0%' }
  },
  duration: 1000,
  playState: (props) => props.enabled ? 'running': 'paused'
})(View))`
  height: 100%;
  background-color: black;
`

Options

You have to specify millisec value for duration and delay.

You can use property values same as described on css definitions, and default values are same as css's one of web.

Apply transition for components:

const TransitionComponent = animatable({
  // required
  property: 'transform',
  duration: 200,

  // optional
  delay: 500,
  timingFunction: 'linear'
})(Component)

Apply animation for components:

const AnimationComponent = animatable({
  // required
  keyframes: {
    '0%':   { marginLeft: '0%',   marginRight: '100%' },
    '50%':  { marginLeft: '25%',  marginRight: '0%' },
    '100%': { marginLeft: '100%', marginRight: '0%' }
  },
  duration: 200,

  // optional
  delay: 500,
  timingFunction: 'linear'
  iterationCount: 'infinite',
  direction: 'normal',
  playState: 'running',
  // TODO: fillMode: 'forwards'
})(Component)

Demo

https://yusukeshibata.github.io/animatable/

Author

Yusuke Shibata

License

MIT