From d18f9db3a22bb0193c4c0ef62c15a7757cf66470 Mon Sep 17 00:00:00 2001
From: Shravya Ramesh <shravs1208@gmail.com>
Date: Thu, 20 May 2021 10:05:31 -0700
Subject: Updated generic SearchBar

---
 src/components/search/SearchBar.tsx | 24 +++++++++++++-----------
 1 file changed, 13 insertions(+), 11 deletions(-)

(limited to 'src')

diff --git a/src/components/search/SearchBar.tsx b/src/components/search/SearchBar.tsx
index 25ea3b59..a17d0695 100644
--- a/src/components/search/SearchBar.tsx
+++ b/src/components/search/SearchBar.tsx
@@ -21,10 +21,10 @@ import {getSearchSuggestions, normalize} from '../../utils';
 const AnimatedIcon = Animated.createAnimatedComponent(Icon);
 
 interface SearchBarProps extends TextInputProps {
-  onCancel: () => void;
-  animationProgress: Animated.SharedValue<number>;
-  searching: boolean;
-  onLayout: (e: LayoutChangeEvent) => void;
+  onCancel?: () => void;
+  animationProgress?: Animated.SharedValue<number>;
+  searching?: boolean;
+  onLayout?: (e: LayoutChangeEvent) => void;
 }
 const SearchBar: React.FC<SearchBarProps> = ({
   onFocus,
@@ -113,8 +113,8 @@ const SearchBar: React.FC<SearchBarProps> = ({
    * On-search marginRight style ("cancel" button slides and fades in).
    */
   const animatedStyles = useAnimatedStyle<ViewStyle>(() => ({
-    marginRight: animationProgress.value * 58,
-    opacity: animationProgress.value,
+    marginRight: (animationProgress ? animationProgress.value : 0) * 58,
+    opacity: animationProgress ? animationProgress.value : 0,
   }));
 
   return (
@@ -136,11 +136,13 @@ const SearchBar: React.FC<SearchBarProps> = ({
           {...{placeholder, value, onChangeText, onFocus, onBlur}}
         />
       </Animated.View>
-      <Animated.View style={animatedStyles}>
-        <TouchableOpacity style={styles.cancelButton} onPress={onCancel}>
-          <Text style={styles.cancelText}>Cancel</Text>
-        </TouchableOpacity>
-      </Animated.View>
+      {onCancel && (
+        <Animated.View style={animatedStyles}>
+          <TouchableOpacity style={styles.cancelButton} onPress={onCancel}>
+            <Text style={styles.cancelText}>Cancel</Text>
+          </TouchableOpacity>
+        </Animated.View>
+      )}
     </View>
   );
 };
-- 
cgit v1.2.3-70-g09d2