Merge pull request #44 from shoutem/release/0.14.0

Release/0.14.0

index.js

@@ -11,6 +11,7 @@ export { default as ZoomOut } from './src/animations/ZoomOut';
 export { default as SlideIn } from './src/animations/Slide/SlideIn';
 export { default as SlideOut } from './src/animations/Slide/SlideOut';
 export { default as Rotate } from './src/animations/Rotate';
+export { default as Wiggle } from './src/animations/Wiggle';
 export { default as HeroHeader } from './src/animations/HeroHeader';
 export { default as DriverShape } from './src/drivers/DriverShape';
 export { default as connectAnimation } from './src/components/connectAnimation';

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shoutem/animation",
-  "version": "0.13.1",
+  "version": "0.14.0",
   "description": "Shoutem Animation Library",
   "main": "index.js",
   "scripts": {

src/animations/Wiggle.js

@@ -0,0 +1,72 @@
+import React, { PureComponent } from 'react';
+import autoBindReact from 'auto-bind/react';
+import _ from 'lodash';
+import PropTypes from 'prop-types';
+import { Animated, Easing } from 'react-native';
+
+export default class Wiggle extends PureComponent {
+  constructor(props) {
+    super(props);
+
+    autoBindReact(this);
+
+    this.animation = new Animated.Value(0);
+  }
+
+  componentDidUpdate(prevProps) {
+    const { startAnimation: prevStartAnimation } = prevProps;
+    const { startAnimation } = this.props;
+
+    if (!prevStartAnimation && startAnimation) {
+      this.triggerAnimation();
+    }
+  }
+
+  triggerAnimation() {
+    const { style } = this.props;
+    const duration = _.get(style, 'timingConfig.duration');
+    const inputRange = _.get(style, 'interpolateConfig.inputRange');
+    const toValue = _.last(inputRange);
+
+    Animated.timing(this.animation, {
+      duration,
+      toValue,
+      ease: Easing.bounce,
+    }).start(() => {
+      this.animation.setValue(0);
+    });
+  }
+
+  render() {
+    const { children, style } = this.props;
+    const { interpolateConfig, paddingHorizontal } = style;
+
+    const interpolated = this.animation.interpolate({
+      ...interpolateConfig,
+    });
+    const animatedStyle = {
+      paddingHorizontal,
+      transform: [{ translateX: interpolated }],
+    };
+
+    return (
+      <Animated.View style={[style, animatedStyle]}>{children}</Animated.View>
+    );
+  }
+}
+
+Wiggle.propTypes = {
+  /**
+   * If set to true, triggers animation
+   */
+  startAnimation: PropTypes.bool,
+  /**
+   * Components to which an effect will be applied
+   */
+  children: PropTypes.node.isRequired,
+  style: PropTypes.object,
+};
+
+Wiggle.defaultProps = {
+  startAnimation: false,
+};