diff --git a/src/components/MeasurementRow.tsx b/src/components/MeasurementRow.tsx
new file mode 100644
index 0000000..0e4d4d8
--- /dev/null
+++ b/src/components/MeasurementRow.tsx
@@ -0,0 +1,54 @@
+import React from 'react'
+import { View, Text, StyleSheet } from 'react-native'
+import { Measurement } from '../types'
+
+type Props = { measurement: Measurement }
+
+export default function MeasurementRow({ measurement }: Props) {
+ return (
+
+
+
+ {new Date(measurement.measuredAt).toLocaleDateString('nl-NL', {
+ weekday: 'short',
+ day: 'numeric',
+ month: 'long',
+ year: 'numeric',
+ })}
+
+
+ {new Date(measurement.measuredAt).toLocaleTimeString('nl-NL', {
+ hour: '2-digit',
+ minute: '2-digit',
+ })}
+
+
+
+ {measurement.weight.toFixed(1)} kg
+ BMI {measurement.bmi.toFixed(1)}
+
+
+ )
+}
+
+const styles = StyleSheet.create({
+ row: {
+ flexDirection: 'row',
+ justifyContent: 'space-between',
+ backgroundColor: '#fff',
+ padding: 16,
+ marginHorizontal: 16,
+ marginVertical: 4,
+ borderRadius: 8,
+ shadowColor: '#000',
+ shadowOpacity: 0.05,
+ shadowRadius: 4,
+ elevation: 2,
+ },
+ left: {},
+ date: { fontSize: 14, fontWeight: '600' },
+ time: { fontSize: 12, color: '#666', marginTop: 2 },
+ right: { alignItems: 'flex-end' },
+ weight: { fontSize: 18, fontWeight: '700' },
+ detail: { fontSize: 12, color: '#666' },
+})
diff --git a/src/screens/HistoryScreen.tsx b/src/screens/HistoryScreen.tsx
new file mode 100644
index 0000000..b1b4bc7
--- /dev/null
+++ b/src/screens/HistoryScreen.tsx
@@ -0,0 +1,41 @@
+import React, { useCallback, useState } from 'react'
+import { View, FlatList, StyleSheet, Text } from 'react-native'
+import { useFocusEffect } from '@react-navigation/native'
+import { initDatabase, getAllMeasurements } from '../database/db'
+import { Measurement } from '../types'
+import MeasurementRow from '../components/MeasurementRow'
+
+export default function HistoryScreen() {
+ const [measurements, setMeasurements] = useState([])
+
+ useFocusEffect(
+ useCallback(() => {
+ const load = async () => {
+ await initDatabase()
+ const all = await getAllMeasurements()
+ setMeasurements(all)
+ }
+ load()
+ }, [])
+ )
+
+ return (
+
+ {measurements.length} metingen
+ item.id}
+ renderItem={({ item }) => }
+ contentContainerStyle={measurements.length === 0 ? styles.empty : undefined}
+ ListEmptyComponent={Nog geen metingen}
+ />
+
+ )
+}
+
+const styles = StyleSheet.create({
+ container: { flex: 1, backgroundColor: '#f5f5f5' },
+ count: { fontSize: 14, color: '#666', padding: 16, paddingBottom: 8 },
+ empty: { flex: 1, justifyContent: 'center', alignItems: 'center' },
+ emptyText: { fontSize: 16, color: '#999' },
+})