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,
|
DefaultTheme as PaperDefaultTheme,
|
||||||
Provider,
|
Provider,
|
||||||
} from 'react-native-paper';
|
} 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 {Color} from './color';
|
||||||
import {lightColors} from './colors';
|
import {lightColors} from './colors';
|
||||||
import {runMigrations} from './db';
|
import {runMigrations} from './db';
|
||||||
|
@ -77,7 +77,7 @@ const App = () => {
|
||||||
<Color.Provider value={{color, setColor}}>
|
<Color.Provider value={{color, setColor}}>
|
||||||
<Provider
|
<Provider
|
||||||
theme={theme}
|
theme={theme}
|
||||||
settings={{icon: props => <Ionicon {...props} />}}>
|
settings={{icon: props => <MaterialIcon {...props} />}}>
|
||||||
<NavigationContainer theme={theme}>
|
<NavigationContainer theme={theme}>
|
||||||
<MassiveSnack>
|
<MassiveSnack>
|
||||||
{settings && (
|
{settings && (
|
||||||
|
|
|
@ -8,6 +8,7 @@ import {FlatList, Image} from 'react-native';
|
||||||
import {List} from 'react-native-paper';
|
import {List} from 'react-native-paper';
|
||||||
import {getBestReps, getBestWeights} from './best.service';
|
import {getBestReps, getBestWeights} from './best.service';
|
||||||
import {BestPageParams} from './BestPage';
|
import {BestPageParams} from './BestPage';
|
||||||
|
import Header from './Header';
|
||||||
import Page from './Page';
|
import Page from './Page';
|
||||||
import Set from './set';
|
import Set from './set';
|
||||||
import {useSettings} from './use-settings';
|
import {useSettings} from './use-settings';
|
||||||
|
@ -58,6 +59,8 @@ export default function BestList() {
|
||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
<>
|
||||||
|
<Header name="Best" />
|
||||||
<Page search={search} setSearch={setSearch}>
|
<Page search={search} setSearch={setSearch}>
|
||||||
{bests?.length === 0 ? (
|
{bests?.length === 0 ? (
|
||||||
<List.Item
|
<List.Item
|
||||||
|
@ -68,5 +71,6 @@ export default function BestList() {
|
||||||
<FlatList style={{flex: 1}} renderItem={renderItem} data={bests} />
|
<FlatList style={{flex: 1}} renderItem={renderItem} data={bests} />
|
||||||
)}
|
)}
|
||||||
</Page>
|
</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 {FlatList} from 'react-native';
|
||||||
import {List} from 'react-native-paper';
|
import {List} from 'react-native-paper';
|
||||||
import DrawerMenu from './DrawerMenu';
|
import DrawerMenu from './DrawerMenu';
|
||||||
|
import Header from './Header';
|
||||||
import Page from './Page';
|
import Page from './Page';
|
||||||
import {Plan} from './plan';
|
import {Plan} from './plan';
|
||||||
import {PlanPageParams} from './plan-page-params';
|
import {PlanPageParams} from './plan-page-params';
|
||||||
|
@ -46,6 +47,8 @@ export default function PlanList() {
|
||||||
navigation.navigate('EditPlan', {plan: {days: '', workouts: ''}});
|
navigation.navigate('EditPlan', {plan: {days: '', workouts: ''}});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
<>
|
||||||
|
<Header name="Plans" />
|
||||||
<Page onAdd={onAdd} search={search} setSearch={setSearch}>
|
<Page onAdd={onAdd} search={search} setSearch={setSearch}>
|
||||||
{plans?.length === 0 ? (
|
{plans?.length === 0 ? (
|
||||||
<List.Item
|
<List.Item
|
||||||
|
@ -61,5 +64,6 @@ export default function PlanList() {
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
</Page>
|
</Page>
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -28,6 +28,7 @@ export default function Routes() {
|
||||||
screenOptions={{
|
screenOptions={{
|
||||||
headerTintColor: dark ? 'white' : 'black',
|
headerTintColor: dark ? 'white' : 'black',
|
||||||
swipeEdgeWidth: 1000,
|
swipeEdgeWidth: 1000,
|
||||||
|
headerShown: false,
|
||||||
}}>
|
}}>
|
||||||
{routes.map(route => (
|
{routes.map(route => (
|
||||||
<Drawer.Screen
|
<Drawer.Screen
|
||||||
|
|
10
SetList.tsx
10
SetList.tsx
|
@ -6,7 +6,7 @@ import {
|
||||||
import React, {useCallback, useEffect, useState} from 'react';
|
import React, {useCallback, useEffect, useState} from 'react';
|
||||||
import {FlatList} from 'react-native';
|
import {FlatList} from 'react-native';
|
||||||
import {List} from 'react-native-paper';
|
import {List} from 'react-native-paper';
|
||||||
import DrawerMenu from './DrawerMenu';
|
import Header from './Header';
|
||||||
import {HomePageParams} from './home-page-params';
|
import {HomePageParams} from './home-page-params';
|
||||||
import Page from './Page';
|
import Page from './Page';
|
||||||
import Set from './set';
|
import Set from './set';
|
||||||
|
@ -44,10 +44,7 @@ export default function SetList() {
|
||||||
useFocusEffect(
|
useFocusEffect(
|
||||||
useCallback(() => {
|
useCallback(() => {
|
||||||
refresh();
|
refresh();
|
||||||
navigation.getParent()?.setOptions({
|
}, [refresh]),
|
||||||
headerRight: () => <DrawerMenu name="Home" />,
|
|
||||||
});
|
|
||||||
}, [refresh, navigation]),
|
|
||||||
);
|
);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
@ -86,6 +83,8 @@ export default function SetList() {
|
||||||
}, [navigation, set]);
|
}, [navigation, set]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
<>
|
||||||
|
<Header name="Home" />
|
||||||
<Page onAdd={onAdd} search={search} setSearch={setSearch}>
|
<Page onAdd={onAdd} search={search} setSearch={setSearch}>
|
||||||
{sets?.length === 0 ? (
|
{sets?.length === 0 ? (
|
||||||
<List.Item
|
<List.Item
|
||||||
|
@ -102,5 +101,6 @@ export default function SetList() {
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
</Page>
|
</Page>
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -8,6 +8,7 @@ import {useColor} from './color';
|
||||||
import {darkColors, lightColors} from './colors';
|
import {darkColors, lightColors} from './colors';
|
||||||
import ConfirmDialog from './ConfirmDialog';
|
import ConfirmDialog from './ConfirmDialog';
|
||||||
import {MARGIN} from './constants';
|
import {MARGIN} from './constants';
|
||||||
|
import Header from './Header';
|
||||||
import Input from './input';
|
import Input from './input';
|
||||||
import {useSnackbar} from './MassiveSnack';
|
import {useSnackbar} from './MassiveSnack';
|
||||||
import Page from './Page';
|
import Page from './Page';
|
||||||
|
@ -166,6 +167,8 @@ export default function SettingsPage() {
|
||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
<>
|
||||||
|
<Header name="Settings" />
|
||||||
<Page search={search} setSearch={setSearch}>
|
<Page search={search} setSearch={setSearch}>
|
||||||
<ScrollView style={{marginTop: MARGIN}}>
|
<ScrollView style={{marginTop: MARGIN}}>
|
||||||
{switches
|
{switches
|
||||||
|
@ -246,5 +249,6 @@ export default function SettingsPage() {
|
||||||
Disable battery optimizations for Massive to use rest timers.
|
Disable battery optimizations for Massive to use rest timers.
|
||||||
</ConfirmDialog>
|
</ConfirmDialog>
|
||||||
</Page>
|
</Page>
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -6,6 +6,7 @@ import {
|
||||||
import React, {useCallback, useEffect, useState} from 'react';
|
import React, {useCallback, useEffect, useState} from 'react';
|
||||||
import {FlatList} from 'react-native';
|
import {FlatList} from 'react-native';
|
||||||
import {List} from 'react-native-paper';
|
import {List} from 'react-native-paper';
|
||||||
|
import Header from './Header';
|
||||||
import Page from './Page';
|
import Page from './Page';
|
||||||
import Set from './set';
|
import Set from './set';
|
||||||
import {getDistinctSets} from './set.service';
|
import {getDistinctSets} from './set.service';
|
||||||
|
@ -79,6 +80,8 @@ export default function WorkoutList() {
|
||||||
}, [navigation]);
|
}, [navigation]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
<>
|
||||||
|
<Header name="Workouts" />
|
||||||
<Page onAdd={onAdd} search={search} setSearch={setSearch}>
|
<Page onAdd={onAdd} search={search} setSearch={setSearch}>
|
||||||
{workouts?.length === 0 ? (
|
{workouts?.length === 0 ? (
|
||||||
<List.Item
|
<List.Item
|
||||||
|
@ -95,5 +98,6 @@ export default function WorkoutList() {
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
</Page>
|
</Page>
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue
Block a user