From 2b845dd0f128c6df2f1998b2628a585e12e6ced5 Mon Sep 17 00:00:00 2001
From: Saumya Bhatnagar <saumya.bhatnagar.sb@gmail.com>
Date: Mon, 12 Jun 2017 14:11:58 +0530
Subject: [PATCH] Add slide animation view.

---
 src/common/SlideAnimationView.js | 39 ++++++++++++++++++++++++++++++++
 src/common/index.js              |  1 +
 2 files changed, 40 insertions(+)
 create mode 100644 src/common/SlideAnimationView.js

diff --git a/src/common/SlideAnimationView.js b/src/common/SlideAnimationView.js
new file mode 100644
index 00000000000..76e07426271
--- /dev/null
+++ b/src/common/SlideAnimationView.js
@@ -0,0 +1,39 @@
+/* flow */
+import React, { Component } from 'react';
+import { Animated } from 'react-native';
+
+export default class SlideAnimationView extends Component {
+  state = {
+    animationIndex: new Animated.Value(0),
+  };
+
+  animate() {
+    const { easing, duration } = this.props;
+    this.state.animationIndex.setValue(0);
+    Animated.timing(this.state.animationIndex, {
+      toValue: 1,
+      duration,
+      easing,
+      useNativeDriver: true,
+    }).start();
+  }
+
+  componentWillReceiveProps() {
+    this.animate();
+  }
+
+  render() {
+    const { property, from, to, movement, style } = this.props;
+    const animationValue = this.state.animationIndex.interpolate({
+      inputRange: [0, 1],
+      outputRange: movement === 'out' ? [from, to] : [to, from],
+    });
+
+    const slideStyle = { transform: [{ [property]: animationValue }] };
+    return (
+      <Animated.View style={[style, slideStyle]}>
+        {this.props.children}
+      </Animated.View>
+    );
+  }
+}
diff --git a/src/common/index.js b/src/common/index.js
index 852acb53594..f3362e0ce4f 100644
--- a/src/common/index.js
+++ b/src/common/index.js
@@ -19,3 +19,4 @@ export { default as UserStatusIndicator } from './UserStatusIndicator';
 export { default as ZulipButton } from './ZulipButton';
 export { default as ZulipStatusBar } from './ZulipStatusBar';
 export { default as ZulipSwitch } from './ZulipSwitch';
+export { default as SlideAnimationView } from './SlideAnimationView';