Add custom app bar
The header bar provided by react-navigation was jumping on first load, whereas this custom one doesn't.
This commit is contained in:
parent
149872ea7e
commit
a664b65ce2
4
App.tsx
4
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 && (
|
||||
|
|
|
@ -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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
17
Header.tsx
Normal file
17
Header.tsx
Normal file
|
@ -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>
|
||||
);
|
||||
}
|
|
@ -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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -28,6 +28,7 @@ export default function Routes() {
|
|||
screenOptions={{
|
||||
headerTintColor: dark ? 'white' : 'black',
|
||||
swipeEdgeWidth: 1000,
|
||||
headerShown: false,
|
||||
}}>
|
||||
{routes.map(route => (
|
||||
<Drawer.Screen
|
||||
|
|
10
SetList.tsx
10
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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue
Block a user