Use custom AppBar

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,28 @@
+import * as React from "react";
+import { StackHeaderProps } from "@react-navigation/stack";
+import { Appbar as PaperAppbar } 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.title ?? scene.route.name;
+  let left: React.ReactNode = null;
+  if (options.headerLeft) {
+    left = options.headerLeft({});
+  } else if (previous) {
+    left = <PaperAppbar.BackAction onPress={navigation.goBack} />;
+  } else if (menuFallback) {
+    left = <MenuButton />;
+  }
+  const right = options.headerRight?.({});
+
+  return (
+    <PaperAppbar.Header statusBarHeight={insets.top}>
+      {left}
+      <PaperAppbar.Content title={title} />
+      {right}
+    </PaperAppbar.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;