Replace height percent setting with flex: 1

This way reacts better to changing the screen sizes.
I think there was one bug where the fab wouldn't be
precisely at the bottom of the page depending on the
flat list length.
This commit is contained in:
Brandon Presley 2022-10-14 18:12:21 +13:00
parent 46f0875497
commit 9bd8fa9353
8 changed files with 9 additions and 14 deletions

View File

@ -65,11 +65,7 @@ export default function BestList() {
description="Once sets have been added, this will highlight your personal bests." description="Once sets have been added, this will highlight your personal bests."
/> />
) : ( ) : (
<FlatList <FlatList style={{flex: 1}} renderItem={renderItem} data={bests} />
style={{height: '99%'}}
renderItem={renderItem}
data={bests}
/>
)} )}
</Page> </Page>
); );

View File

@ -87,8 +87,8 @@ export default function EditPlan() {
); );
return ( return (
<View style={{padding: PADDING}}> <View style={{padding: PADDING, flex: 1}}>
<ScrollView style={{height: '90%'}}> <ScrollView style={{flex: 1}}>
<Text style={styles.title}>Days</Text> <Text style={styles.title}>Days</Text>
{DAYS.map(day => ( {DAYS.map(day => (
<Switch <Switch

View File

@ -118,8 +118,8 @@ export default function EditWorkout() {
}; };
return ( return (
<View style={{padding: PADDING}}> <View style={{padding: PADDING, flex: 1}}>
<ScrollView style={{height: '90%'}}> <ScrollView style={{flex: 1}}>
<MassiveInput <MassiveInput
autoFocus autoFocus
label="Name" label="Name"

View File

@ -18,7 +18,7 @@ export default function MassiveFab(
style={{ style={{
position: 'absolute', position: 'absolute',
right: 10, right: 10,
bottom: 60, bottom: 10,
backgroundColor: color, backgroundColor: color,
}} }}
{...props} {...props}

View File

@ -34,6 +34,5 @@ const styles = StyleSheet.create({
container: { container: {
flexGrow: 1, flexGrow: 1,
padding: PADDING, padding: PADDING,
paddingBottom: '10%',
}, },
}); });

View File

@ -54,7 +54,7 @@ export default function PlanList() {
/> />
) : ( ) : (
<FlatList <FlatList
style={{height: '99%'}} style={{flex: 1}}
data={plans} data={plans}
renderItem={renderItem} renderItem={renderItem}
keyExtractor={set => set.id?.toString() || ''} keyExtractor={set => set.id?.toString() || ''}

View File

@ -95,7 +95,7 @@ export default function SetList() {
) : ( ) : (
<FlatList <FlatList
data={sets} data={sets}
style={{height: '99%'}} style={{flex: 1}}
renderItem={renderItem} renderItem={renderItem}
keyExtractor={s => s.id!.toString()} keyExtractor={s => s.id!.toString()}
onEndReached={next} onEndReached={next}

View File

@ -88,7 +88,7 @@ export default function WorkoutList() {
) : ( ) : (
<FlatList <FlatList
data={workouts} data={workouts}
style={{height: '99%'}} style={{flex: 1}}
renderItem={renderItem} renderItem={renderItem}
keyExtractor={w => w.name} keyExtractor={w => w.name}
onEndReached={next} onEndReached={next}