Add empty message to Plans

EditPlan.tsx

@@ -101,6 +101,12 @@ export default function EditPlan({
           </View>
           <View>
             <Text style={styles.title}>Workouts</Text>
+            {names.length === 0 && (
+              <Text style={{maxWidth: '80%'}}>
+                No sets found. Try going to the home page and adding some
+                workouts first.
+              </Text>
+            )}
             {names.map(name => (
               <View key={name} style={[styles.row, {alignItems: 'center'}]}>
                 <Switch
@@ -133,6 +139,7 @@ const styles = StyleSheet.create({
   title: {
     fontSize: 20,
     marginBottom: 10,
+    marginTop: -15,
   },
   row: {
     flexDirection: 'row',

Exercises.tsx

@@ -38,7 +38,12 @@ export default function Exercises() {
     <View style={styles.container}>
       <Searchbar placeholder="Search" value={search} onChangeText={setSearch} />
       <FlatList
-        style={{height: '90%'}}
+        ListEmptyComponent={
+          <List.Item
+            title="No exercises yet"
+            description="Once sets have been added, Exercises list your personal bests."
+          />
+        }
         refreshing={refreshing}
         onRefresh={async () => {
           setRefresing(true);
@@ -55,5 +60,6 @@ export default function Exercises() {
 const styles = StyleSheet.create({
   container: {
     padding: 10,
+    flexGrow: 1,
   },
 });

Home.tsx

@@ -1,7 +1,13 @@
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import React, {useContext, useEffect, useState} from 'react';
-import {FlatList, NativeModules, SafeAreaView, StyleSheet} from 'react-native';
-import {AnimatedFAB, Searchbar} from 'react-native-paper';
+import {
+  FlatList,
+  NativeModules,
+  SafeAreaView,
+  StyleSheet,
+  Text,
+} from 'react-native';
+import {AnimatedFAB, List, Searchbar} from 'react-native-paper';
 import {DatabaseContext} from './App';
 import EditSet from './EditSet';
 
@@ -91,8 +97,13 @@ export default function Home() {
     <SafeAreaView style={styles.container}>
       <Searchbar placeholder="Search" value={search} onChangeText={setSearch} />
       <FlatList
-        style={{height: 100}}
         data={sets}
+        ListEmptyComponent={
+          <List.Item
+            title="No sets yet"
+            description="A set is a group of repetitions (or reps). For example, you might do a set of 8 reps on the Bench Press."
+          />
+        }
         renderItem={renderItem}
         keyExtractor={set => set.id!.toString()}
         onEndReached={next}

Plans.tsx

@@ -1,6 +1,6 @@
 import React, {useContext, useEffect, useState} from 'react';
 import {FlatList, StyleSheet, View} from 'react-native';
-import {AnimatedFAB, Searchbar} from 'react-native-paper';
+import {AnimatedFAB, List, Searchbar} from 'react-native-paper';
 import {DatabaseContext} from './App';
 import EditPlan from './EditPlan';
 import {Plan} from './plan';
@@ -52,6 +52,12 @@ export default function Plans() {
           setRefresing(true);
           refresh().finally(() => setRefresing(false));
         }}
+        ListEmptyComponent={
+          <List.Item
+            title="No plans yet"
+            description="A plan is a list of workouts for certain days."
+          />
+        }
       />
 
       <EditPlan