1 files changed, 112 insertions, 0 deletions
diff --git a/src/screens/chat/ChatSearchBar.tsx b/src/screens/chat/ChatSearchBar.tsx
new file mode 100644
index 00000000..4916ec45
--- /dev/null
+++ b/src/screens/chat/ChatSearchBar.tsx
@@ -0,0 +1,112 @@
+import React from 'react';
+import {
+  Keyboard,
+  NativeSyntheticEvent,
+  StyleSheet,
+  Text,
+  TextInput,
+  TextInputProps,
+  TextInputSubmitEditingEventData,
+  TouchableOpacity,
+  View,
+  ViewStyle,
+} from 'react-native';
+import {normalize} from 'react-native-elements';
+import Animated, {useAnimatedStyle} from 'react-native-reanimated';
+
+interface SearchBarProps extends TextInputProps {
+  onCancel: () => void;
+  animationProgress: Animated.SharedValue<number>;
+  searching: boolean;
+  placeholder: string;
+}
+const ChatSearchBar: React.FC<SearchBarProps> = ({
+  onFocus,
+  onBlur,
+  onChangeText,
+  value,
+  onCancel,
+  searching,
+  animationProgress,
+  onLayout,
+  placeholder,
+}) => {
+  const handleSubmit = (
+    e: NativeSyntheticEvent<TextInputSubmitEditingEventData>,
+  ) => {
+    e.preventDefault();
+    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}>
+        <Animated.View style={styles.searchTextContainer}>
+          <Text style={styles.searchTextStyes}>To:</Text>
+        </Animated.View>
+        <TextInput
+          style={[styles.input]}
+          placeholderTextColor={'#828282'}
+          onSubmitEditing={handleSubmit}
+          clearButtonMode="always"
+          autoCapitalize="none"
+          autoCorrect={false}
+          {...{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>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    height: 40,
+    paddingHorizontal: 20,
+    flexDirection: 'row',
+    zIndex: 2,
+  },
+  searchTextContainer: {marginHorizontal: 12},
+  searchTextStyes: {fontWeight: 'bold', fontSize: 14, lineHeight: 17},
+  inputContainer: {
+    flexGrow: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 8,
+    borderRadius: 20,
+    backgroundColor: '#F0F0F0',
+  },
+  searchIcon: {
+    marginRight: 8,
+  },
+  input: {
+    flex: 1,
+    fontSize: 16,
+    color: '#000',
+    letterSpacing: normalize(0.5),
+  },
+  cancelButton: {
+    height: '100%',
+    position: 'absolute',
+    justifyContent: 'center',
+    paddingHorizontal: 8,
+  },
+  cancelText: {
+    color: '#818181',
+    fontWeight: '500',
+  },
+});
+
+export default ChatSearchBar;