-
Notifications
You must be signed in to change notification settings - Fork 1
/
useExpandHeader.ts
51 lines (43 loc) · 1.2 KB
/
useExpandHeader.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
import {
interpolate,
interpolateColor,
useAnimatedScrollHandler,
useAnimatedStyle,
useSharedValue,
} from "react-native-reanimated";
import {
HEADER_COLOR_OUTPUT,
HEADER_HIDDEN_THRESHOLD,
HEADER_STATE_INPUT,
} from "~config/header";
function useExpandHeader() {
const background = useSharedValue("rgba(255,255,255,0)");
const opacity = useSharedValue(0);
const display = useSharedValue<"flex" | "none">("flex");
const handler = useAnimatedScrollHandler({
onScroll: ({ contentOffset }) => {
const { y } = contentOffset;
const isHidden = y <= HEADER_HIDDEN_THRESHOLD;
display.value = isHidden ? "none" : "flex";
opacity.value = interpolate(y, HEADER_STATE_INPUT, [0, 1]);
background.value = interpolateColor(
y,
HEADER_STATE_INPUT,
HEADER_COLOR_OUTPUT
);
},
});
const animatedContainer = useAnimatedStyle(() => ({
backgroundColor: background.value,
}));
const animatedOpacity = useAnimatedStyle(() => ({
opacity: opacity.value,
display: display.value,
}));
const style = {
container: animatedContainer,
opacity: animatedOpacity,
};
return { handler, style };
}
export default useExpandHeader;