Add custom app bar

The header bar provided by react-navigation was jumping on first
load, whereas this custom one doesn't.

App.tsx

@@ -10,7 +10,7 @@ import {
   DefaultTheme as PaperDefaultTheme,
   Provider,
 } from 'react-native-paper';
-import Ionicon from 'react-native-vector-icons/MaterialIcons';
+import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
 import {Color} from './color';
 import {lightColors} from './colors';
 import {runMigrations} from './db';
@@ -77,7 +77,7 @@ const App = () => {
     <Color.Provider value={{color, setColor}}>
       <Provider
         theme={theme}
-        settings={{icon: props => <Ionicon {...props} />}}>
+        settings={{icon: props => <MaterialIcon {...props} />}}>
         <NavigationContainer theme={theme}>
           <MassiveSnack>
             {settings && (

BestList.tsx

@@ -8,6 +8,7 @@ import {FlatList, Image} from 'react-native';
 import {List} from 'react-native-paper';
 import {getBestReps, getBestWeights} from './best.service';
 import {BestPageParams} from './BestPage';
+import Header from './Header';
 import Page from './Page';
 import Set from './set';
 import {useSettings} from './use-settings';
@@ -58,6 +59,8 @@ export default function BestList() {
   );
 
   return (
+    <>
+      <Header name="Best" />
       <Page search={search} setSearch={setSearch}>
         {bests?.length === 0 ? (
           <List.Item
@@ -68,5 +71,6 @@ export default function BestList() {
           <FlatList style={{flex: 1}} renderItem={renderItem} data={bests} />
         )}
       </Page>
+    </>
   );
 }

Header.tsx

@@ -0,0 +1,17 @@
+import {useNavigation} from '@react-navigation/native';
+import React from 'react';
+import {Appbar, IconButton} from 'react-native-paper';
+import {DrawerParamList} from './drawer-param-list';
+import DrawerMenu from './DrawerMenu';
+
+export default function Header({name}: {name: keyof DrawerParamList}) {
+  const navigation = useNavigation();
+
+  return (
+    <Appbar.Header>
+      <IconButton icon="menu" onPress={(navigation as any).openDrawer} />
+      <Appbar.Content title={name} />
+      <DrawerMenu name={name} />
+    </Appbar.Header>
+  );
+}

PlanList.tsx

@@ -7,6 +7,7 @@ import React, {useCallback, useEffect, useState} from 'react';
 import {FlatList} from 'react-native';
 import {List} from 'react-native-paper';
 import DrawerMenu from './DrawerMenu';
+import Header from './Header';
 import Page from './Page';
 import {Plan} from './plan';
 import {PlanPageParams} from './plan-page-params';
@@ -46,6 +47,8 @@ export default function PlanList() {
     navigation.navigate('EditPlan', {plan: {days: '', workouts: ''}});
 
   return (
+    <>
+      <Header name="Plans" />
       <Page onAdd={onAdd} search={search} setSearch={setSearch}>
         {plans?.length === 0 ? (
           <List.Item
@@ -61,5 +64,6 @@ export default function PlanList() {
           />
         )}
       </Page>
+    </>
   );
 }

Routes.tsx

@@ -28,6 +28,7 @@ export default function Routes() {
       screenOptions={{
         headerTintColor: dark ? 'white' : 'black',
         swipeEdgeWidth: 1000,
+        headerShown: false,
       }}>
       {routes.map(route => (
         <Drawer.Screen

SetList.tsx

@@ -6,7 +6,7 @@ import {
 import React, {useCallback, useEffect, useState} from 'react';
 import {FlatList} from 'react-native';
 import {List} from 'react-native-paper';
-import DrawerMenu from './DrawerMenu';
+import Header from './Header';
 import {HomePageParams} from './home-page-params';
 import Page from './Page';
 import Set from './set';
@@ -44,10 +44,7 @@ export default function SetList() {
   useFocusEffect(
     useCallback(() => {
       refresh();
-      navigation.getParent()?.setOptions({
-        headerRight: () => <DrawerMenu name="Home" />,
-      });
-    }, [refresh, navigation]),
+    }, [refresh]),
   );
 
   useEffect(() => {
@@ -86,6 +83,8 @@ export default function SetList() {
   }, [navigation, set]);
 
   return (
+    <>
+      <Header name="Home" />
       <Page onAdd={onAdd} search={search} setSearch={setSearch}>
         {sets?.length === 0 ? (
           <List.Item
@@ -102,5 +101,6 @@ export default function SetList() {
           />
         )}
       </Page>
+    </>
   );
 }

SettingsPage.tsx

@@ -8,6 +8,7 @@ import {useColor} from './color';
 import {darkColors, lightColors} from './colors';
 import ConfirmDialog from './ConfirmDialog';
 import {MARGIN} from './constants';
+import Header from './Header';
 import Input from './input';
 import {useSnackbar} from './MassiveSnack';
 import Page from './Page';
@@ -166,6 +167,8 @@ export default function SettingsPage() {
   );
 
   return (
+    <>
+      <Header name="Settings" />
       <Page search={search} setSearch={setSearch}>
         <ScrollView style={{marginTop: MARGIN}}>
           {switches
@@ -246,5 +249,6 @@ export default function SettingsPage() {
           Disable battery optimizations for Massive to use rest timers.
         </ConfirmDialog>
       </Page>
+    </>
   );
 }

WorkoutList.tsx

@@ -6,6 +6,7 @@ import {
 import React, {useCallback, useEffect, useState} from 'react';
 import {FlatList} from 'react-native';
 import {List} from 'react-native-paper';
+import Header from './Header';
 import Page from './Page';
 import Set from './set';
 import {getDistinctSets} from './set.service';
@@ -79,6 +80,8 @@ export default function WorkoutList() {
   }, [navigation]);
 
   return (
+    <>
+      <Header name="Workouts" />
       <Page onAdd={onAdd} search={search} setSearch={setSearch}>
         {workouts?.length === 0 ? (
           <List.Item
@@ -95,5 +98,6 @@ export default function WorkoutList() {
           />
         )}
       </Page>
+    </>
   );
 }