animations

animator.js

import React, {
  Animated,
  Component,
  PropTypes,
} from 'react-native'

import _ from 'lodash'
import config from '../config'

class Animation extends Component {

  _animatedValues = {};

  static propTypes = {
    rules: PropTypes.object.isRequired,
    Inner: PropTypes.func.isRequired,
    restProps: PropTypes.object,
  };

  componentWillMount() {
    this._animatedValues = _.mapValues(this.props.rules, (mapProps) => new Animated.Value(mapProps(this.props.restProps)))
  }

  componentWillReceiveProps(nextProps) {
    _.forEach(nextProps.rules, (mapProps, key) => {
      let toValue = mapProps(nextProps.restProps)
      // no animations in lowPerfMode
      !config.lowPerfMode
        ? Animated.spring(this._animatedValues[key], {toValue}).start()
        : this._animatedValues[key].setValue(toValue)
    })
  }

  render() {
    let {Inner, restProps} = this.props
    return <Inner {...restProps} {...this._animatedValues} />
  }
}

export default function animator(rules) {
  return (Inner) => {
    return (props) => <Animation restProps={props} rules={rules} Inner={Inner} />
  }
}

usage.js

let aniFromProps = (props) => !props.something // animate between 0 or 1 based on some boolean

export default animator({ani: aniFromProps})(SomeComponent)

not sure i follow how rules are executed and sequenced but I think that is just because i've never actually used Animated in react native. I like the lowPerfMode flag. that's pretty cool