Use custom AppBar

Allows us to always provide navigation actions, especially on Web.

src/RootNavigator.tsx

@@ -3,10 +3,8 @@
 
 import * as React from "react";
 import { useDispatch, useSelector } from "react-redux";
-import { useNavigation } from "@react-navigation/native";
 import { createStackNavigator } from "@react-navigation/stack";
-import { DrawerNavigationProp } from "@react-navigation/drawer";
-import { Appbar, useTheme, Snackbar } from "react-native-paper";
+import { Snackbar } from "react-native-paper";
 
 import { SyncManager } from "./sync/SyncManager";
 
@@ -33,20 +31,14 @@ import { useAppStateCb } from "./helpers";
 import * as C from "./constants";
 import { StoreState } from "./store";
 import { RootStackParamList } from "./RootStackParamList";
+import MenuButton from "./widgets/MenuButton";
+import AppBar from "./widgets/AppBar";
 
 const Stack = createStackNavigator<RootStackParamList>();
 
-const MenuButton = React.memo(function MenuButton() {
-  const navigation = useNavigation() as DrawerNavigationProp<any>;
-  return (
-    <Appbar.Action icon="menu" accessibilityLabel="Main menu" onPress={() => navigation.openDrawer()} />
-  );
-});
-
 export default React.memo(function RootNavigator() {
   const dispatch = useDispatch();
   const etebase = useCredentials();
-  const theme = useTheme();
 
   // Sync app when it goes to background
   useAppStateCb((_foreground) => {
@@ -61,14 +53,7 @@ export default React.memo(function RootNavigator() {
     <>
       <Stack.Navigator
         screenOptions={{
-          headerStyle: {
-            backgroundColor: theme.colors.primary,
-          },
-          headerTintColor: "#000000",
-          headerBackTitleVisible: false,
-          headerBackTitleStyle: {
-            backgroundColor: "black",
-          },
+          header: (props) => <AppBar {...props} menuFallback />,
           cardStyle: {
             maxHeight: "100%",
           },

src/widgets/AppBar.tsx

@@ -0,0 +1,31 @@
+import * as React from "react";
+import { StackHeaderProps } from "@react-navigation/stack";
+import { Appbar } from "react-native-paper";
+
+import MenuButton from "./MenuButton";
+
+export default function AppBar(props: StackHeaderProps & { menuFallback: boolean }) {
+  const { insets, menuFallback, navigation, previous, scene } = props;
+  const { options } = scene.descriptor;
+  const title = (options.headerTitle)
+    ? options.headerTitle
+    : (options.title)
+      ? options.title
+      : scene.route.name;
+  const left = (options.headerLeft)
+    ? options.headerLeft({})
+    : (previous)
+      ? <Appbar.BackAction onPress={navigation.goBack} />
+      : (menuFallback)
+        ? <MenuButton />
+        : null;
+  const right = options.headerRight?.({});
+
+  return (
+    <Appbar.Header statusBarHeight={insets.top}>
+      {left}
+      <Appbar.Content title={title} />
+      {right}
+    </Appbar.Header>
+  );
+}

src/widgets/MenuButton.tsx

@@ -0,0 +1,13 @@
+import * as React from "react";
+import { useNavigation } from "@react-navigation/native";
+import { DrawerNavigationProp } from "@react-navigation/drawer";
+import { Appbar } from "react-native-paper";
+
+const MenuButton = React.memo(function MenuButton() {
+  const navigation = useNavigation() as DrawerNavigationProp<any>;
+  return (
+    <Appbar.Action icon="menu" accessibilityLabel="Main menu" onPress={() => navigation.openDrawer()} />
+  );
+});
+
+export default MenuButton;