feat: wire up App.tsx with navigation

App.tsx

@@ -1,20 +1,38 @@
-import { StatusBar } from 'expo-status-bar';
+import React from 'react'
-import { StyleSheet, Text, View } from 'react-native';
+import { NavigationContainer } from '@react-navigation/native'
+import { createNativeStackNavigator } from '@react-navigation/native-stack'
+import DashboardScreen from './src/screens/DashboardScreen'
+import NewMeasurementScreen from './src/screens/NewMeasurementScreen'
+import HistoryScreen from './src/screens/HistoryScreen'
+import SettingsScreen from './src/screens/SettingsScreen'
+
+const Stack = createNativeStackNavigator()
 
 export default function App() {
   return (
-    <View style={styles.container}>
+    <NavigationContainer>
-      <Text>Open up App.tsx to start working on your app!</Text>
+      <Stack.Navigator initialRouteName="Dashboard">
-      <StatusBar style="auto" />
+        <Stack.Screen
-    </View>
+          name="Dashboard"
-  );
+          component={DashboardScreen}
+          options={{ title: 'Weegschaal' }}
+        />
+        <Stack.Screen
+          name="NewMeasurement"
+          component={NewMeasurementScreen}
+          options={{ title: 'Nieuwe meting' }}
+        />
+        <Stack.Screen
+          name="History"
+          component={HistoryScreen}
+          options={{ title: 'Historie' }}
+        />
+        <Stack.Screen
+          name="Settings"
+          component={SettingsScreen}
+          options={{ title: 'Instellingen' }}
+        />
+      </Stack.Navigator>
+    </NavigationContainer>
+  )
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#fff',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});

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,6 +26,15 @@ export default function DashboardScreen({ navigation }: Props) {
   )
 
   return (
+    <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} />
@@ -34,11 +43,15 @@ export default function DashboardScreen({ navigation }: Props) {
           <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' },
 })

tsconfig.json

@@ -1,6 +1,8 @@
 {
   "extends": "expo/tsconfig.base",
   "compilerOptions": {
-    "strict": true
+    "strict": true,
-  }
+    "types": ["jest"]
+  },
+  "exclude": ["tests"]
 }