dmitryshelomanov · November 1, 2018 13:47 · Nov 1, 2018
diff --git a/gistfile1.txt b/gistfile1.txt
@@ -0,0 +1,52 @@
+import React from 'react'
+import { ScrollView, View, Animated, Platform } from 'react-native' 
+import { lifecycle, compose, withProps } from 'recompose'
+
+
+const NAVBAR_HEIGHT = 100
+const STATUS_BAR_HEIGHT = Platform.select({ ios: 20, android: 24 })
+
+const enhance = withProps({ animated: new Animated.Value(1) })
+
+export const CollabseHeaderView = ({
+  header,
+  content,
+  headerWidth = '100%',
+  paddingTop = 100,
+  animated,
+}) => {
+  const headerTranslateY = Animated.diffClamp(animated, 0, 57)
+    .interpolate({
+      inputRange: [0, 1],
+      outputRange: [0, -1],
+    })
+
+  return (
+    <React.Fragment>
+      {header && (
+        <Animated.View
+          style={{
+            position: 'absolute',
+            width: headerWidth,
+            zIndex: 2,
+            transform: [{ translateY: headerTranslateY }],
+          }}
+        >
+          {header}
+        </Animated.View>
+      )}
+      <Animated.ScrollView
+        contentContainerStyle={{ paddingTop }}
+        scrollEventThrottle={16}
+        onScroll={Animated.event(
+          [{nativeEvent: {contentOffset: {y: animated}}}],
+          { useNativeDriver: true },
+        )}
+      >
+        {content && content}
+      </Animated.ScrollView>
+    </React.Fragment>
+  )
+}
+
+export const CollabseHeader = enhance(CollabseHeaderView)