github/inji-wallet
1
1
Fork 0
mirror of https://github.com/mosip/inji-wallet.git synced 2026-01-09 13:38:01 -05:00
Code Issues Packages Projects Releases Wiki Activity

[INJIMOB-3633] fix search bar clear icon not apperaing (#2133)

Browse Source 
Signed-off-by: Abhishek Paul <paul.apaul.abhishek.ap@gmail.com>
This commit is contained in:
abhip2565
2025-11-13 18:37:47 +05:30
committed by GitHub
parent d8036c871d
commit 6a202b11af
4 changed files with 40 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
components/ui/SearchBar.tsx
View File

@@ -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"

16
components/ui/themes/DefaultTheme.ts
View File

@@ -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({

16
components/ui/themes/PurpleTheme.ts
View File

@@ -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({