feat: wire up App.tsx with navigation

src/components/WeightChart.tsx

@@ -35,7 +35,7 @@ export default function WeightChart({ measurements }: Props) {
           backgroundColor: '#ffffff',
           backgroundGradientFrom: '#ffffff',
           backgroundGradientTo: '#ffffff',
-          decimalCount: 1,
+          decimalPlaces: 1,
           color: (opacity = 1) => `rgba(76, 175, 80, ${opacity})`,
           labelColor: () => '#666',
         }}

src/screens/DashboardScreen.tsx

@@ -26,19 +26,32 @@ export default function DashboardScreen({ navigation }: Props) {
   )
 
   return (
-    <ScrollView style={styles.container}>
-      <LatestMeasurementCard measurement={latest} />
-      <WeightChart measurements={all} />
+    <View style={styles.outer}>
+      <View style={styles.navBar}>
+        <TouchableOpacity onPress={() => navigation.navigate('History')}>
+          <Text style={styles.navLink}>Historie</Text>
+        </TouchableOpacity>
+        <TouchableOpacity onPress={() => navigation.navigate('Settings')}>
+          <Text style={styles.navLink}>Instellingen</Text>
+        </TouchableOpacity>
+      </View>
+      <ScrollView style={styles.container}>
+        <LatestMeasurementCard measurement={latest} />
+        <WeightChart measurements={all} />
 
-      <TouchableOpacity style={styles.fab} onPress={() => navigation.navigate('NewMeasurement')}>
-        <Text style={styles.fabText}>+ Nieuwe meting</Text>
-      </TouchableOpacity>
-    </ScrollView>
+        <TouchableOpacity style={styles.fab} onPress={() => navigation.navigate('NewMeasurement')}>
+          <Text style={styles.fabText}>+ Nieuwe meting</Text>
+        </TouchableOpacity>
+      </ScrollView>
+    </View>
   )
 }
 
 const styles = StyleSheet.create({
-  container: { flex: 1, backgroundColor: '#f5f5f5' },
+  outer: { flex: 1, backgroundColor: '#f5f5f5' },
+  container: { flex: 1 },
+  navBar: { flexDirection: 'row', justifyContent: 'space-around', padding: 12, backgroundColor: '#fff', borderBottomWidth: 1, borderBottomColor: '#eee' },
+  navLink: { fontSize: 16, color: '#2196F3', fontWeight: '600' },
   fab: { backgroundColor: '#4CAF50', padding: 16, borderRadius: 8, margin: 16, alignItems: 'center' },
   fabText: { color: '#fff', fontSize: 16, fontWeight: '700' },
 })