Merge pull request #1175 from andrew-bierman/Fix-native-search-ui

andrew-bierman · Aug 21, 2024 · 3dc7712 · 3dc7712
2 parents 00b99db + 4a38282
commit 3dc7712
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 7 deletions.
diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/search.tsx b/apps/expo/app/(app)/(drawer)/(tabs)/search.tsx
@@ -63,7 +63,7 @@ export default function Search() {
     <RStack
       style={{
         paddingTop: 24,
-        backgroundColor: currentTheme.colors.white,
+        backgroundColor: currentTheme.colors.background,
       }}
     >
       {Platform.OS === 'web' && (
@@ -80,7 +80,7 @@ export default function Search() {
           // https://reactnavigation.org/docs/headers#replacing-the-title-with-a-custom-component
         }}
       />
-      <View style={{ width: '100%' }}>
+      <View style={{ width: '100%', height: '100%' }}>
         <PlacesAutocomplete
           onSelect={handleSearchSelect}
           placeholder="Search for a place"

diff --git a/packages/app/components/PlacesAutocomplete/PlacesAutocomplete.tsx b/packages/app/components/PlacesAutocomplete/PlacesAutocomplete.tsx
@@ -47,7 +47,9 @@ const PlaceItem = ({ item }: any) => {
   const { currentTheme } = useTheme();
   return (
     <RStack style={{ flexDirection: 'row' }}>
-      <RText fontWeight="400">{item.properties.name}</RText>
+      <RText fontWeight="400" color="red">
+        {item.properties.name}
+      </RText>
       <RText opacity={100} textTransform={'capitalize'}>
         {item.properties.osm_value}
       </RText>

diff --git a/packages/app/components/SearchInput/SearchInput.tsx b/packages/app/components/SearchInput/SearchInput.tsx
@@ -169,20 +169,20 @@ export const SearchInput = forwardRef<TextInput, SearchInputProps>(
           minWidth="100%"
           alignSelf="center"
           position="relative"
-          backgroundColor={currentTheme.colors.white}
+          backgroundColor={currentTheme.colors.background}
           borderRadius={8}
         >
           <RStack
             flexDirection="row"
             alignItems="center"
             borderBottomWidth={1}
-            borderColor={currentTheme.colors.background}
+            borderColor={currentTheme.colors.border}
             padding={4}
           >
             <MaterialCommunityIcons
               name="magnify"
               size={24}
-              color={currentTheme.colors.background}
+              color={currentTheme.colors.text}
               style={{ marginLeft: 10 }}
             />
             <RInput
@@ -216,7 +216,7 @@ export const SearchInput = forwardRef<TextInput, SearchInputProps>(
                 <MaterialIcons
                   name="close"
                   size={24}
-                  color={currentTheme.colors.background}
+                  color={currentTheme.colors.text}
                 />
               </RIconButton>
             )}