Skip to content

Commit

Permalink
Merge pull request #1382 from andrew-bierman/feat/ios-large-titles
Browse files Browse the repository at this point in the history
  • Loading branch information
andrew-bierman authored Dec 22, 2024
2 parents b0747bc + 7165a9a commit 37c784a
Show file tree
Hide file tree
Showing 54 changed files with 2,668 additions and 3,131 deletions.
2 changes: 1 addition & 1 deletion apps/expo/app.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
"slug": "packrat",
"version": "1.1.0",
"orientation": "portrait",
"icon": "./assets/packrat-app-icon.png",
"icon": "./assets/packrat-app-icon-gradient.png",
"userInterfaceStyle": "automatic",
"scheme": "packrat",
"splash": {
Expand Down
103 changes: 5 additions & 98 deletions apps/expo/app/(app)/(drawer)/(tabs)/(stack)/_layout.tsx
Original file line number Diff line number Diff line change
@@ -1,110 +1,17 @@
import { DrawerToggleButton } from '@react-navigation/drawer';
import { useRouterSettings } from 'app/hooks/router';
import { Stack } from 'expo-router';
import React from 'react';
import { View, Text, SafeAreaView, TouchableOpacity } from 'react-native';
import useCustomStyles from 'app/hooks/useCustomStyles';
import { useIsMobileView } from 'app/hooks/common';
import { useNavigate } from 'app/hooks/navigation';
import { useAuthUser } from 'app/modules/auth';
import { Button } from 'tamagui';
import { EvilIcons } from '@expo/vector-icons';
import SVGLogoComponent from 'app/components/logo';
import useTheme from 'app/hooks/useTheme';
import { DrawerActions } from '@react-navigation/native';
import { Slot } from 'expo-router';
import { DrawerToggleButton } from '@react-navigation/drawer';

export default function StackLayout() {
const user = useAuthUser();
const isMobileView = useIsMobileView();
const { currentTheme } = useTheme();
const styles = useCustomStyles(loadStyles);
const navigate = useNavigate();

const { layoutStackScreenOptionsHeaderSettings } = useRouterSettings();
return (
<Stack
screenOptions={{
headerRight: () => <DrawerToggleButton />,
headerTitleStyle: {
fontSize: 24,
},
headerStyle: {
backgroundColor: currentTheme.colors.secondaryBlue,
},
headerTintColor: currentTheme.colors.text,
...layoutStackScreenOptionsHeaderSettings,
headerBlurEffect: 'systemChromeMaterial',
}}
/>
);
}

const loadStyles = (theme) => {
const { currentTheme } = theme;

return {
drawerStyles: {
backgroundColor: currentTheme.colors.background,
},
safeArea: {
backgroundColor: currentTheme.colors.background,
},
container: {
width: '100%',
backgroundColor: currentTheme.colors.background,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
},
header: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
padding: 16,
width: '100%',
},
logoContainer: {
flexDirection: 'row',
alignItems: 'center',
},
logoWrapper: {
marginHorizontal: 10,
},
logoText: {
color: currentTheme.colors.text,
fontSize: 38,
fontWeight: '900',
},
menuBar: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'flex-end',
paddingHorizontal: 16,
height: 60,
},
menuBarItem: {
flexDirection: 'row',
alignItems: 'center',
gap: 8,
paddingHorizontal: 12,
},
menuBarItemText: {
color: currentTheme.colors.text,
fontSize: 18,
},
drawerTrigger: {},
menuBarItemActive: {
// Apply styles for the active item
// ...
},
menuBarItemTextActive: {
// Apply styles for the active item's text
// ...
},
menuBarItemSelected: {
// Apply styles for the selected item
// ...
},
menuBarItemTextSelected: {
// Apply styles for the selected item's text
// ...
},
};
};
12 changes: 6 additions & 6 deletions apps/expo/app/(app)/(drawer)/(tabs)/(stack)/about/index.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import React from 'react';
import { DrawerToggleButton } from '@react-navigation/drawer';
import useTheme from 'app/hooks/useTheme';
import About from 'app/screens/about';
import { Platform, ScrollView, StyleSheet } from 'react-native';
import { Stack } from 'expo-router';
import Head from 'expo-router/head';
import useTheme from 'app/hooks/useTheme';
import { DrawerToggleButton } from '@react-navigation/drawer';
import React from 'react';
import { Platform, StyleSheet } from 'react-native';

/**
* Renders the AboutRoute component.
Expand All @@ -26,8 +26,8 @@ export default function AboutRoute() {
options={{
// https://reactnavigation.org/docs/headers#setting-the-header-title
title: 'About',
headerRight: () => (
<DrawerToggleButton tintColor={currentTheme.colors.tertiaryBlue} />
headerRight: ({ tintColor }) => (
<DrawerToggleButton tintColor={tintColor} />
),

headerStyle: {
Expand Down
10 changes: 5 additions & 5 deletions apps/expo/app/(app)/(drawer)/(tabs)/(stack)/chat.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import { DrawerToggleButton } from '@react-navigation/drawer';
import ChatNative from 'app/components/chat/ChatNative';
import useTheme from 'app/hooks/useTheme';
import { Stack } from 'expo-router';
import Head from 'expo-router/head';
import React from 'react';
import { Platform } from 'react-native';
import ChatNative from 'app/components/chat/ChatNative';
import useTheme from 'app/hooks/useTheme';
import { DrawerToggleButton } from '@react-navigation/drawer';

export default function Chat() {
const { currentTheme } = useTheme();
Expand All @@ -19,8 +19,8 @@ export default function Chat() {
<Stack.Screen
options={{
title: 'Chat',
headerRight: () => (
<DrawerToggleButton tintColor={currentTheme.colors.tertiaryBlue} />
headerRight: ({ tintColor }) => (
<DrawerToggleButton tintColor={tintColor} />
),

headerStyle: {
Expand Down
12 changes: 6 additions & 6 deletions apps/expo/app/(app)/(drawer)/(tabs)/(stack)/items/index.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import React from 'react';
import { DrawerToggleButton } from '@react-navigation/drawer';
import useTheme from 'app/hooks/useTheme';
import { ItemsScreen } from 'app/modules/item';
import { Platform } from 'react-native';
import { Stack } from 'expo-router';
import Head from 'expo-router/head';
import useTheme from 'app/hooks/useTheme';
import { DrawerToggleButton } from '@react-navigation/drawer';
import React from 'react';
import { Platform } from 'react-native';

export default function ItemsPage() {
const { currentTheme } = useTheme();
Expand All @@ -20,8 +20,8 @@ export default function ItemsPage() {
options={{
// https://reactnavigation.org/docs/headers#setting-the-header-title
title: 'Items',
headerRight: () => (
<DrawerToggleButton tintColor={currentTheme.colors.tertiaryBlue} />
headerRight: ({ tintColor }) => (
<DrawerToggleButton tintColor={tintColor} />
),

headerStyle: {
Expand Down
12 changes: 6 additions & 6 deletions apps/expo/app/(app)/(drawer)/(tabs)/(stack)/maps/index.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import React from 'react';
import { DrawerToggleButton } from '@react-navigation/drawer';
import useTheme from 'app/hooks/useTheme';
import { OfflineMapsScreen } from 'app/modules/map/screens/OfflineMapsScreen';
import { Platform } from 'react-native';
import { Stack } from 'expo-router';
import Head from 'expo-router/head';
import useTheme from 'app/hooks/useTheme';
import { DrawerToggleButton } from '@react-navigation/drawer';
import React from 'react';
import { Platform } from 'react-native';

export default function MapsScreen() {
const { currentTheme } = useTheme();
Expand All @@ -20,8 +20,8 @@ export default function MapsScreen() {
options={{
// https://reactnavigation.org/docs/headers#setting-the-header-title
title: 'Maps',
headerRight: () => (
<DrawerToggleButton tintColor={currentTheme.colors.tertiaryBlue} />
headerRight: ({ tintColor }) => (
<DrawerToggleButton tintColor={tintColor} />
),

headerStyle: {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import React from 'react';
import { Platform } from 'react-native';
import { Stack } from 'expo-router';
import Head from 'expo-router/head';
import useTheme from 'app/hooks/useTheme';
import { DrawerToggleButton } from '@react-navigation/drawer';
import useTheme from 'app/hooks/useTheme';
import { PackTemplateDetailsScreen } from 'app/modules/pack-templates';
import { Stack } from 'expo-router';
import Head from 'expo-router/head';
import React from 'react';
import { Platform } from 'react-native';

export default function Pack() {
const { currentTheme } = useTheme();
Expand All @@ -21,8 +21,8 @@ export default function Pack() {
options={{
// https://reactnavigation.org/docs/headers#setting-the-header-title
title: 'Pack Template',
headerRight: () => (
<DrawerToggleButton tintColor={currentTheme.colors.tertiaryBlue} />
headerRight: ({ tintColor }) => (
<DrawerToggleButton tintColor={tintColor} />
),

headerStyle: {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import React from 'react';
import { DrawerToggleButton } from '@react-navigation/drawer';
import useTheme from 'app/hooks/useTheme';
import { FeedScreen } from 'app/modules/feed';
import { Platform } from 'react-native';
import { Stack } from 'expo-router';
import Head from 'expo-router/head';
import useTheme from 'app/hooks/useTheme';
import { DrawerToggleButton } from '@react-navigation/drawer';
import React from 'react';
import { Platform } from 'react-native';

export default function PackTemplates() {
const { currentTheme } = useTheme();
Expand All @@ -20,8 +20,8 @@ export default function PackTemplates() {
options={{
// https://reactnavigation.org/docs/headers#setting-the-header-title
title: 'Pack Templates',
headerRight: () => (
<DrawerToggleButton tintColor={currentTheme.colors.tertiaryBlue} />
headerRight: ({ tintColor }) => (
<DrawerToggleButton tintColor={tintColor} />
),

headerStyle: {
Expand Down
26 changes: 6 additions & 20 deletions apps/expo/app/(app)/(drawer)/(tabs)/(stack)/pack/[id].tsx
Original file line number Diff line number Diff line change
@@ -1,12 +1,10 @@
import React from 'react';
import PackContainer from 'app/components/pack/PackContainer';
import { DrawerToggleButton } from '@react-navigation/drawer';
import useTheme from 'app/hooks/useTheme';
import { PackDetailsScreen } from 'app/modules/pack';
import { DetailsComponent } from 'app/components/details';
import { Platform } from 'react-native';
import { Stack } from 'expo-router';
import Head from 'expo-router/head';
import useTheme from 'app/hooks/useTheme';
import { DrawerToggleButton } from '@react-navigation/drawer';
import React from 'react';
import { Platform } from 'react-native';

export default function Pack() {
const { currentTheme } = useTheme();
Expand All @@ -23,23 +21,11 @@ export default function Pack() {
options={{
// https://reactnavigation.org/docs/headers#setting-the-header-title
title: 'Pack',
headerRight: () => (
<DrawerToggleButton tintColor={currentTheme.colors.tertiaryBlue} />
headerRight: ({ tintColor }) => (
<DrawerToggleButton tintColor={tintColor} />
),

headerStyle: {
backgroundColor: currentTheme.colors.background,
},
headerTitleStyle: {
fontSize: 24,
},
headerTintColor: currentTheme.colors.tertiaryBlue,
// https://reactnavigation.org/docs/headers#adjusting-header-styles

// https://reactnavigation.org/docs/headers#replacing-the-title-with-a-custom-component
}}
/>
{/* <DetailsComponent type='pack'/> */}
<PackDetailsScreen />
</>
);
Expand Down
12 changes: 6 additions & 6 deletions apps/expo/app/(app)/(drawer)/(tabs)/(stack)/products/index.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import React from 'react';
import { DrawerToggleButton } from '@react-navigation/drawer';
import useTheme from 'app/hooks/useTheme';
import { ProductsScreen } from 'app/modules/item';
import { Platform } from 'react-native';
import { Stack } from 'expo-router';
import Head from 'expo-router/head';
import useTheme from 'app/hooks/useTheme';
import { DrawerToggleButton } from '@react-navigation/drawer';
import React from 'react';
import { Platform } from 'react-native';

export default function ProductsPage() {
const { currentTheme } = useTheme();
Expand All @@ -20,8 +20,8 @@ export default function ProductsPage() {
options={{
// https://reactnavigation.org/docs/headers#setting-the-header-title
title: 'Products',
headerRight: () => (
<DrawerToggleButton tintColor={currentTheme.colors.tertiaryBlue} />
headerRight: ({ tintColor }) => (
<DrawerToggleButton tintColor={tintColor} />
),

headerStyle: {
Expand Down
17 changes: 17 additions & 0 deletions apps/expo/app/(app)/(drawer)/(tabs)/feed/_layout.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import { DrawerToggleButton } from '@react-navigation/drawer';
import { useRouterSettings } from 'app/hooks/router';
import { Stack } from 'expo-router';
import React from 'react';

export default function StackLayout() {
const { layoutStackScreenOptionsHeaderSettings } = useRouterSettings();
return (
<Stack
screenOptions={{
headerRight: () => <DrawerToggleButton />,
...layoutStackScreenOptionsHeaderSettings,
headerBlurEffect: 'systemChromeMaterial',
}}
/>
);
}
Loading

0 comments on commit 37c784a

Please sign in to comment.