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';