Fix search bar animation & search screen styles

1 files changed, 17 insertions, 20 deletions

diff --git a/src/components/search/SearchBar.tsx b/src/components/search/SearchBar.tsx
index 7b833406..d441b07b 100644
--- a/src/components/search/SearchBar.tsx
+++ b/src/components/search/SearchBar.tsx
@@ -9,20 +9,23 @@ import {
   TextInputSubmitEditingEventData,
   TouchableOpacity,
   View,
+  ViewStyle,
+  LayoutChangeEvent,
 } from 'react-native';
 import {normalize} from 'react-native-elements';
-import Animated, {interpolate} from 'react-native-reanimated';
+import Animated, {useAnimatedStyle} from 'react-native-reanimated';
 import Icon from 'react-native-vector-icons/Feather';
 import {useSelector} from 'react-redux';
 import {RootState} from '../../store/rootReducer';
-import {getSearchSuggestions, SCREEN_HEIGHT} from '../../utils';
+import {getSearchSuggestions} from '../../utils';
 
 const AnimatedIcon = Animated.createAnimatedComponent(Icon);
 
 interface SearchBarProps extends TextInputProps {
   onCancel: () => void;
-  top: Animated.Value<number>;
+  animationProgress: Animated.SharedValue<number>;
   searching: boolean;
+  onLayout: (e: LayoutChangeEvent) => void;
 }
 const SearchBar: React.FC<SearchBarProps> = ({
   onFocus,
@@ -31,7 +34,8 @@ const SearchBar: React.FC<SearchBarProps> = ({
   value,
   onCancel,
   searching,
-  top,
+  animationProgress,
+  onLayout,
 }) => {
   const handleSubmit = (
     e: NativeSyntheticEvent<TextInputSubmitEditingEventData>,
@@ -107,23 +111,15 @@ const SearchBar: React.FC<SearchBarProps> = ({
   }, [searching]);
 
   /*
-   * Animated nodes used in search bar activation animation.
+   * On-search marginRight style ("cancel" button slides and fades in).
    */
-  // TODO: (Leon) use reanimated v2
-  const marginRight = 0;
-  // const marginRight: Animated.Node<number> = interpolate(top, {
-  //   inputRange: [-SCREEN_HEIGHT, 0],
-  //   outputRange: [0, 58],
-  // });
-  // TODO: (Leon) use reanimated v2
-  const opacity = 0;
-  // const opacity: Animated.Node<number> = interpolate(top, {
-  //   inputRange: [-SCREEN_HEIGHT, 0],
-  //   outputRange: [0, 1],
-  // });
+  const animatedStyles = useAnimatedStyle<ViewStyle>(() => ({
+    marginRight: animationProgress.value * 58,
+    opacity: animationProgress.value,
+  }));
 
   return (
-    <View style={styles.container}>
+    <View style={styles.container} onLayout={onLayout}>
       <Animated.View style={styles.inputContainer}>
         <AnimatedIcon
           name="search"
@@ -135,13 +131,13 @@ const SearchBar: React.FC<SearchBarProps> = ({
           style={[styles.input]}
           placeholderTextColor={'#828282'}
           onSubmitEditing={handleSubmit}
-          clearButtonMode="while-editing"
+          clearButtonMode="always"
           autoCapitalize="none"
           autoCorrect={false}
           {...{placeholder, value, onChangeText, onFocus, onBlur}}
         />
       </Animated.View>
-      <Animated.View style={{marginRight, opacity}}>
+      <Animated.View style={animatedStyles}>
         <TouchableOpacity style={styles.cancelButton} onPress={onCancel}>
           <Text style={styles.cancelText}>Cancel</Text>
         </TouchableOpacity>
@@ -155,6 +151,7 @@ const styles = StyleSheet.create({
     height: 40,
     paddingHorizontal: 20,
     flexDirection: 'row',
+    zIndex: 2,
   },
   inputContainer: {
     flexGrow: 1,