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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
|
import React from 'react';
import {StyleSheet, ViewStyle} from 'react-native';
import Animated, {
useAnimatedStyle,
useDerivedValue,
interpolate,
Extrapolate,
} from 'react-native-reanimated';
import {useSafeAreaInsets} from 'react-native-safe-area-context';
interface SearchResultsBackgroundProps {
animationProgress: Animated.SharedValue<number>;
searchBarHeight: number;
searching: boolean;
}
const SearchResultsBackground: React.FC<SearchResultsBackgroundProps> = ({
animationProgress,
searchBarHeight,
searching,
children,
}) => {
const {top: topInset} = useSafeAreaInsets();
/*
* On-search container style (opacity fade-in).
*/
const backgroundAnimatedStyles = useAnimatedStyle<ViewStyle>(() => ({
opacity: animationProgress.value,
}));
/*
* Derived animation value for contentAnimatedStyles.
*/
const contentAnimationProgress = useDerivedValue<number>(() =>
interpolate(animationProgress.value, [0.9, 1], [0, 1], Extrapolate.CLAMP),
);
/*
* On-search content style (delayed opacity fade-in).
*/
const contentAnimatedStyles = useAnimatedStyle<ViewStyle>(() => ({
opacity: contentAnimationProgress.value,
}));
return (
<Animated.View
style={[
styles.container,
backgroundAnimatedStyles,
{
// absolute: inset + search screen paddingTop + searchBar + padding
paddingTop: topInset + 15 + searchBarHeight + 10,
},
]}
pointerEvents={searching ? 'auto' : 'none'}>
<Animated.View style={[styles.contentContainer, contentAnimatedStyles]}>
{children}
</Animated.View>
</Animated.View>
);
};
const styles = StyleSheet.create({
container: {
...StyleSheet.absoluteFillObject,
backgroundColor: 'white',
},
contentContainer: {
flex: 1,
},
});
export default SearchResultsBackground;
|
