collabse-header.js

gistfile1.txt

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)