From 0b053937ac70bff6ef31425d20091800f5244d54 Mon Sep 17 00:00:00 2001
From: Shravya Ramesh <shravs1208@gmail.com>
Date: Thu, 20 May 2021 10:09:16 -0700
Subject: Use modified search bar for TagSelection

---
 src/screens/moments/TagSelection.tsx | 57 ++++++++++++++++++++++++++----------
 1 file changed, 42 insertions(+), 15 deletions(-)

(limited to 'src')

diff --git a/src/screens/moments/TagSelection.tsx b/src/screens/moments/TagSelection.tsx
index 4d1f664e..d087591b 100644
--- a/src/screens/moments/TagSelection.tsx
+++ b/src/screens/moments/TagSelection.tsx
@@ -1,13 +1,26 @@
-import {useNavigation} from '@react-navigation/native';
+import {useNavigation} from '@react-navigation/core';
+import {RouteProp} from '@react-navigation/native';
 import React, {useEffect, useState} from 'react';
-import {Keyboard, SafeAreaView, StyleSheet} from 'react-native';
+import {
+  SafeAreaView,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
 import {FlatList} from 'react-native-gesture-handler';
-import {TaggUserSelectionCell} from '../../components';
+import {MainStackParams} from '../../routes';
+import BackIcon from '../../assets/icons/back-arrow.svg';
+import {SearchBar, TaggUserSelectionCell} from '../../components';
 import {SEARCH_ENDPOINT_MESSAGES} from '../../constants';
 import {loadSearchResults} from '../../services';
 import {ProfilePreviewType} from '../../types';
-import {loadTaggUserSuggestions, SCREEN_HEIGHT} from '../../utils';
-import {ChatSearchBar} from '../chat';
+import {
+  loadTaggUserSuggestions,
+  normalize,
+  SCREEN_HEIGHT,
+  SCREEN_WIDTH,
+} from '../../utils';
 
 type TagSelectionRouteProps = RouteProp<MainStackParams, 'TagSelection'>;
 interface TagSelectionProps {
@@ -103,15 +116,15 @@ const TagSelection: React.FC<TagSelectionProps> = ({route}) => {
 
   return (
     <SafeAreaView style={styles.safeAreaView}>
-      <ChatSearchBar
-        onCancel={handleCancel}
-        onChangeText={setQuery}
-        onBlur={handleBlur}
-        onFocus={handleFocus}
-        value={query}
-        searching={searching}
-        placeholder={''}
-      />
+      <View style={styles.searchBarContainer}>
+        <SearchBar
+          onChangeText={setQuery}
+          onFocus={() => {
+            setSearching(true);
+          }}
+          value={query}
+        />
+      </View>
       {users && (
         <FlatList
           data={users}
@@ -132,5 +145,19 @@ const TagSelection: React.FC<TagSelectionProps> = ({route}) => {
 export default TagSelection;
 
 const styles = StyleSheet.create({
-  safeAreaView: {backgroundColor: 'white', height: SCREEN_HEIGHT},
+  searchBarContainer: {
+    width: SCREEN_WIDTH * 0.9,
+    alignSelf: 'flex-end',
+    marginTop: 10,
+  },
+  searchContainer: {
+    alignSelf: 'center',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    width: '100%',
+    height: normalize(42),
+    alignItems: 'center',
+    marginBottom: '3%',
+    marginHorizontal: 10,
+  },
 });
-- 
cgit v1.2.3-70-g09d2