Fix search bar animation & search screen styles

1 files changed, 44 insertions, 25 deletions

diff --git a/src/components/search/SearchResultsBackground.tsx b/src/components/search/SearchResultsBackground.tsx
index 3d7fab4e..e5236295 100644
--- a/src/components/search/SearchResultsBackground.tsx
+++ b/src/components/search/SearchResultsBackground.tsx
@@ -1,32 +1,55 @@
 import React from 'react';
-import {StyleSheet} from 'react-native';
-import Animated, {interpolate} from 'react-native-reanimated';
-import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
+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 {
-  top: Animated.Value<number>;
+  animationProgress: Animated.SharedValue<number>;
+  searchBarHeight: number;
+  searching: boolean;
 }
 const SearchResultsBackground: React.FC<SearchResultsBackgroundProps> = ({
-  top,
+  animationProgress,
+  searchBarHeight,
+  searching,
   children,
 }) => {
-  // TODO: (Leon) use reanimated v2
-  const opacityBackground = 0;
-  // const opacityBackground: Animated.Node<number> = interpolate(top, {
-  //   inputRange: [-SCREEN_HEIGHT, 0],
-  //   outputRange: [0, 1],
-  // });
-  // TODO: (Leon) use reanimated v2
-  const opacityContent = 0;
-  // const opacityContent: Animated.Node<number> = interpolate(top, {
-  //   inputRange: [-SCREEN_HEIGHT / 40, 0],
-  //   outputRange: [0, 1],
-  // });
+  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, {opacity: opacityBackground, top}]}>
-      <Animated.View
-        style={[styles.contentContainer, {opacity: opacityContent}]}>
+      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>
@@ -34,15 +57,11 @@ const SearchResultsBackground: React.FC<SearchResultsBackgroundProps> = ({
 };
 const styles = StyleSheet.create({
   container: {
-    height: SCREEN_HEIGHT,
-    width: SCREEN_WIDTH,
-    position: 'absolute',
+    ...StyleSheet.absoluteFillObject,
     backgroundColor: 'white',
   },
   contentContainer: {
     flex: 1,
-    paddingVertical: 10,
-    paddingBottom: SCREEN_HEIGHT / 15,
   },
 });
 export default SearchResultsBackground;