a few animations

package.json

@@ -11,6 +11,7 @@
     "moment": "^2.17.1",
     "react": "15.4.1",
     "react-native": "0.39.2",
+    "react-native-animatable": "^1.1.0",
     "react-native-router-flux": "^3.37.0",
     "react-native-vector-icons": "^3.0.0",
     "react-redux": "^5.0.1",

src/components/Chip.js

@@ -1,21 +1,35 @@
 
 import React, { Component } from 'react'
-import { StyleSheet, Text, TouchableHighlight } from 'react-native'
+import { StyleSheet, Text, TouchableWithoutFeedback } from 'react-native'
 import Dimensions from 'Dimensions'
+import * as Animatable from 'react-native-animatable'
 
 import { bgColor } from '../styles/common'
 
 export default class Chip extends Component {
   render () {
-    const { chip, onPress } = this.props
-
     return (
-      <TouchableHighlight style={[styles.chip, this.styles()]} onPress={() => onPress(chip.id)} disabled={this.isDisabled()}>
-        {this.renderText()}
-      </TouchableHighlight>
+      <TouchableWithoutFeedback onPress={() => this.onPress()} disabled={this.isDisabled()}>
+        <Animatable.View
+          animation='bounceIn'
+          delay={Math.random() * 400}
+          duration={400}
+          ref='chip'
+          style={[styles.chip, this.styles()]}
+        >
+          {this.renderText()}
+        </Animatable.View>
+      </TouchableWithoutFeedback>
     )
   }
 
+  onPress () {
+    const { chip, onPress } = this.props
+
+    this.refs.chip.tada(75)
+    onPress(chip.id)
+  }
+
   renderText () {
     const { chip } = this.props
 

src/components/ControlButton.js

@@ -1,17 +1,27 @@
 
 import React, { Component, PropTypes } from 'react'
-import { StyleSheet, Text, TouchableHighlight } from 'react-native'
+import { StyleSheet, Text, TouchableWithoutFeedback } from 'react-native'
+import * as Animatable from 'react-native-animatable'
 
 export default class ControlButton extends Component {
   render () {
-    const { label, onPress } = this.props
+    const { label } = this.props
 
     return (
-      <TouchableHighlight style={styles.container} onPress={onPress}>
-        <Text style={styles.label}>{label.toUpperCase()}</Text>
-      </TouchableHighlight>
+      <TouchableWithoutFeedback onPress={() => this.onPress()}>
+        <Animatable.View ref='controlButton' style={styles.container}>
+          <Text style={styles.label}>{label.toUpperCase()}</Text>
+        </Animatable.View>
+      </TouchableWithoutFeedback>
     )
   }
+
+  onPress () {
+    const { onPress } = this.props
+
+    this.refs.controlButton.tada(75)
+    onPress()
+  }
 }
 
 ControlButton.propTypes = {

src/components/Time.js

@@ -1,6 +1,7 @@
 
 import React, { Component, PropTypes } from 'react'
-import { StyleSheet, Text, View } from 'react-native'
+import { StyleSheet, Text } from 'react-native'
+import * as Animatable from 'react-native-animatable'
 
 import { formatTime } from '../lib/format'
 
@@ -18,14 +19,18 @@ export default class Time extends Component {
 
       const time = (props.endedAt ? props.endedAt - props.startedAt : 0)
       this.setState({ time })
+
+      if (props.won) {
+        this.refs.time.tada(300)
+      }
     }
   }
 
   render () {
     return (
-      <View style={styles.container}>
+      <Animatable.View ref='time' style={styles.container}>
         <Text style={[styles.text, this.styles()]}>{formatTime(this.state.time)}</Text>
-      </View>
+      </Animatable.View>
     )
   }
 

yarn.lock

@@ -3336,6 +3336,10 @@ react-deep-force-update@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/react-deep-force-update/-/react-deep-force-update-1.0.1.tgz#f911b5be1d2a6fe387507dd6e9a767aa2924b4c7"
 
+react-native-animatable@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/react-native-animatable/-/react-native-animatable-1.1.0.tgz#1ca3e8a00e441979d5711805651ff62a2d3b245a"
+
 react-native-experimental-navigation@0.26.x:
   version "0.26.10"
   resolved "https://registry.yarnpkg.com/react-native-experimental-navigation/-/react-native-experimental-navigation-0.26.10.tgz#355e37929a2bfb84088dca331f34bc575297df68"