106 lines
2.7 KiB
JavaScript
106 lines
2.7 KiB
JavaScript
import { ScrollView, View, Animated } from "react-native";
|
|
import React, { useRef } from "react";
|
|
|
|
export const DynamicHeaderScrollView = (props) => {
|
|
const {
|
|
Max_Header_Height = 200,
|
|
Min_Header_Height = 80,
|
|
children,
|
|
scrollViewProps = {},
|
|
containerProps = {},
|
|
shortHeader = <></>,
|
|
longHeader = <></>,
|
|
topStickyContent,
|
|
styles,
|
|
} = props;
|
|
const scrollOffsetY = useRef(new Animated.Value(0)).current;
|
|
|
|
const Scroll_Distance = Max_Header_Height - Min_Header_Height;
|
|
|
|
const animatedHeaderHeight = scrollOffsetY.interpolate({
|
|
inputRange: [Min_Header_Height, Scroll_Distance],
|
|
outputRange: [Max_Header_Height, 0],
|
|
extrapolate: "clamp",
|
|
});
|
|
const animatedHeaderHeight2 = scrollOffsetY.interpolate({
|
|
inputRange: [0, Scroll_Distance],
|
|
outputRange: [Max_Header_Height, Min_Header_Height],
|
|
extrapolate: "clamp",
|
|
});
|
|
const animatedHeaderVisible = scrollOffsetY.interpolate({
|
|
inputRange: [Min_Header_Height, Scroll_Distance],
|
|
outputRange: [1, 0],
|
|
extrapolate: "clamp",
|
|
});
|
|
const animatedHeaderVisible2 = scrollOffsetY.interpolate({
|
|
inputRange: [Min_Header_Height, Scroll_Distance],
|
|
outputRange: [0, 1],
|
|
extrapolate: "clamp",
|
|
});
|
|
return (
|
|
<View {...containerProps}>
|
|
<View style={{ position: "relative" }}>
|
|
<Animated.View
|
|
style={[
|
|
styles.header,
|
|
{
|
|
height: Max_Header_Height,
|
|
backgroundColor: "#0099CC",
|
|
opacity: animatedHeaderVisible,
|
|
|
|
top: 0,
|
|
},
|
|
]}
|
|
>
|
|
{longHeader}
|
|
</Animated.View>
|
|
<Animated.View
|
|
style={[
|
|
styles.header,
|
|
{
|
|
height: animatedHeaderHeight2,
|
|
backgroundColor: "#0099CC",
|
|
margin: 0,
|
|
top: 0,
|
|
opacity: animatedHeaderVisible2,
|
|
},
|
|
]}
|
|
>
|
|
{shortHeader}
|
|
</Animated.View>
|
|
</View>
|
|
<ScrollView
|
|
{...scrollViewProps}
|
|
style={{
|
|
backgroundColor: "white",
|
|
}}
|
|
stickyHeaderIndices={[1]}
|
|
scrollEventThrottle={16}
|
|
onScroll={Animated.event(
|
|
[{ nativeEvent: { contentOffset: { y: scrollOffsetY } } }],
|
|
{ useNativeDriver: false }
|
|
)}
|
|
>
|
|
<View
|
|
style={{
|
|
height: Scroll_Distance,
|
|
flexDirection: "column",
|
|
}}
|
|
/>
|
|
{topStickyContent && (
|
|
<View
|
|
style={{
|
|
paddingTop: Min_Header_Height,
|
|
flexDirection: "column",
|
|
}}
|
|
index={1}
|
|
>
|
|
{topStickyContent}
|
|
</View>
|
|
)}
|
|
{children}
|
|
</ScrollView>
|
|
</View>
|
|
);
|
|
};
|