1 files changed, 36 insertions, 57 deletions
diff --git a/src/screens/profile/InviteFriendsScreen.tsx b/src/screens/profile/InviteFriendsScreen.tsx
index bf91e8f3..d6effe02 100644
--- a/src/screens/profile/InviteFriendsScreen.tsx
+++ b/src/screens/profile/InviteFriendsScreen.tsx
@@ -9,14 +9,12 @@ import {
   StatusBar,
   StyleSheet,
   Text,
-  TextInput,
   TouchableWithoutFeedback,
   View,
 } from 'react-native';
 import {checkPermission} from 'react-native-contacts';
-import Animated from 'react-native-reanimated';
-import Icon from 'react-native-vector-icons/Feather';
-import {TabsGradient} from '../../components';
+import {TAGG_LIGHT_BLUE} from '../../constants';
+import {SearchBar, TabsGradient} from '../../components';
 import {InviteFriendTile} from '../../components/friends';
 import {MainStackParams} from '../../routes';
 import {usersFromContactsService} from '../../services/UserFriendsService';
@@ -30,7 +28,6 @@ import {
   SCREEN_WIDTH,
   StatusBarHeight,
 } from '../../utils';
-const AnimatedIcon = Animated.createAnimatedComponent(Icon);
 
 export type InviteContactType = {
   firstName: string;
@@ -176,32 +173,13 @@ const InviteFriendsScreen: React.FC<InviteFriendsScreenProps> = ({}) => {
               </Text>
             </View>
             <View style={styles.container}>
-              <Animated.View style={styles.inputContainer}>
-                <AnimatedIcon
-                  name="search"
-                  color={'#7E7E7E'}
-                  size={16}
-                  style={styles.searchIcon}
-                />
-                <TextInput
-                  style={[styles.input]}
-                  placeholderTextColor={'#828282'}
-                  clearButtonMode="while-editing"
-                  autoCapitalize="none"
-                  autoCorrect={false}
-                  onChangeText={(text) => {
-                    setQuery(text.toLowerCase());
-                  }}
-                  onBlur={() => {
-                    Keyboard.dismiss();
-                  }}
-                  onEndEditing={() => {
-                    Keyboard.dismiss();
-                  }}
-                  value={query}
-                  placeholder={'Search'}
-                />
-              </Animated.View>
+              <SearchBar
+                onChangeText={setQuery}
+                onBlur={() => {
+                  Keyboard.dismiss();
+                }}
+                value={query}
+              />
             </View>
             <View
               style={[
@@ -261,43 +239,44 @@ const styles = StyleSheet.create({
     marginBottom: '5%',
   },
   container: {
+    width: '100%',
+    height: normalize(42),
+    marginBottom: '3%',
+  },
+  ppContainer: {
     alignSelf: 'center',
     flexDirection: 'row',
     justifyContent: 'space-between',
     width: '100%',
     height: normalize(42),
     alignItems: 'center',
-    marginBottom: '3%',
+    marginBottom: '5%',
     marginHorizontal: 10,
   },
-  inputContainer: {
-    flexGrow: 1,
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: 8,
-    marginHorizontal: '3%',
-    borderRadius: 20,
-    backgroundColor: '#F0F0F0',
-    height: 34,
-  },
-  searchIcon: {
-    marginRight: '5%',
-  },
-  input: {
-    flex: 1,
-    fontSize: normalize(16),
-    color: '#000',
-    letterSpacing: normalize(0.5),
-  },
-  cancelButton: {
+  friend: {
+    alignSelf: 'center',
     height: '100%',
-    position: 'absolute',
+  },
+  addFriendButton: {
+    alignSelf: 'center',
     justifyContent: 'center',
-    paddingHorizontal: 8,
+    alignItems: 'center',
+    width: 82,
+    height: 25,
+    borderColor: TAGG_LIGHT_BLUE,
+    borderWidth: 2,
+    borderRadius: 2,
+    padding: 0,
+    backgroundColor: TAGG_LIGHT_BLUE,
   },
-  cancelText: {
-    color: '#818181',
-    fontWeight: '500',
+  addFriendButtonTitle: {
+    color: 'white',
+    padding: 0,
+    fontSize: normalize(11),
+    fontWeight: '700',
+    lineHeight: normalize(13.13),
+    letterSpacing: normalize(0.6),
+    paddingHorizontal: '3.8%',
   },
 });