From 833e907ae5aa5e58cbf3bdf4cd47b58ef26b1494 Mon Sep 17 00:00:00 2001
From: Bruno Morgado <mstrk512@gmail.com>
Date: Sun, 29 Nov 2020 17:20:46 +0000
Subject: [PATCH] feat(animations): slide

---
 src/components/Animations/Slide/index.tsx | 33 +++++++++++++++++++++++
 src/components/Animations/Slide/types.ts  |  9 +++++++
 src/components/Animations/index.ts        |  1 +
 3 files changed, 43 insertions(+)
 create mode 100644 src/components/Animations/Slide/index.tsx
 create mode 100644 src/components/Animations/Slide/types.ts

diff --git a/src/components/Animations/Slide/index.tsx b/src/components/Animations/Slide/index.tsx
new file mode 100644
index 0000000..95c8164
--- /dev/null
+++ b/src/components/Animations/Slide/index.tsx
@@ -0,0 +1,33 @@
+import * as React from 'react'
+import { LayoutChangeEvent } from 'react-native'
+import Animated, { Extrapolate, interpolate } from 'react-native-reanimated'
+import { useTimingTransition } from 'react-native-redash/lib/module/v1'
+
+import { SlideProps } from './types'
+
+export const Slide: React.FC<SlideProps> = ({ style, initialOffset = 1000, inverted = false, show, ...rest }) => {
+  const [height, setHeight] = React.useState(initialOffset)
+  const value = useTimingTransition(show, { duration: 200 })
+
+  const onLayout = ({ nativeEvent: { layout } }: LayoutChangeEvent) => {
+    setHeight(layout.height)
+  }
+
+  const slidetyles = {
+    transform: [{
+      translateY: interpolate(value, {
+        inputRange: [0, 1],
+        outputRange: [inverted ? height : -height, 0],
+        extrapolate: Extrapolate.CLAMP,
+      }),
+    }],
+  }
+
+  return (
+    <Animated.View
+      style={[slidetyles, style]}
+      onLayout={onLayout}
+      {...rest}
+    />
+  )
+}
diff --git a/src/components/Animations/Slide/types.ts b/src/components/Animations/Slide/types.ts
new file mode 100644
index 0000000..85e2141
--- /dev/null
+++ b/src/components/Animations/Slide/types.ts
@@ -0,0 +1,9 @@
+import { ViewProps } from 'react-native'
+
+export interface SlideProps extends ViewProps {
+  /** show/hide */
+  show: boolean,
+  /** initial offset */
+  initialOffset?: number,
+  inverted: boolean,
+}
diff --git a/src/components/Animations/index.ts b/src/components/Animations/index.ts
index cad99ae..de2726c 100644
--- a/src/components/Animations/index.ts
+++ b/src/components/Animations/index.ts
@@ -1 +1,2 @@
 export { Fade } from './Fade'
+export { Slide } from './Slide'