Updated generic SearchBar

1 files changed, 13 insertions, 11 deletions

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>
   );
 };