Merge pull request #389 from IvanIFChen/tma819-new-message-cancel-button

[TMA-819] New message cancel button

1 files changed, 5 insertions, 23 deletions

diff --git a/src/screens/chat/ChatSearchBar.tsx b/src/screens/chat/ChatSearchBar.tsx
index d8aff567..3531111b 100644
--- a/src/screens/chat/ChatSearchBar.tsx
+++ b/src/screens/chat/ChatSearchBar.tsx
@@ -9,14 +9,12 @@ import {
   TextInputSubmitEditingEventData,
   TouchableOpacity,
   View,
-  ViewStyle,
 } from 'react-native';
 import {normalize} from 'react-native-elements';
-import Animated, {useAnimatedStyle} from 'react-native-reanimated';
+import Animated from 'react-native-reanimated';
 
 interface SearchBarProps extends TextInputProps {
   onCancel: () => void;
-  animationProgress: Animated.SharedValue<number>;
   searching: boolean;
   placeholder: string;
 }
@@ -26,7 +24,6 @@ const ChatSearchBar: React.FC<SearchBarProps> = ({
   onChangeText,
   value,
   onCancel,
-  animationProgress,
   onLayout,
   placeholder,
 }) => {
@@ -37,14 +34,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 +50,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 +74,6 @@ const styles = StyleSheet.create({
     borderRadius: 20,
     backgroundColor: '#F0F0F0',
   },
-  searchIcon: {
-    marginRight: 8,
-  },
   input: {
     flex: 1,
     fontSize: 16,
@@ -97,10 +81,8 @@ const styles = StyleSheet.create({
     letterSpacing: normalize(0.5),
   },
   cancelButton: {
-    height: '100%',
-    position: 'absolute',
     justifyContent: 'center',
-    paddingHorizontal: 8,
+    paddingLeft: 10,
   },
   cancelText: {
     color: '#818181',