added cancel button

1 files changed, 4 insertions, 21 deletions

diff --git a/src/screens/chat/ChatSearchBar.tsx b/src/screens/chat/ChatSearchBar.tsx
index d8aff567..1faf6dc0 100644
--- a/src/screens/chat/ChatSearchBar.tsx
+++ b/src/screens/chat/ChatSearchBar.tsx
@@ -16,7 +16,6 @@ import Animated, {useAnimatedStyle} from 'react-native-reanimated';
 
 interface SearchBarProps extends TextInputProps {
   onCancel: () => void;
-  animationProgress: Animated.SharedValue<number>;
   searching: boolean;
   placeholder: string;
 }
@@ -26,7 +25,6 @@ const ChatSearchBar: React.FC<SearchBarProps> = ({
   onChangeText,
   value,
   onCancel,
-  animationProgress,
   onLayout,
   placeholder,
 }) => {
@@ -37,14 +35,6 @@ const ChatSearchBar: React.FC<SearchBarProps> = ({
     Keyboard.dismiss();
   };
 
-  /*
-   * On-search marginRight style ("cancel" button slides and fades in).
-   */
-  const animatedStyles = useAnimatedStyle<ViewStyle>(() => ({
-    marginRight: animationProgress.value * 58,
-    opacity: animationProgress.value,
-  }));
-
   return (
     <View style={styles.container} onLayout={onLayout}>
       <Animated.View style={styles.inputContainer}>
@@ -61,11 +51,9 @@ const ChatSearchBar: 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>
+      <TouchableOpacity style={styles.cancelButton} onPress={onCancel}>
+        <Text style={styles.cancelText}>Cancel</Text>
+      </TouchableOpacity>
     </View>
   );
 };
@@ -87,9 +75,6 @@ const styles = StyleSheet.create({
     borderRadius: 20,
     backgroundColor: '#F0F0F0',
   },
-  searchIcon: {
-    marginRight: 8,
-  },
   input: {
     flex: 1,
     fontSize: 16,
@@ -97,10 +82,8 @@ const styles = StyleSheet.create({
     letterSpacing: normalize(0.5),
   },
   cancelButton: {
-    height: '100%',
-    position: 'absolute',
     justifyContent: 'center',
-    paddingHorizontal: 8,
+    paddingLeft: 10,
   },
   cancelText: {
     color: '#818181',