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 && (
|
||||||
|
|
24
BestList.tsx
24
BestList.tsx
|
@ -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,15 +59,18 @@ export default function BestList() {
|
||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Page search={search} setSearch={setSearch}>
|
<>
|
||||||
{bests?.length === 0 ? (
|
<Header name="Best" />
|
||||||
<List.Item
|
<Page search={search} setSearch={setSearch}>
|
||||||
title="No exercises yet"
|
{bests?.length === 0 ? (
|
||||||
description="Once sets have been added, this will highlight your personal bests."
|
<List.Item
|
||||||
/>
|
title="No exercises yet"
|
||||||
) : (
|
description="Once sets have been added, this will highlight your personal bests."
|
||||||
<FlatList style={{flex: 1}} renderItem={renderItem} data={bests} />
|
/>
|
||||||
)}
|
) : (
|
||||||
</Page>
|
<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>
|
||||||
|
);
|
||||||
|
}
|
34
PlanList.tsx
34
PlanList.tsx
|
@ -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,20 +47,23 @@ export default function PlanList() {
|
||||||
navigation.navigate('EditPlan', {plan: {days: '', workouts: ''}});
|
navigation.navigate('EditPlan', {plan: {days: '', workouts: ''}});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Page onAdd={onAdd} search={search} setSearch={setSearch}>
|
<>
|
||||||
{plans?.length === 0 ? (
|
<Header name="Plans" />
|
||||||
<List.Item
|
<Page onAdd={onAdd} search={search} setSearch={setSearch}>
|
||||||
title="No plans yet"
|
{plans?.length === 0 ? (
|
||||||
description="A plan is a list of workouts for certain days."
|
<List.Item
|
||||||
/>
|
title="No plans yet"
|
||||||
) : (
|
description="A plan is a list of workouts for certain days."
|
||||||
<FlatList
|
/>
|
||||||
style={{flex: 1}}
|
) : (
|
||||||
data={plans}
|
<FlatList
|
||||||
renderItem={renderItem}
|
style={{flex: 1}}
|
||||||
keyExtractor={set => set.id?.toString() || ''}
|
data={plans}
|
||||||
/>
|
renderItem={renderItem}
|
||||||
)}
|
keyExtractor={set => set.id?.toString() || ''}
|
||||||
</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
|
||||||
|
|
42
SetList.tsx
42
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,21 +83,24 @@ export default function SetList() {
|
||||||
}, [navigation, set]);
|
}, [navigation, set]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Page onAdd={onAdd} search={search} setSearch={setSearch}>
|
<>
|
||||||
{sets?.length === 0 ? (
|
<Header name="Home" />
|
||||||
<List.Item
|
<Page onAdd={onAdd} search={search} setSearch={setSearch}>
|
||||||
title="No sets yet"
|
{sets?.length === 0 ? (
|
||||||
description="A set is a group of repetitions. E.g. 8 reps of Squats."
|
<List.Item
|
||||||
/>
|
title="No sets yet"
|
||||||
) : (
|
description="A set is a group of repetitions. E.g. 8 reps of Squats."
|
||||||
<FlatList
|
/>
|
||||||
data={sets}
|
) : (
|
||||||
style={{flex: 1}}
|
<FlatList
|
||||||
renderItem={renderItem}
|
data={sets}
|
||||||
keyExtractor={s => s.id!.toString()}
|
style={{flex: 1}}
|
||||||
onEndReached={next}
|
renderItem={renderItem}
|
||||||
/>
|
keyExtractor={s => s.id!.toString()}
|
||||||
)}
|
onEndReached={next}
|
||||||
</Page>
|
/>
|
||||||
|
)}
|
||||||
|
</Page>
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
162
SettingsPage.tsx
162
SettingsPage.tsx
|
@ -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,85 +167,88 @@ export default function SettingsPage() {
|
||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Page search={search} setSearch={setSearch}>
|
<>
|
||||||
<ScrollView style={{marginTop: MARGIN}}>
|
<Header name="Settings" />
|
||||||
{switches
|
<Page search={search} setSearch={setSearch}>
|
||||||
.filter(input =>
|
<ScrollView style={{marginTop: MARGIN}}>
|
||||||
input.name.toLowerCase().includes(search.toLowerCase()),
|
{switches
|
||||||
)
|
.filter(input =>
|
||||||
.map(input => (
|
input.name.toLowerCase().includes(search.toLowerCase()),
|
||||||
<Switch
|
)
|
||||||
onPress={() => input.onChange(!input.value)}
|
.map(input => (
|
||||||
key={input.name}
|
<Switch
|
||||||
value={input.value}
|
onPress={() => input.onChange(!input.value)}
|
||||||
onValueChange={input.onChange}>
|
key={input.name}
|
||||||
{input.name}
|
value={input.value}
|
||||||
</Switch>
|
onValueChange={input.onChange}>
|
||||||
))}
|
{input.name}
|
||||||
{'theme'.includes(search.toLowerCase()) && (
|
</Switch>
|
||||||
<Picker
|
|
||||||
style={{color}}
|
|
||||||
dropdownIconColor={color}
|
|
||||||
selectedValue={theme}
|
|
||||||
onValueChange={changeTheme}>
|
|
||||||
<Picker.Item value="system" label="Follow system theme" />
|
|
||||||
<Picker.Item value="dark" label="Dark theme" />
|
|
||||||
<Picker.Item value="light" label="Light theme" />
|
|
||||||
</Picker>
|
|
||||||
)}
|
|
||||||
{'color'.includes(search.toLowerCase()) && (
|
|
||||||
<Picker
|
|
||||||
style={{color, marginTop: -10}}
|
|
||||||
dropdownIconColor={color}
|
|
||||||
selectedValue={color}
|
|
||||||
onValueChange={value => setColor(value)}>
|
|
||||||
{lightColors.concat(darkColors).map(colorOption => (
|
|
||||||
<Picker.Item
|
|
||||||
key={colorOption.hex}
|
|
||||||
value={colorOption.hex}
|
|
||||||
label="Primary color"
|
|
||||||
color={colorOption.hex}
|
|
||||||
/>
|
|
||||||
))}
|
))}
|
||||||
</Picker>
|
{'theme'.includes(search.toLowerCase()) && (
|
||||||
)}
|
<Picker
|
||||||
{'date format'.includes(search.toLowerCase()) && (
|
style={{color}}
|
||||||
<Picker
|
dropdownIconColor={color}
|
||||||
style={{color, marginTop: -10}}
|
selectedValue={theme}
|
||||||
dropdownIconColor={color}
|
onValueChange={changeTheme}>
|
||||||
selectedValue={settings.date}
|
<Picker.Item value="system" label="Follow system theme" />
|
||||||
onValueChange={changeDate}>
|
<Picker.Item value="dark" label="Dark theme" />
|
||||||
<Picker.Item
|
<Picker.Item value="light" label="Light theme" />
|
||||||
value="%Y-%m-%d %H:%M"
|
</Picker>
|
||||||
label="Format date as 1990-12-24 15:05"
|
)}
|
||||||
/>
|
{'color'.includes(search.toLowerCase()) && (
|
||||||
<Picker.Item
|
<Picker
|
||||||
value="%Y-%m-%d"
|
style={{color, marginTop: -10}}
|
||||||
label="Format date as 1990-12-24 (YYYY-MM-dd)"
|
dropdownIconColor={color}
|
||||||
/>
|
selectedValue={color}
|
||||||
<Picker.Item value="%d/%m" label="Format date as 24/12 (dd/MM)" />
|
onValueChange={value => setColor(value)}>
|
||||||
<Picker.Item value="%H:%M" label="Format date as 15:05 (HH:MM)" />
|
{lightColors.concat(darkColors).map(colorOption => (
|
||||||
</Picker>
|
<Picker.Item
|
||||||
)}
|
key={colorOption.hex}
|
||||||
{'alarm sound'.includes(search.toLowerCase()) && (
|
value={colorOption.hex}
|
||||||
<Button style={{alignSelf: 'flex-start'}} onPress={changeSound}>
|
label="Primary color"
|
||||||
Alarm sound
|
color={colorOption.hex}
|
||||||
{sound
|
/>
|
||||||
? ': ' + sound.split('/')[sound.split('/').length - 1]
|
))}
|
||||||
: null}
|
</Picker>
|
||||||
</Button>
|
)}
|
||||||
)}
|
{'date format'.includes(search.toLowerCase()) && (
|
||||||
</ScrollView>
|
<Picker
|
||||||
<ConfirmDialog
|
style={{color, marginTop: -10}}
|
||||||
title="Battery optimizations"
|
dropdownIconColor={color}
|
||||||
show={battery}
|
selectedValue={settings.date}
|
||||||
setShow={setBattery}
|
onValueChange={changeDate}>
|
||||||
onOk={() => {
|
<Picker.Item
|
||||||
NativeModules.AlarmModule.ignoreBattery();
|
value="%Y-%m-%d %H:%M"
|
||||||
setBattery(false);
|
label="Format date as 1990-12-24 15:05"
|
||||||
}}>
|
/>
|
||||||
Disable battery optimizations for Massive to use rest timers.
|
<Picker.Item
|
||||||
</ConfirmDialog>
|
value="%Y-%m-%d"
|
||||||
</Page>
|
label="Format date as 1990-12-24 (YYYY-MM-dd)"
|
||||||
|
/>
|
||||||
|
<Picker.Item value="%d/%m" label="Format date as 24/12 (dd/MM)" />
|
||||||
|
<Picker.Item value="%H:%M" label="Format date as 15:05 (HH:MM)" />
|
||||||
|
</Picker>
|
||||||
|
)}
|
||||||
|
{'alarm sound'.includes(search.toLowerCase()) && (
|
||||||
|
<Button style={{alignSelf: 'flex-start'}} onPress={changeSound}>
|
||||||
|
Alarm sound
|
||||||
|
{sound
|
||||||
|
? ': ' + sound.split('/')[sound.split('/').length - 1]
|
||||||
|
: null}
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</ScrollView>
|
||||||
|
<ConfirmDialog
|
||||||
|
title="Battery optimizations"
|
||||||
|
show={battery}
|
||||||
|
setShow={setBattery}
|
||||||
|
onOk={() => {
|
||||||
|
NativeModules.AlarmModule.ignoreBattery();
|
||||||
|
setBattery(false);
|
||||||
|
}}>
|
||||||
|
Disable battery optimizations for Massive to use rest timers.
|
||||||
|
</ConfirmDialog>
|
||||||
|
</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,21 +80,24 @@ export default function WorkoutList() {
|
||||||
}, [navigation]);
|
}, [navigation]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Page onAdd={onAdd} search={search} setSearch={setSearch}>
|
<>
|
||||||
{workouts?.length === 0 ? (
|
<Header name="Workouts" />
|
||||||
<List.Item
|
<Page onAdd={onAdd} search={search} setSearch={setSearch}>
|
||||||
title="No workouts yet."
|
{workouts?.length === 0 ? (
|
||||||
description="A workout is something you do at the gym. For example Deadlifts are a workout."
|
<List.Item
|
||||||
/>
|
title="No workouts yet."
|
||||||
) : (
|
description="A workout is something you do at the gym. For example Deadlifts are a workout."
|
||||||
<FlatList
|
/>
|
||||||
data={workouts}
|
) : (
|
||||||
style={{flex: 1}}
|
<FlatList
|
||||||
renderItem={renderItem}
|
data={workouts}
|
||||||
keyExtractor={w => w.name}
|
style={{flex: 1}}
|
||||||
onEndReached={next}
|
renderItem={renderItem}
|
||||||
/>
|
keyExtractor={w => w.name}
|
||||||
)}
|
onEndReached={next}
|
||||||
</Page>
|
/>
|
||||||
|
)}
|
||||||
|
</Page>
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue
Block a user