Adds TouchableDriver (#3)

* Adds touchable driver component

* Adds touchable zoom in example

* Wrap text in quotes for better display in diff tools

* Extracts default animation out of class

* Removes animation override via constructor

TouchableDriver.js

@@ -0,0 +1,62 @@
+import {
+  Animated,
+  Easing,
+} from 'react-native';
+
+/**
+ * Returns the default animation callback to use.
+ *
+ * @param {Animated.Value} value
+ * @param {double} toValue
+ * @param {Object} animationOptions
+ * @returns {CompositeAnimation}
+ */
+function defaultAnimation(value, toValue, animationOptions) {
+  return Animated.timing(
+    value,
+    {
+      toValue: toValue,
+      ...animationOptions
+    }
+  );
+}
+
+/**
+ * Animation driver that creates an animated value changed on press events.
+ *
+ * Assign onPressIn and onPressOut props of React Native Touchable*, and
+ * pass instance to any @shoutem/animation animation to run it
+ * e.g.:
+ * driver = new TouchableDriver();
+ * ...
+ * <TouchableOpacity {...driver.touchableViewProps}>
+ * ...
+ * <ZoomIn driver={driver}>
+ */
+export class TouchableDriver {
+
+  /**
+   * @param {Object} options Animation options.
+   */
+  constructor(options) {
+    this.animationOptions = Object.assign({
+      easing: Easing.elastic(1),
+      duration: 150,
+    }, options);
+    this.value = new Animated.Value(0);
+    this.onPressIn = this.onPressIn.bind(this);
+    this.onPressOut = this.onPressOut.bind(this);
+    this.touchableViewProps = {
+      onPressIn: this.onPressIn,
+      onPressOut: this.onPressOut,
+    };
+  }
+
+  onPressIn() {
+    defaultAnimation(this.value, 1, this.animationOptions).start();
+  }
+
+  onPressOut() {
+    defaultAnimation(this.value, 0, this.animationOptions).start();
+  }
+}

examples/ShoutemAnimation/App.js

@@ -10,12 +10,14 @@ import Parallax from './Parallax';
 import HeroHeader from './HeroHeader';
 import FadeInOut from './FadeInOut';
 import ZoomInOut from './ZoomInOut';
+import ZoomInTouchable from './ZoomInTouchable';
 
 const examples = {
   Parallax,
   HeroHeader,
   FadeInOut,
   ZoomInOut,
+  ZoomInTouchable,
 };
 
 export class App extends Component {
@@ -46,6 +48,9 @@ export class App extends Component {
           }, {
             example: 'ZoomIn + ZoomOut (TimerDriver)',
             component: 'ZoomInOut',
+          }, {
+            example: 'ZoomIn (TouchableDriver)',
+            component: 'ZoomInTouchable',
           }]}
           onOptionSelected={(option) => this.setState({ selectedComponent: option.component })}
           titleProperty="example"

examples/ShoutemAnimation/ZoomInTouchable.js

@@ -0,0 +1,38 @@
+import React, { Component } from 'react';
+import { ScrollView } from 'react-native';
+
+import {
+  ZoomIn,
+  TouchableDriver,
+} from '@shoutem/animation';
+
+
+import {
+  Button,
+  Row,
+  Icon,
+  Text,
+  View,
+} from '@shoutem/ui';
+
+export default class ZoomInTouchableExample extends Component {
+  render() {
+    const driver = new TouchableDriver();
+
+    return (
+      <View>
+        <Row>
+          <View styleName="horizontal h-center">
+            <ZoomIn driver={driver} maxFactor={1.3}>
+              <Button {...driver.touchableViewProps}>
+                <Icon name="add-to-favorites-full" />
+                <Text>{"TOUCH ME, I'M ZOOMING IN"}</Text>
+              </Button>
+            </ZoomIn>
+          </View>
+        </Row>
+      </View>
+    );
+  }
+}
+

index.js

@@ -1,6 +1,7 @@
 export { default as makeZoomable } from './ZoomableComponent';
 export { ScrollDriver } from './ScrollDriver';
 export { TimingDriver } from './TimingDriver';
+export { TouchableDriver } from './TouchableDriver';
 export { Parallax } from './Parallax';
 export { FadeIn } from './FadeIn';
 export { FadeOut } from './FadeOut';