fix: safe area bottom spacing for buttons above Android nav bar

src/components/MeasurementForm.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useMemo } from 'react'
 import { View, Text, TextInput, TouchableOpacity, StyleSheet, KeyboardAvoidingView, ScrollView } from 'react-native'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import DateTimePicker, { DateTimePickerEvent } from '@react-native-community/datetimepicker'
 import { Measurement } from '../types'
 import { generateId } from '../utils/uuid'
@@ -29,6 +30,7 @@ const fields: FieldDef[] = [
 ]
 
 export default function MeasurementForm({ onSubmit, initialValues }: Props) {
+  const insets = useSafeAreaInsets()
   const [pickerOpen, setPickerOpen] = useState(false)
   const [measurementDate, setMeasurementDate] = useState<Date>(() => {
     if (initialValues?.measuredAt) return new Date(initialValues.measuredAt)
@@ -138,7 +140,7 @@ export default function MeasurementForm({ onSubmit, initialValues }: Props) {
           )
         })}
       </ScrollView>
-      <TouchableOpacity style={styles.button} onPress={handleSubmit}>
+      <TouchableOpacity style={[styles.button, { marginBottom: insets.bottom + 16 }]} onPress={handleSubmit}>
         <Text style={styles.buttonText}>Opslaan</Text>
       </TouchableOpacity>
     </KeyboardAvoidingView>

src/screens/DashboardScreen.tsx

@@ -1,6 +1,7 @@
 import React, { useCallback, useState } from 'react'
 import { View, ScrollView, TouchableOpacity, Text, StyleSheet } from 'react-native'
 import { useFocusEffect } from '@react-navigation/native'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { initDatabase, getAllMeasurements, getLatestMeasurement } from '../database/db'
 import { Measurement } from '../types'
 import LatestMeasurementCard from '../components/LatestMeasurementCard'
@@ -9,6 +10,7 @@ import WeightChart from '../components/WeightChart'
 type Props = { navigation: any }
 
 export default function DashboardScreen({ navigation }: Props) {
+  const insets = useSafeAreaInsets()
   const [latest, setLatest] = useState<Measurement | null>(null)
   const [all, setAll] = useState<Measurement[]>([])
 
@@ -38,11 +40,14 @@ export default function DashboardScreen({ navigation }: Props) {
       <ScrollView style={styles.container}>
         <LatestMeasurementCard measurement={latest} />
         <WeightChart measurements={all} />
+      </ScrollView>
 
-        <TouchableOpacity style={styles.fab} onPress={() => navigation.navigate('NewMeasurement')}>
+      <TouchableOpacity
+        style={[styles.fab, { marginBottom: insets.bottom + 16 }]}
+        onPress={() => navigation.navigate('NewMeasurement')}
+      >
         <Text style={styles.fabText}>+ Nieuwe meting</Text>
       </TouchableOpacity>
-      </ScrollView>
     </View>
   )
 }