seach users modal

src/screens/InAppScreens/MessagesScreen/Components/SearchUsersModal.tsx

@@ -1,7 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import {
   View,
-  TextInput,
   Text,
   Image,
   TouchableOpacity,
@@ -9,7 +8,7 @@ import {
   ActivityIndicator,
   Platform
 } from 'react-native';
-import ActionSheet from 'react-native-actions-sheet';
+import ActionSheet, { SheetManager } from 'react-native-actions-sheet';
 import { FlashList } from '@shopify/flash-list';
 import { storage, StoreType } from 'src/storage';
 import { usePostSearchUsers } from '@api/chat';
@@ -17,6 +16,10 @@ import { API_HOST } from 'src/constants';
 import { Colors } from 'src/theme';
 import { useNavigation } from '@react-navigation/native';
 import { NAVIGATION_PAGES } from 'src/types';
+import { getFontSize } from 'src/utils';
+import { AvatarWithInitials, Input } from 'src/components';
+
+import SearchIcon from 'assets/icons/search.svg';
 
 const SearchModal = () => {
   const navigation = useNavigation();
@@ -33,7 +36,8 @@ const SearchModal = () => {
   const renderItem = ({ item }: { item: any }) => (
     <TouchableOpacity
       style={styles.itemContainer}
-      onPress={() =>
+      onPress={() => {
+        SheetManager.hide('search-modal');
         navigation.navigate(
           ...([
             NAVIGATION_PAGES.CHAT,
@@ -43,10 +47,20 @@ const SearchModal = () => {
               avatar: item.avatar
             }
           ] as never)
-        )
-      }
+        );
+      }}
     >
-      <Image source={{ uri: API_HOST + item.avatar }} style={styles.avatar} />
+      {item.avatar ? (
+        <Image source={{ uri: API_HOST + item.avatar }} style={styles.avatar} />
+      ) : (
+        <AvatarWithInitials
+          text={`${item.first_name[0] ?? ''}${item.last_name[0] ?? ''}`}
+          flag={API_HOST + item.homebase_flag}
+          size={28}
+          fontSize={12}
+        />
+      )}
+
       <View style={styles.textContainer}>
         <Text style={styles.name}>
           {item.first_name} {item.last_name}
@@ -65,17 +79,18 @@ const SearchModal = () => {
       indicatorStyle={{ backgroundColor: 'transparent' }}
     >
       <View style={styles.container}>
-        <TextInput
-          style={styles.searchInput}
-          placeholder="Search nomads"
-          value={searchQuery}
-          onChangeText={(text) => {
+        <Input
+          inputMode={'search'}
+          placeholder={'Search nomads'}
+          onChange={(text) => {
             setSearchQuery(text);
           }}
+          value={searchQuery}
+          icon={<SearchIcon fill={'#C8C8C8'} width={14} height={14} />}
         />
 
         {isFetching ? (
-          <ActivityIndicator size="large" color="#0000ff" />
+          <ActivityIndicator size="large" color={Colors.DARK_BLUE} />
         ) : (
           <View style={{ flex: 1 }}>
             <FlashList
@@ -104,7 +119,8 @@ const styles = StyleSheet.create({
     height: '80%',
     borderTopLeftRadius: 15,
     borderTopRightRadius: 15,
-    paddingHorizontal: 16
+    paddingHorizontal: 16,
+    paddingVertical: 12
   },
   container: {
     backgroundColor: 'white',
@@ -122,24 +138,23 @@ const styles = StyleSheet.create({
   itemContainer: {
     flexDirection: 'row',
     alignItems: 'center',
-    paddingVertical: 10,
-    borderBottomColor: '#ccc',
-    borderBottomWidth: 1
+    paddingVertical: 12,
+    gap: 8
   },
   avatar: {
-    width: 48,
-    height: 48,
-    borderRadius: 24,
+    width: 28,
+    height: 28,
+    borderRadius: 14,
     borderWidth: 1,
-    borderColor: Colors.FILL_LIGHT,
-    marginRight: 15
+    borderColor: Colors.FILL_LIGHT
   },
   textContainer: {
     flex: 1
   },
   name: {
-    fontSize: 16,
-    fontWeight: 'bold'
+    fontSize: getFontSize(14),
+    color: Colors.DARK_BLUE,
+    fontFamily: 'montserrat-700'
   }
 });
 

src/screens/InAppScreens/MessagesScreen/index.tsx

@@ -1,6 +1,12 @@
 import React, { useState, useEffect, useRef, useCallback } from 'react';
 import { View, Text, TouchableOpacity, Image, Platform, TouchableHighlight } from 'react-native';
-import { HorizontalTabView, Input, PageWrapper, WarningModal } from 'src/components';
+import {
+  AvatarWithInitials,
+  HorizontalTabView,
+  Input,
+  PageWrapper,
+  WarningModal
+} from 'src/components';
 import { NAVIGATION_PAGES } from 'src/types';
 import { useFocusEffect, useNavigation } from '@react-navigation/native';
 
@@ -138,7 +144,20 @@ const MessagesScreen = () => {
           underlayColor={Colors.FILL_LIGHT}
         >
           <View style={styles.chatItem}>
-            <Image source={{ uri: API_HOST + item.avatar }} style={styles.avatar} />
+            {item.avatar ? (
+              <Image source={{ uri: API_HOST + item.avatar }} style={styles.avatar} />
+            ) : (
+              <AvatarWithInitials
+                text={
+                  item.name
+                    .split(' ')
+                    .map((n) => n[0])
+                    .join('') ?? ''
+                }
+                flag={API_HOST + item?.flag}
+                size={54}
+              />
+            )}
 
             <View style={{ flex: 1, gap: 6 }}>
               <View style={[styles.rowContainer, { alignItems: 'center' }]}>