1 files changed, 41 insertions, 24 deletions
diff --git a/src/components/search/SearchBar.tsx b/src/components/search/SearchBar.tsx
index dce1b40c..4dde22f0 100644
--- a/src/components/search/SearchBar.tsx
+++ b/src/components/search/SearchBar.tsx
@@ -13,6 +13,7 @@ import {
 import Animated from 'react-native-reanimated';
 import Icon from 'react-native-vector-icons/Feather';
 import {normalize} from 'react-native-elements';
+import {SCREEN_WIDTH} from '../../utils';
 
 const AnimatedIcon = Animated.createAnimatedComponent(Icon);
 
@@ -36,31 +37,36 @@ const SearchBar: React.FC<SearchBarProps> = ({
   };
 
   return (
-    <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 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>
-    </View>
+      <Text style={styles.helperText}>
+        Try searching for "trending on tagg"
+      </Text>
+    </>
   );
 };
 
@@ -100,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;