diff --git a/TouchableDriver.js b/TouchableDriver.js new file mode 100644 index 0000000..cd37905 --- /dev/null +++ b/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(); + * ... + * + * ... + * + */ +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(); + } +} diff --git a/examples/ShoutemAnimation/App.js b/examples/ShoutemAnimation/App.js index 4bd4de7..5968a45 100644 --- a/examples/ShoutemAnimation/App.js +++ b/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" diff --git a/examples/ShoutemAnimation/ZoomInTouchable.js b/examples/ShoutemAnimation/ZoomInTouchable.js new file mode 100644 index 0000000..9c39ce4 --- /dev/null +++ b/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 ( + + + + + + + + + + ); + } +} + diff --git a/index.js b/index.js index c66139b..bbc41c6 100644 --- a/index.js +++ b/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';