Split Appbar between ui and navigation logic

src/RootNavigator.tsx

@@ -34,7 +34,7 @@ import * as C from "./constants";
 import { StoreState } from "./store";
 import { RootStackParamList } from "./RootStackParamList";
 import MenuButton from "./widgets/MenuButton";
-import Appbar from "./widgets/Appbar";
+import { NavigationAppbar } from "./widgets/Appbar";
 
 const Stack = createStackNavigator<RootStackParamList>();
 
@@ -55,7 +55,7 @@ export default React.memo(function RootNavigator() {
     <>
       <Stack.Navigator
         screenOptions={{
-          header: (props) => <Appbar {...props} menuFallback />,
+          header: (props) => <NavigationAppbar {...props} menuFallback />,
           cardStyle: {
             maxHeight: "100%",
           },

src/screens/NoteListScreen.tsx

@@ -14,7 +14,7 @@ import { performSync, setSettings } from "../store/actions";
 import { useCredentials } from "../credentials";
 
 import NoteList from "../components/NoteList";
-import Appbar from "../widgets/Appbar";
+import { NavigationAppbar } from "../widgets/Appbar";
 import Menu from "../widgets/Menu";
 import MenuItem from "../widgets/MenuItem";
 import AppbarAction from "../widgets/AppbarAction";
@@ -40,7 +40,7 @@ export default function NoteListScreen(props: PropsType) {
     }
 
     navigation.setOptions({
-      header: (props) => <Appbar {...props} menuFallback />,
+      header: (props) => <NavigationAppbar {...props} menuFallback />,
       title: "Notes",
       headerRight: () => (
         <RightAction />

src/screens/NotebookListScreen.tsx

@@ -12,7 +12,7 @@ import { performSync } from "../store/actions";
 import { useCredentials } from "../credentials";
 
 import NoteList from "../components/NoteList";
-import Appbar from "../widgets/Appbar";
+import { NavigationAppbar } from "../widgets/Appbar";
 import AppbarAction from "../widgets/AppbarAction";
 import Menu from "../widgets/Menu";
 import MenuItem from "../widgets/MenuItem";
@@ -52,7 +52,7 @@ export default function NotebookListScreen(props: PropsType) {
     }
 
     navigation.setOptions({
-      header: (props) => <Appbar {...props} menuFallback />,
+      header: (props) => <NavigationAppbar {...props} menuFallback />,
       title: notebook?.meta.name || "Notebooks",
       headerLeft: (notebook) ? () => <PaperAppbar.BackAction onPress={() => setNotebook(undefined)} /> : undefined,
       headerRight: () => (

src/widgets/Appbar.tsx

@@ -1,11 +1,33 @@
 import * as React from "react";
-import { StackHeaderProps } from "@react-navigation/stack";
+import { StackHeaderProps, StackHeaderTitleProps } from "@react-navigation/stack";
 import { Appbar as PaperAppbar } from "react-native-paper";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 import MenuButton from "./MenuButton";
 
-export default function Appbar(props: StackHeaderProps & { menuFallback: boolean }) {
-  const { insets, menuFallback, navigation, previous, scene } = props;
+type PropsType = {
+  title: string | ((props: StackHeaderTitleProps) => React.ReactNode);
+  left?: React.ReactNode;
+  right?: React.ReactNode;
+};
+
+export default function Appbar(props: PropsType) {
+  const { title, left, right } = props;
+  const insets = useSafeAreaInsets();
+
+  return (
+    <PaperAppbar.Header statusBarHeight={insets.top}>
+      {left}
+      {(typeof title === "string") ? (
+        <PaperAppbar.Content title={title} />
+      ) : title({ onLayout: () => null })}
+      {right}
+    </PaperAppbar.Header>
+  );
+}
+
+export function NavigationAppbar(props: StackHeaderProps & { menuFallback: boolean }) {
+  const { menuFallback, navigation, previous, scene } = props;
   const { options } = scene.descriptor;
   const title = options.headerTitle ?? options.title ?? scene.route.name;
   let left: React.ReactNode = null;
@@ -19,12 +41,10 @@ export default function Appbar(props: StackHeaderProps & { menuFallback: boolean
   const right = options.headerRight?.({});
 
   return (
-    <PaperAppbar.Header statusBarHeight={insets.top}>
-      {left}
-      {(typeof title === "string") ? (
-        <PaperAppbar.Content title={title} />
-      ) : title({ onLayout: () => null })}
-      {right}
-    </PaperAppbar.Header>
+    <Appbar
+      title={title}
+      left={left}
+      right={right}
+    />
   );
 }