Progress Chats 1

frontend/package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "@react-native-async-storage/async-storage": "^1.17.3",
         "@react-native-community/netinfo": "^7.1.7",
+        "@react-native-picker/picker": "^2.4.1",
         "@react-native-voice/voice": "^3.2.3",
         "@react-navigation/drawer": "^6.1.8",
         "@react-navigation/native": "^6.0.6",
@@ -3967,6 +3968,15 @@
         "react-native": ">=0.59"
       }
     },
+    "node_modules/@react-native-picker/picker": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/@react-native-picker/picker/-/picker-2.4.1.tgz",
+      "integrity": "sha512-1XWy3IQgwr7MWd30KdY1iUh2gQZD+JiotN1ifj/ptFUYKon/0UFwngKQaWCO/CP/FdLl20/huSSLwKedYrdMMA==",
+      "peerDependencies": {
+        "react": "16 || 17",
+        "react-native": ">=0.57"
+      }
+    },
     "node_modules/@react-native-voice/voice": {
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/@react-native-voice/voice/-/voice-3.2.3.tgz",
@@ -18482,6 +18492,12 @@
       "integrity": "sha512-fkCRkOgzfdD0sr8JTasDgm716l8bJPkCNjXIyllG8K+UyixVa68lroQmgW9pewE5G5p43I9MWPtGZR/kVowBzg==",
       "requires": {}
     },
+    "@react-native-picker/picker": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/@react-native-picker/picker/-/picker-2.4.1.tgz",
+      "integrity": "sha512-1XWy3IQgwr7MWd30KdY1iUh2gQZD+JiotN1ifj/ptFUYKon/0UFwngKQaWCO/CP/FdLl20/huSSLwKedYrdMMA==",
+      "requires": {}
+    },
     "@react-native-voice/voice": {
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/@react-native-voice/voice/-/voice-3.2.3.tgz",

frontend/package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@react-native-async-storage/async-storage": "^1.17.3",
     "@react-native-community/netinfo": "^7.1.7",
+    "@react-native-picker/picker": "^2.4.1",
     "@react-native-voice/voice": "^3.2.3",
     "@react-navigation/drawer": "^6.1.8",
     "@react-navigation/native": "^6.0.6",

frontend/src/router/router.js

@@ -263,7 +263,10 @@ const AppRouter = () => {
           component={Sam}
         />
         <Stack.Screen
-          options={{headerShown: false}}
+          options={{headerShown: true,
+            headerTintColor: 'white',
+            headerStyle: {backgroundColor: Colors.secondary}
+          }}
           name="Progress"
           component={Progress}
         />

frontend/src/screen/Home.js

@@ -51,7 +51,7 @@ export default function Home({ navigation }){
             <View style={styles.imageView}>
               <Image
                 style={styles.image}
-                source={require('../assets/color/background.png')}
+                source={require('../assets/color/progress.png')}
                 resizeMode="contain"></Image>
               <ImageButton path="Progress" title="Progress" />
             </View>

frontend/src/screen/Progress.js

-import React, { Component } from 'react'
-import { StyleSheet, TouchableOpacity, View, Text, Pressable, SafeAreaView, ScrollView, Image, ImageBackground, Dimensions, Animated, Easing, NativeModules } from 'react-native';
+import React, {Component} from 'react';
+import {
+  StyleSheet,
+  TouchableOpacity,
+  View,
+  Text,
+  Pressable,
+  SafeAreaView,
+  ScrollView,
+  Image,
+  ImageBackground,
+  Dimensions,
+  Animated,
+  Easing,
+  NativeModules,
+  Button,
+} from 'react-native';
+import {useNavigation} from '@react-navigation/native';
 
-export default function Progress(){
-    return (
-      <View><Text>ddddddd</Text></View>
-    )
-  }
+export default function Progress() {
+  const Separator = () => <View style={styles.separator} />;
+  const navigation = useNavigation();
+  return (
+    <SafeAreaView style={styles.container}>
+      <View>
+        <Button
+          title="Color Activity"
+          onPress={() =>
+            navigation.navigate('PrimaryType', {
+              title: 'Primary Activities',
+              id: 1,
+            })
+          }></Button>
+      </View>
+      <Separator />
+
+      <View>
+        <Button title="Reading Activity"></Button>
+      </View>
+      <Separator />
+      <View>
+        <Button title="Memory Activity"></Button>
+      </View>
+    </SafeAreaView>
+  );
+}
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginVertical: 20,
+    marginHorizontal: 15,
+  },
+  separator: {
+    marginVertical: 10,
+  },
+});