Created new search screen

1 files changed, 15 insertions, 31 deletions

diff --git a/src/components/search/SearchBar.tsx b/src/components/search/SearchBar.tsx
index 3f666ef0..dce1b40c 100644
--- a/src/components/search/SearchBar.tsx
+++ b/src/components/search/SearchBar.tsx
@@ -10,14 +10,9 @@ import {
   NativeSyntheticEvent,
   TextInputSubmitEditingEventData,
 } from 'react-native';
-import Animated, {
-  interpolate,
-  interpolateColors,
-} from 'react-native-reanimated';
-import {SCREEN_HEIGHT} from '../../utils';
+import Animated from 'react-native-reanimated';
 import Icon from 'react-native-vector-icons/Feather';
-
-const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);
+import {normalize} from 'react-native-elements';
 
 const AnimatedIcon = Animated.createAnimatedComponent(Icon);
 
@@ -31,21 +26,8 @@ const SearchBar: React.FC<SearchBarProps> = ({
   onChangeText,
   value,
   onCancel,
-  top,
   style,
 }) => {
-  const opacity: Animated.Node<number> = interpolate(top, {
-    inputRange: [-SCREEN_HEIGHT, 0],
-    outputRange: [0, 1],
-  });
-  const marginRight: Animated.Node<number> = interpolate(top, {
-    inputRange: [-SCREEN_HEIGHT, 0],
-    outputRange: [0, 57],
-  });
-  const color: Animated.Node<number> = interpolateColors(top, {
-    inputRange: [-SCREEN_HEIGHT, 0],
-    outputColorRange: ['#fff', '#000'],
-  });
   const handleSubmit = (
     e: NativeSyntheticEvent<TextInputSubmitEditingEventData>,
   ) => {
@@ -55,17 +37,17 @@ const SearchBar: React.FC<SearchBarProps> = ({
 
   return (
     <View style={[styles.container, style]}>
-      <Animated.View style={[styles.inputContainer, {borderColor: color}]}>
+      <Animated.View style={[styles.inputContainer]}>
         <AnimatedIcon
           name="search"
-          color={color}
+          color={'#7E7E7E'}
           size={25}
           style={styles.searchIcon}
         />
-        <AnimatedTextInput
-          style={[styles.input, {color}]}
-          placeholder={'Search...'}
-          placeholderTextColor={'#fff'}
+        <TextInput
+          style={[styles.input]}
+          placeholder={'Search'}
+          placeholderTextColor={'#828282'}
           onSubmitEditing={handleSubmit}
           clearButtonMode="while-editing"
           autoCapitalize="none"
@@ -73,11 +55,11 @@ const SearchBar: React.FC<SearchBarProps> = ({
           {...{value, onChangeText, onFocus, onBlur}}
         />
       </Animated.View>
-      <Animated.View style={{opacity, marginRight}}>
+      <View style={styles.cancelButtonView}>
         <TouchableOpacity style={styles.cancelButton} onPress={onCancel}>
           <Text style={styles.cancelText}>Cancel</Text>
         </TouchableOpacity>
-      </Animated.View>
+      </View>
     </View>
   );
 };
@@ -86,6 +68,7 @@ const styles = StyleSheet.create({
   container: {
     height: 40,
     flexDirection: 'row',
+    justifyContent: 'center',
     alignItems: 'stretch',
     zIndex: 2,
   },
@@ -94,9 +77,8 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     paddingHorizontal: 8,
-    borderWidth: 1.5,
     borderRadius: 20,
-    backgroundColor: '#fff3',
+    backgroundColor: '#F0F0F0',
   },
   searchIcon: {
     marginRight: 8,
@@ -104,8 +86,10 @@ const styles = StyleSheet.create({
   input: {
     flex: 1,
     fontSize: 16,
-    color: '#fff',
+    color: '#828282',
+    letterSpacing: normalize(0.5),
   },
+  cancelButtonView: {width: 70, flexDirection: 'row', justifyContent: 'center'},
   cancelButton: {
     position: 'absolute',
     height: '100%',