From 6a202b11afe6f36fc16df6d03e6a3f82b8a6c729 Mon Sep 17 00:00:00 2001
From: abhip2565 <paul.apaul.abhishek.AP@gmail.com>
Date: Thu, 13 Nov 2025 18:37:47 +0530
Subject: [PATCH] [INJIMOB-3633] fix search bar clear icon not apperaing
 (#2133)

Signed-off-by: Abhishek Paul <paul.apaul.abhishek.ap@gmail.com>
---
 components/ui/SearchBar.tsx          | 22 ++++++++++++++++++----
 components/ui/themes/DefaultTheme.ts | 16 +++++++++++-----
 components/ui/themes/PurpleTheme.ts  | 16 +++++++++++-----
 screens/Issuers/IssuersScreen.tsx    | 13 -------------
 4 files changed, 40 insertions(+), 27 deletions(-)

diff --git a/components/ui/SearchBar.tsx b/components/ui/SearchBar.tsx
index 556c5b41..37c16911 100644
--- a/components/ui/SearchBar.tsx
+++ b/components/ui/SearchBar.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
-import {TextInput} from 'react-native';
-import {Icon} from 'react-native-elements';
-import {Row} from './Layout';
-import {Theme} from './styleUtils';
+import { TextInput, TouchableOpacity } from 'react-native';
+import { Icon } from 'react-native-elements';
+import { Row } from './Layout';
+import { Theme } from './styleUtils';
 
 export const SearchBar = ({
   searchIconTestID,
@@ -27,6 +27,20 @@ export const SearchBar = ({
         onLayout={onLayout}
         editable={editable ?? true}
       />
+
+      {search?.length > 0 && (
+        <TouchableOpacity
+          onPress={() => onChangeText('')}
+          style={Theme.SearchBarStyles.clearIcon}>
+          <Icon
+            testID='clearingIssuerSearchIcon'
+            name="close"
+            type="material"
+            color={Theme.Colors.SearchIcon}
+            size={22}
+          />
+        </TouchableOpacity>
+      )}
       <Icon
         testID={searchIconTestID}
         name="search"
diff --git a/components/ui/themes/DefaultTheme.ts b/components/ui/themes/DefaultTheme.ts
index fceff154..9707acc9 100644
--- a/components/ui/themes/DefaultTheme.ts
+++ b/components/ui/themes/DefaultTheme.ts
@@ -1130,10 +1130,16 @@ export const DefaultTheme = {
     searchBarContainer: {
       alignItems: 'center',
     },
+    clearIcon: {
+      position: 'absolute',
+      right: 45, 
+      width: 40,
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
     vcSearchBarContainer: {},
     innerSearchBarContainer: {
       flexDirection: 'row',
-      justifyContent: 'space-between',
       alignItems: 'center',
       width: '100%',
       backgroundColor: Colors.White,
@@ -1150,17 +1156,17 @@ export const DefaultTheme = {
       paddingLeft: 15,
     },
     searchIcon: {
+      width: 25,
       justifyContent: 'center',
-      height: Dimensions.get('window').height * 0.055,
-      width: Dimensions.get('window').width * 0.1,
-      fontFamily: 'Montserrat_500Medium',
+      alignItems: 'center',
     },
     searchBar: {
       textAlign: I18nManager.isRTL ? 'right' : 'left',
       height: Dimensions.get('window').height * 0.055,
-      width: Dimensions.get('window').width * 0.75,
+      flex: 1,
       fontFamily: 'Montserrat_500Medium',
       fontSize: 17,
+      marginRight: 40
     },
   }),
   ButtonStyles: StyleSheet.create({
diff --git a/components/ui/themes/PurpleTheme.ts b/components/ui/themes/PurpleTheme.ts
index 4fb2e42c..6f9391c6 100644
--- a/components/ui/themes/PurpleTheme.ts
+++ b/components/ui/themes/PurpleTheme.ts
@@ -1138,10 +1138,16 @@ export const PurpleTheme = {
     searchBarContainer: {
       alignItems: 'center',
     },
+    clearIcon: {
+      position: 'absolute',
+      right: 45, 
+      width: 40,
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
     vcSearchBarContainer: {},
     innerSearchBarContainer: {
       flexDirection: 'row',
-      justifyContent: 'space-between',
       alignItems: 'center',
       width: '100%',
       backgroundColor: Colors.White,
@@ -1158,17 +1164,17 @@ export const PurpleTheme = {
       paddingLeft: 15,
     },
     searchIcon: {
+      width: 25,
       justifyContent: 'center',
-      height: Dimensions.get('window').height * 0.055,
-      width: Dimensions.get('window').width * 0.1,
-      fontFamily: 'Montserrat_500Medium',
+      alignItems: 'center',
     },
     searchBar: {
       textAlign: I18nManager.isRTL ? 'right' : 'left',
       height: Dimensions.get('window').height * 0.055,
-      width: Dimensions.get('window').width * 0.75,
+      flex: 1,
       fontFamily: 'Montserrat_500Medium',
       fontSize: 17,
+      marginRight: 40
     },
   }),
   ButtonStyles: StyleSheet.create({
diff --git a/screens/Issuers/IssuersScreen.tsx b/screens/Issuers/IssuersScreen.tsx
index 87539916..5cd84eae 100644
--- a/screens/Issuers/IssuersScreen.tsx
+++ b/screens/Issuers/IssuersScreen.tsx
@@ -311,19 +311,6 @@ export const IssuersScreen: React.FC<
               onChangeText={filterIssuers}
               onLayout={() => filterIssuers('')}
             />
-            {clearSearchIcon && (
-              <Pressable
-                onPress={clearSearchText}
-                style={Theme.SearchBarStyles.clearSearch}>
-                <Icon
-                  testID="clearingIssuerSearchIcon"
-                  name="circle-with-cross"
-                  type="entypo"
-                  size={18}
-                  color={Theme.Colors.DetailsLabel}
-                />
-              </Pressable>
-            )}
           </Row>
           <Text
             testID="issuersScreenDescription"