header refactor

src/Search/SearchHeader.tsx

@@ -1,9 +1,9 @@
 import {StackNavigationOptions} from '@react-navigation/stack'
 import React from 'react'
-import {StyleSheet, TouchableOpacity, TouchableOpacityProps} from 'react-native'
+import {TextInput, TouchableOpacity, TouchableOpacityProps} from 'react-native'
 
 import {Icon} from '../components'
-import {SearchBar} from './SearchBar'
+import {defaultStackNavigationOptionsV2} from '../navigation'
 import {useSearch} from './SearchContext'
 
 export const useSearchHeaderOptions = ({placeHolderText, title}) => {
@@ -16,47 +16,39 @@ export const useSearchHeaderOptions = ({placeHolderText, title}) => {
 
   const searchHeaderOptions: StackNavigationOptions = searchVisible
     ? {
-        headerTitleContainerStyle: styles.headerTitleContainer,
-        headerTitle: () => <SearchHeader placeholder={placeHolderText} onClose={handleSearchClose} />,
-        headerLeftContainerStyle: styles.disableFlex,
-        headerLeft: () => null,
-        headerRightContainerStyle: styles.disableFlex,
-        headerRight: () => null,
+        ...defaultStackNavigationOptionsV2,
+        headerTitle: () => <SearchHeader placeholder={placeHolderText} />,
+        headerRight: () => <CloseButton onPress={handleSearchClose} />,
+        headerTitleContainerStyle: {
+          flex: 1,
+        },
+        headerTitleAlign: 'left',
+        headerBackTitleVisible: false,
       }
     : {
-        headerTitleContainerStyle: styles.headerTitleContainer,
+        ...defaultStackNavigationOptionsV2,
         title: title,
         headerRight: () => <SearchButton onPress={() => setSearchVisible(true)} />,
-        headerRightContainerStyle: {
-          ...styles.disableFlex,
-          paddingHorizontal: 16,
-          position: 'absolute',
-          right: 0,
-          bottom: 0,
-          top: 0,
-        },
-        headerLeftContainerStyle: styles.disableFlex,
-        headerLeft: () => null,
+        headerBackTitleVisible: false,
       }
 
   return {searchHeaderOptions}
 }
 
 interface Props {
   placeholder: string
-  onClose?(): void
 }
 
-export const SearchHeader = ({placeholder, onClose}: Props) => {
-  const {search, searchChanged, clearSearch} = useSearch()
+export const SearchHeader = ({placeholder}: Props) => {
+  const {search, searchChanged} = useSearch()
 
   return (
-    <SearchBar
+    <TextInput
+      autoFocus
+      value={search}
       placeholder={placeholder}
       onChangeText={(search) => searchChanged(search)}
-      value={search}
-      onClearPress={clearSearch}
-      onBackPress={onClose}
+      style={{flex: 1}}
     />
   )
 }
@@ -67,17 +59,8 @@ const SearchButton = (props: TouchableOpacityProps) => (
   </TouchableOpacity>
 )
 
-const styles = StyleSheet.create({
-  disableFlex: {
-    flex: undefined,
-    flexGrow: undefined,
-    flexBasis: undefined,
-    flexShrink: undefined,
-  },
-  headerTitleContainer: {
-    flex: 1,
-    marginHorizontal: undefined,
-    maxWidth: undefined,
-    alignItems: 'center',
-  },
-})
+const CloseButton = (props: TouchableOpacityProps) => (
+  <TouchableOpacity {...props} hitSlop={{top: 100, left: 100, right: 100, bottom: 100}}>
+    <Icon.Cross size={20} />
+  </TouchableOpacity>
+)

src/features/Send/useCases/ListSelectedTokens/AddToken/filterAssets.ts

@@ -0,0 +1,12 @@
+import {TokenInfo} from '../../../../../yoroi-wallets'
+
+export const filterAssets = (assetSearchTerm: string, tokenInfos: TokenInfo[]): TokenInfo[] => {
+  const searchTermLowerCase = assetSearchTerm.toLowerCase()
+  return searchTermLowerCase.length > 0 && tokenInfos.length > 0
+    ? tokenInfos.filter((tokenInfo) => {
+        const name = tokenInfo.ticker?.toLocaleLowerCase() ?? tokenInfo.name?.toLocaleLowerCase() ?? '-'
+        if (name) return name.toLowerCase().includes(searchTermLowerCase)
+        return false
+      })
+    : tokenInfos
+}

src/navigation.ts

@@ -29,19 +29,16 @@ type Guard<Params> = (params: Params | object) => params is Params
 // OPTIONS
 export const defaultStackNavigationOptionsV2: StackNavigationOptions = {
   headerTintColor: COLORS.ERROR_TEXT_COLOR_DARK,
-  headerTitleStyle: {
-    fontSize: 16,
-    fontFamily: 'Rubik-Medium',
-  },
-  headerTitleContainerStyle: {
-    width: '70%',
-    alignItems: 'center',
-  },
   headerStyle: {
     elevation: 0,
     shadowOpacity: 0,
     backgroundColor: COLORS.BACKGROUND_GRAY,
   },
+  headerTitleContainerStyle: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    flex: 1,
+  },
 }
 
 export const defaultStackNavigationOptions: StackNavigationOptions = {
@@ -51,8 +48,8 @@ export const defaultStackNavigationOptions: StackNavigationOptions = {
     shadowOpacity: 0,
   },
   headerTintColor: '#fff',
-  headerTitleAlign: 'center',
   headerBackTitleVisible: false,
+  headerTitleAlign: 'center',
   headerLeftContainerStyle: {
     paddingLeft: Platform.OS === 'ios' ? 8 : undefined,
   },