add searchbar on native screens

andrew-bierman · Dec 26, 2024 · bb0aa44 · bb0aa44
1 parent 37c784a
commit bb0aa44
Show file tree

Hide file tree

Showing 7 changed files with 51 additions and 16 deletions.
diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/about/index.tsx b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/about/index.tsx
@@ -34,9 +34,9 @@ export default function AboutRoute() {
             backgroundColor: currentTheme.colors.background,
           },
           headerTitleStyle: {
-            fontSize: 24,
+            fontSize: 20,
           },
-          headerTintColor: currentTheme.colors.tertiaryBlue,
+          headerTintColor: currentTheme.colors.text,
           // https://reactnavigation.org/docs/headers#adjusting-header-styles
 
           // https://reactnavigation.org/docs/headers#replacing-the-title-with-a-custom-component

diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/maps/index.tsx b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/maps/index.tsx
@@ -2,13 +2,15 @@ import { DrawerToggleButton } from '@react-navigation/drawer';
 import useTheme from 'app/hooks/useTheme';
 import { OfflineMapsScreen } from 'app/modules/map/screens/OfflineMapsScreen';
 import { Stack } from 'expo-router';
+import { placesAutocompleteSearchAtom } from 'app/components/PlacesAutocomplete/usePlacesAutoComplete';
+import { useAtom } from 'jotai';
 import Head from 'expo-router/head';
 import React from 'react';
 import { Platform } from 'react-native';
 
 export default function MapsScreen() {
   const { currentTheme } = useTheme();
-
+  const [searchQuery, setSearchQuery] = useAtom(placesAutocompleteSearchAtom);
   return (
     <>
       {Platform.OS === 'web' && (
@@ -23,14 +25,19 @@ export default function MapsScreen() {
           headerRight: ({ tintColor }) => (
             <DrawerToggleButton tintColor={tintColor} />
           ),
-
+          headerSearchBarOptions: {
+            placeholder: 'Search maps',
+            hideWhenScrolling: false,
+            inputType: 'text',
+            onChangeText: (e) => setSearchQuery(e.nativeEvent.text),
+          },
           headerStyle: {
             backgroundColor: currentTheme.colors.background,
           },
           headerTitleStyle: {
-            fontSize: 24,
+            fontSize: 20,
           },
-          headerTintColor: currentTheme.colors.tertiaryBlue,
+          headerTintColor: currentTheme.colors.text,
           // https://reactnavigation.org/docs/headers#adjusting-header-styles
 
           // https://reactnavigation.org/docs/headers#replacing-the-title-with-a-custom-component

diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/products/index.tsx b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/products/index.tsx
@@ -1,14 +1,16 @@
 import { DrawerToggleButton } from '@react-navigation/drawer';
 import useTheme from 'app/hooks/useTheme';
 import { ProductsScreen } from 'app/modules/item';
+import { placesAutocompleteSearchAtom } from 'app/components/PlacesAutocomplete/usePlacesAutoComplete';
+import { useAtom } from 'jotai';
 import { Stack } from 'expo-router';
 import Head from 'expo-router/head';
 import React from 'react';
 import { Platform } from 'react-native';
 
 export default function ProductsPage() {
   const { currentTheme } = useTheme();
-
+  const [searchQuery, setSearchQuery] = useAtom(placesAutocompleteSearchAtom);
   return (
     <>
       {Platform.OS === 'web' && (
@@ -23,14 +25,20 @@ export default function ProductsPage() {
           headerRight: ({ tintColor }) => (
             <DrawerToggleButton tintColor={tintColor} />
           ),
+          headerSearchBarOptions: {
+            placeholder: 'Search products',
+            hideWhenScrolling: false,
+            inputType: 'text',
+            onChangeText: (e) => setSearchQuery(e.nativeEvent.text),
+          },
 
           headerStyle: {
             backgroundColor: currentTheme.colors.background,
           },
           headerTitleStyle: {
-            fontSize: 24,
+            fontSize: 20,
           },
-          headerTintColor: currentTheme.colors.tertiaryBlue,
+          headerTintColor: currentTheme.colors.text,
           // https://reactnavigation.org/docs/headers#adjusting-header-styles
 
           // https://reactnavigation.org/docs/headers#replacing-the-title-with-a-custom-component

diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/trips/index.tsx b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/trips/index.tsx
@@ -1,10 +1,14 @@
 import React from 'react';
 import { FeedScreen } from 'app/modules/feed';
+import { placesAutocompleteSearchAtom } from 'app/components/PlacesAutocomplete/usePlacesAutoComplete';
+import { useAtom } from 'jotai';
 import { Platform } from 'react-native';
 import { Stack } from 'expo-router';
 import Head from 'expo-router/head';
 
 export default function FeedNav() {
+  const [searchQuery, setSearchQuery] = useAtom(placesAutocompleteSearchAtom);
+
   return (
     <>
       {Platform.OS === 'web' && (
@@ -16,6 +20,12 @@ export default function FeedNav() {
         options={{
           // https://reactnavigation.org/docs/headers#setting-the-header-title
           title: 'Trips',
+          headerSearchBarOptions: {
+            placeholder: 'Search trips',
+            hideWhenScrolling: false,
+            inputType: 'text',
+            onChangeText: (e) => setSearchQuery(e.nativeEvent.text),
+          },
           // https://reactnavigation.org/docs/headers#adjusting-header-styles
 
           // https://reactnavigation.org/docs/headers#replacing-the-title-with-a-custom-component

diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/packs/index.tsx b/apps/expo/app/(app)/(drawer)/(tabs)/packs/index.tsx
@@ -1,13 +1,16 @@
 import { DrawerToggleButton } from '@react-navigation/drawer';
+import { placesAutocompleteSearchAtom } from 'app/components/PlacesAutocomplete/usePlacesAutoComplete';
 import useTheme from 'app/hooks/useTheme';
 import { FeedScreen } from 'app/modules/feed';
 import { Stack } from 'expo-router';
 import Head from 'expo-router/head';
+import { useAtom } from 'jotai';
 import React from 'react';
 import { Platform } from 'react-native';
 
 export default function Packs() {
   const { currentTheme } = useTheme();
+  const [searchQuery, setSearchQuery] = useAtom(placesAutocompleteSearchAtom);
 
   return (
     <>
@@ -20,6 +23,13 @@ export default function Packs() {
         options={{
           // https://reactnavigation.org/docs/headers#setting-the-header-title
           title: 'Packs',
+          headerSearchBarOptions: {
+            placeholder: 'Search packs',
+            hideWhenScrolling: false,
+            inputType: 'text',
+            onChangeText: (e) => setSearchQuery(e.nativeEvent.text),
+          },
+
           headerRight: ({ tintColor }) => (
             <DrawerToggleButton tintColor={tintColor} />
           ),

diff --git a/packages/app/components/layout/Layout.tsx b/packages/app/components/layout/Layout.tsx
@@ -3,10 +3,10 @@ import React from 'react';
 import { Platform, SafeAreaView } from 'react-native';
 import { ScrollView, Stack, YStack } from 'tamagui';
 
-type LayoutProps = {
+interface LayoutProps {
   children: React.ReactNode;
   customStyle?: Record<string, any>;
-};
+}
 
 const Layout: React.FC<LayoutProps> = ({ children, customStyle = {} }) => {
   const { currentTheme } = useTheme();
@@ -16,14 +16,14 @@ const Layout: React.FC<LayoutProps> = ({ children, customStyle = {} }) => {
       <YStack
         flex={1}
         backgroundColor={currentTheme.colors.background}
-        maxWidth={1440}
+        maxWidth={Platform.OS === 'web' ? 1440 : 400}
         margin="auto"
         alignItems="center"
         justifyContent="flex-start"
-        paddingTop={Platform.OS === 'web' ? 20 : '$2'}
+        paddingTop={Platform.OS === 'web' ? 20 : '$1'}
         paddingBottom={Platform.OS !== 'web' ? 44 : undefined}
         paddingHorizontal="$4"
-        marginBottom={Platform.OS === 'web' ? 20 : '$2'}
+        marginBottom={Platform.OS === 'web' ? 20 : '$1'}
         width="100%"
         {...customStyle}
       >

diff --git a/packages/app/screens/about/about.style.tsx b/packages/app/screens/about/about.style.tsx
@@ -20,7 +20,7 @@ const loadStyles = (theme: any) => {
     header: {
       fontSize: 24,
       fontWeight: 'bold',
-      color: currentTheme.colors.tertiaryBlue,
+      color: currentTheme.colors.text,
       marginRight: 10,
     },
     headerDark: {
@@ -83,7 +83,7 @@ const loadStyles = (theme: any) => {
       lineHeight: 28,
       letterSpacing: 1,
       // fontFamily: "sans-serif",
-      color: currentTheme.colors.tertiaryBlue,
+      color: currentTheme.colors.text,
       marginBottom: 20,
     },
     tertiaryBlue: {