Merge pull request #283 from shravyaramesh/search-revamp-2

[TMA 661/662] Created new search screen

1 files changed, 49 insertions, 48 deletions

diff --git a/src/components/search/SearchBar.tsx b/src/components/search/SearchBar.tsx
index 3f666ef0..be0eecc7 100644
--- a/src/components/search/SearchBar.tsx
+++ b/src/components/search/SearchBar.tsx
@@ -10,14 +10,10 @@ 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';
+import {SCREEN_WIDTH} from '../../utils';
 
 const AnimatedIcon = Animated.createAnimatedComponent(Icon);
 
@@ -31,21 +27,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>,
   ) => {
@@ -54,31 +37,36 @@ const SearchBar: React.FC<SearchBarProps> = ({
   };
 
   return (
-    <View style={[styles.container, style]}>
-      <Animated.View style={[styles.inputContainer, {borderColor: color}]}>
-        <AnimatedIcon
-          name="search"
-          color={color}
-          size={25}
-          style={styles.searchIcon}
-        />
-        <AnimatedTextInput
-          style={[styles.input, {color}]}
-          placeholder={'Search...'}
-          placeholderTextColor={'#fff'}
-          onSubmitEditing={handleSubmit}
-          clearButtonMode="while-editing"
-          autoCapitalize="none"
-          autoCorrect={false}
-          {...{value, onChangeText, onFocus, onBlur}}
-        />
-      </Animated.View>
-      <Animated.View style={{opacity, marginRight}}>
-        <TouchableOpacity style={styles.cancelButton} onPress={onCancel}>
-          <Text style={styles.cancelText}>Cancel</Text>
-        </TouchableOpacity>
-      </Animated.View>
-    </View>
+    <>
+      <View style={[styles.container, style]}>
+        <Animated.View style={[styles.inputContainer]}>
+          <AnimatedIcon
+            name="search"
+            color={'#7E7E7E'}
+            size={25}
+            style={styles.searchIcon}
+          />
+          <TextInput
+            style={[styles.input]}
+            placeholder={'Search'}
+            placeholderTextColor={'#828282'}
+            onSubmitEditing={handleSubmit}
+            clearButtonMode="while-editing"
+            autoCapitalize="none"
+            autoCorrect={false}
+            {...{value, onChangeText, onFocus, onBlur}}
+          />
+        </Animated.View>
+        <View style={styles.cancelButtonView}>
+          <TouchableOpacity style={styles.cancelButton} onPress={onCancel}>
+            <Text style={styles.cancelText}>Cancel</Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+      <Text style={styles.helperText}>
+        Try searching for "trending on tagg"
+      </Text>
+    </>
   );
 };
 
@@ -86,6 +74,7 @@ const styles = StyleSheet.create({
   container: {
     height: 40,
     flexDirection: 'row',
+    justifyContent: 'center',
     alignItems: 'stretch',
     zIndex: 2,
   },
@@ -94,9 +83,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 +92,10 @@ const styles = StyleSheet.create({
   input: {
     flex: 1,
     fontSize: 16,
-    color: '#fff',
+    color: '#000',
+    letterSpacing: normalize(0.5),
   },
+  cancelButtonView: {width: 70, flexDirection: 'row', justifyContent: 'center'},
   cancelButton: {
     position: 'absolute',
     height: '100%',
@@ -116,6 +106,17 @@ const styles = StyleSheet.create({
     color: '#818181',
     fontWeight: '600',
   },
+  helperText: {
+    fontWeight: '400',
+    fontSize: 14,
+    lineHeight: normalize(16.71),
+    color: '#828282',
+    marginBottom: '2%',
+    marginHorizontal: '2.5%',
+    marginTop: '1%',
+    textAlign: 'center',
+    width: SCREEN_WIDTH * 0.74,
+  },
 });
 
 export default SearchBar;