fix: add pull-to-refresh to HistoryScreen

src/screens/HistoryScreen.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useState } from 'react'
-import { View, FlatList, StyleSheet, Text } from 'react-native'
+import { View, FlatList, StyleSheet, Text, RefreshControl } from 'react-native'
 import { useFocusEffect } from '@react-navigation/native'
 import { initDatabase, getAllMeasurements } from '../database/db'
 import { Measurement } from '../types'
@@ -7,18 +7,26 @@ import MeasurementRow from '../components/MeasurementRow'
 
 export default function HistoryScreen() {
   const [measurements, setMeasurements] = useState<Measurement[]>([])
+  const [refreshing, setRefreshing] = useState(false)
+
+  const load = useCallback(async () => {
+    await initDatabase()
+    const all = await getAllMeasurements()
+    setMeasurements(all)
+  }, [])
 
   useFocusEffect(
     useCallback(() => {
-      const load = async () => {
-        await initDatabase()
-        const all = await getAllMeasurements()
-        setMeasurements(all)
-      }
       load()
-    }, [])
+    }, [load])
   )
 
+  const onRefresh = useCallback(async () => {
+    setRefreshing(true)
+    await load()
+    setRefreshing(false)
+  }, [load])
+
   return (
     <View style={styles.container}>
       <Text style={styles.count}>{measurements.length} metingen</Text>
@@ -28,6 +36,9 @@ export default function HistoryScreen() {
         renderItem={({ item }) => <MeasurementRow measurement={item} />}
         contentContainerStyle={measurements.length === 0 ? styles.empty : undefined}
         ListEmptyComponent={<Text style={styles.emptyText}>Nog geen metingen</Text>}
+        refreshControl={
+          <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
+        }
       />
     </View>
   )