Add stretchable header example

Author: filipengberg

example/src/App.tsx

@@ -29,6 +29,7 @@ import ScrollOnHeader from './ScrollOnHeader'
 import ScrollableTabs from './ScrollableTabs'
 import Snap from './Snap'
 import StartOnSpecificTab from './StartOnSpecificTab'
+import StretchableHeader from './StretchableHeader'
 import UndefinedHeaderHeight from './UndefinedHeaderHeight'
 import { ExampleComponentType } from './types'
 
@@ -49,6 +50,7 @@ const EXAMPLE_COMPONENTS: ExampleComponentType[] = [
   DynamicTabs,
   MinHeaderHeight,
   AnimatedHeader,
+  StretchableHeader,
   AndroidSharedPullToRefresh,
   HeaderOverscrollExample,
 ]

example/src/StretchableHeader.tsx

@@ -0,0 +1,64 @@
+import React from 'react'
+import { StyleSheet, ImageBackground } from 'react-native'
+import { useHeaderMeasurements } from 'react-native-collapsible-tab-view'
+import Animated, { useAnimatedStyle } from 'react-native-reanimated'
+
+import ExampleComponent from './Shared/ExampleComponent'
+import { ExampleComponentType } from './types'
+
+const title = 'Stretchable Header'
+
+export const Header = () => {
+  const { top } = useHeaderMeasurements()
+
+  const backgroundStyle = useAnimatedStyle(() => {
+    return {
+      transform: [
+        {
+          translateY: Math.min(0, -top.value / 2),
+        },
+        {
+          scale: Math.max(1, (250 + top.value) / 250),
+        },
+      ],
+    }
+  })
+
+  return (
+    <Animated.View style={[styles.root]} pointerEvents="none">
+      <Animated.View style={[styles.background, backgroundStyle]}>
+        <ImageBackground
+          style={styles.image}
+          source={require('../assets/album-art-2.jpg')}
+        />
+      </Animated.View>
+    </Animated.View>
+  )
+}
+
+const Example: ExampleComponentType = () => {
+  return (
+    <ExampleComponent renderHeader={() => <Header />} allowHeaderOverscroll />
+  )
+}
+
+const styles = StyleSheet.create({
+  root: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    height: 250,
+  },
+  background: {
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+  },
+  image: {
+    width: '100%',
+    height: '100%',
+  },
+})
+
+Example.title = title
+
+export default Example