brandon.presley/Massive
brandon.presley
/
Massive
4
8
Fork 3
Code Issues 14 Pull Requests Activity

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:
Brandon Presley 2022-10-23 12:24:39 +13:00
parent 149872ea7e
commit a664b65ce2
8 changed files with 177 additions and 143 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
App.tsx
View File

@ -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 && (

24
BestList.tsx
View File

@ -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 (
<Page search={search} setSearch={setSearch}>
{bests?.length === 0 ? (
<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>
<>
<Header name="Best" />
<Page search={search} setSearch={setSearch}>
{bests?.length === 0 ? (
<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>
</>
);
}

17
Header.tsx Normal file
View 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
View File

@ -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 (
<Page onAdd={onAdd} search={search} setSearch={setSearch}>
{plans?.length === 0 ? (
<List.Item
title="No plans yet"
description="A plan is a list of workouts for certain days."
/>
) : (
<FlatList
style={{flex: 1}}
data={plans}
renderItem={renderItem}
keyExtractor={set => set.id?.toString() || ''}
/>
)}
</Page>
<>
<Header name="Plans" />
<Page onAdd={onAdd} search={search} setSearch={setSearch}>
{plans?.length === 0 ? (
<List.Item
title="No plans yet"
description="A plan is a list of workouts for certain days."
/>
) : (
<FlatList
style={{flex: 1}}
data={plans}
renderItem={renderItem}
keyExtractor={set => set.id?.toString() || ''}
/>
)}
</Page>
</>
);
}

1
Routes.tsx
View File

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

42
SetList.tsx
View File

@ -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,21 +83,24 @@ export default function SetList() {
}, [navigation, set]);
return (
<Page onAdd={onAdd} search={search} setSearch={setSearch}>
{sets?.length === 0 ? (
<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}}
renderItem={renderItem}
keyExtractor={s => s.id!.toString()}
onEndReached={next}
/>
)}
</Page>
<>
<Header name="Home" />
<Page onAdd={onAdd} search={search} setSearch={setSearch}>
{sets?.length === 0 ? (
<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}}
renderItem={renderItem}
keyExtractor={s => s.id!.toString()}
onEndReached={next}
/>
)}
</Page>
</>
);
}

162
SettingsPage.tsx
View File

@ -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 (
<Page search={search} setSearch={setSearch}>
<ScrollView style={{marginTop: MARGIN}}>
{switches
.filter(input =>
input.name.toLowerCase().includes(search.toLowerCase()),
)
.map(input => (
<Switch
onPress={() => input.onChange(!input.value)}
key={input.name}
value={input.value}
onValueChange={input.onChange}>
{input.name}
</Switch>
))}
{'theme'.includes(search.toLowerCase()) && (
<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}
/>
<>
<Header name="Settings" />
<Page search={search} setSearch={setSearch}>
<ScrollView style={{marginTop: MARGIN}}>
{switches
.filter(input =>
input.name.toLowerCase().includes(search.toLowerCase()),
)
.map(input => (
<Switch
onPress={() => input.onChange(!input.value)}
key={input.name}
value={input.value}
onValueChange={input.onChange}>
{input.name}
</Switch>
))}
</Picker>
)}
{'date format'.includes(search.toLowerCase()) && (
<Picker
style={{color, marginTop: -10}}
dropdownIconColor={color}
selectedValue={settings.date}
onValueChange={changeDate}>
<Picker.Item
value="%Y-%m-%d %H:%M"
label="Format date as 1990-12-24 15:05"
/>
<Picker.Item
value="%Y-%m-%d"
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>
{'theme'.includes(search.toLowerCase()) && (
<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>
)}
{'date format'.includes(search.toLowerCase()) && (
<Picker
style={{color, marginTop: -10}}
dropdownIconColor={color}
selectedValue={settings.date}
onValueChange={changeDate}>
<Picker.Item
value="%Y-%m-%d %H:%M"
label="Format date as 1990-12-24 15:05"
/>
<Picker.Item
value="%Y-%m-%d"
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>
</>
);
}

36
WorkoutList.tsx
View File

@ -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 (
<Page onAdd={onAdd} search={search} setSearch={setSearch}>
{workouts?.length === 0 ? (
<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}}
renderItem={renderItem}
keyExtractor={w => w.name}
onEndReached={next}
/>
)}
</Page>
<>
<Header name="Workouts" />
<Page onAdd={onAdd} search={search} setSearch={setSearch}>
{workouts?.length === 0 ? (
<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}}
renderItem={renderItem}
keyExtractor={w => w.name}
onEndReached={next}
/>
)}
</Page>
</>
);
}