From a664b65ce2cb18505e7e28052b11d4e73014c042 Mon Sep 17 00:00:00 2001 From: Brandon Presley Date: Sun, 23 Oct 2022 12:24:39 +1300 Subject: [PATCH] Add custom app bar The header bar provided by react-navigation was jumping on first load, whereas this custom one doesn't. --- App.tsx | 4 +- BestList.tsx | 24 ++++--- Header.tsx | 17 +++++ PlanList.tsx | 34 +++++----- Routes.tsx | 1 + SetList.tsx | 42 ++++++------ SettingsPage.tsx | 162 ++++++++++++++++++++++++----------------------- WorkoutList.tsx | 36 ++++++----- 8 files changed, 177 insertions(+), 143 deletions(-) create mode 100644 Header.tsx diff --git a/App.tsx b/App.tsx index 03b3888..7e5ce15 100644 --- a/App.tsx +++ b/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 = () => { }}> + settings={{icon: props => }}> {settings && ( diff --git a/BestList.tsx b/BestList.tsx index b9199bb..4e515ee 100644 --- a/BestList.tsx +++ b/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,15 +59,18 @@ export default function BestList() { ); return ( - - {bests?.length === 0 ? ( - - ) : ( - - )} - + <> +
+ + {bests?.length === 0 ? ( + + ) : ( + + )} + + ); } diff --git a/Header.tsx b/Header.tsx new file mode 100644 index 0000000..66ca0b1 --- /dev/null +++ b/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 ( + + + + + + ); +} diff --git a/PlanList.tsx b/PlanList.tsx index 7ba8cf5..1f06b76 100644 --- a/PlanList.tsx +++ b/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,20 +47,23 @@ export default function PlanList() { navigation.navigate('EditPlan', {plan: {days: '', workouts: ''}}); return ( - - {plans?.length === 0 ? ( - - ) : ( - set.id?.toString() || ''} - /> - )} - + <> +
+ + {plans?.length === 0 ? ( + + ) : ( + set.id?.toString() || ''} + /> + )} + + ); } diff --git a/Routes.tsx b/Routes.tsx index c6cd3ff..7bad039 100644 --- a/Routes.tsx +++ b/Routes.tsx @@ -28,6 +28,7 @@ export default function Routes() { screenOptions={{ headerTintColor: dark ? 'white' : 'black', swipeEdgeWidth: 1000, + headerShown: false, }}> {routes.map(route => ( { refresh(); - navigation.getParent()?.setOptions({ - headerRight: () => , - }); - }, [refresh, navigation]), + }, [refresh]), ); useEffect(() => { @@ -86,21 +83,24 @@ export default function SetList() { }, [navigation, set]); return ( - - {sets?.length === 0 ? ( - - ) : ( - s.id!.toString()} - onEndReached={next} - /> - )} - + <> +
+ + {sets?.length === 0 ? ( + + ) : ( + s.id!.toString()} + onEndReached={next} + /> + )} + + ); } diff --git a/SettingsPage.tsx b/SettingsPage.tsx index 045b727..184d9ce 100644 --- a/SettingsPage.tsx +++ b/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,85 +167,88 @@ export default function SettingsPage() { ); return ( - - - {switches - .filter(input => - input.name.toLowerCase().includes(search.toLowerCase()), - ) - .map(input => ( - input.onChange(!input.value)} - key={input.name} - value={input.value} - onValueChange={input.onChange}> - {input.name} - - ))} - {'theme'.includes(search.toLowerCase()) && ( - - - - - - )} - {'color'.includes(search.toLowerCase()) && ( - setColor(value)}> - {lightColors.concat(darkColors).map(colorOption => ( - + <> +
+ + + {switches + .filter(input => + input.name.toLowerCase().includes(search.toLowerCase()), + ) + .map(input => ( + input.onChange(!input.value)} + key={input.name} + value={input.value} + onValueChange={input.onChange}> + {input.name} + ))} - - )} - {'date format'.includes(search.toLowerCase()) && ( - - - - - - - )} - {'alarm sound'.includes(search.toLowerCase()) && ( - - )} - - { - NativeModules.AlarmModule.ignoreBattery(); - setBattery(false); - }}> - Disable battery optimizations for Massive to use rest timers. - - + {'theme'.includes(search.toLowerCase()) && ( + + + + + + )} + {'color'.includes(search.toLowerCase()) && ( + setColor(value)}> + {lightColors.concat(darkColors).map(colorOption => ( + + ))} + + )} + {'date format'.includes(search.toLowerCase()) && ( + + + + + + + )} + {'alarm sound'.includes(search.toLowerCase()) && ( + + )} + + { + NativeModules.AlarmModule.ignoreBattery(); + setBattery(false); + }}> + Disable battery optimizations for Massive to use rest timers. + + + ); } diff --git a/WorkoutList.tsx b/WorkoutList.tsx index bda6b3d..38fbe5c 100644 --- a/WorkoutList.tsx +++ b/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,21 +80,24 @@ export default function WorkoutList() { }, [navigation]); return ( - - {workouts?.length === 0 ? ( - - ) : ( - w.name} - onEndReached={next} - /> - )} - + <> +
+ + {workouts?.length === 0 ? ( + + ) : ( + w.name} + onEndReached={next} + /> + )} + + ); }