Change ReadActivity

.idea/misc.xml

 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
-  <component name="ProjectRootManager" version="2" project-jdk-name="Python 3.9" project-jdk-type="Python SDK" />
+  <component name="ProjectRootManager" version="2" project-jdk-name="Python 3.8" project-jdk-type="Python SDK" />
 </project>
\ No newline at end of file

frontend/package-lock.json

@@ -15,6 +15,7 @@
         "native-base": "^3.2.2",
         "react": "17.0.2",
         "react-native": "0.66.2",
+        "react-native-elements": "^3.4.2",
         "react-native-fontawesome": "^7.0.0",
         "react-native-gesture-handler": "^1.10.3",
         "react-native-orientation-locker": "^1.4.0",
@@ -4492,6 +4493,43 @@
       "integrity": "sha512-Fo79ojj3vdEZOHg3wR9ksAMRz4P3S5fDB5e/YWZiFnyFQI1WY2Vftu9XoXVVtJfxB7Bpce/QTqWSSntkz2Znrw==",
       "dev": true
     },
+    "node_modules/@types/prop-types": {
+      "version": "15.7.4",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.4.tgz",
+      "integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ=="
+    },
+    "node_modules/@types/react": {
+      "version": "17.0.38",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.38.tgz",
+      "integrity": "sha512-SI92X1IA+FMnP3qM5m4QReluXzhcmovhZnLNm3pyeQlooi02qI7sLiepEYqT678uNiyc25XfCqxREFpy3W7YhQ==",
+      "dependencies": {
+        "@types/prop-types": "*",
+        "@types/scheduler": "*",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@types/react-native": {
+      "version": "0.66.11",
+      "resolved": "https://registry.npmjs.org/@types/react-native/-/react-native-0.66.11.tgz",
+      "integrity": "sha512-DFuNMhRuyKMbJrI/s3rIuM5io+tIOK4Iq9oMzatWX5bIgfjZM86X1aA/epE0ipw1aFaoHKermK3fLG1bqFzzDQ==",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
+    "node_modules/@types/react-native-vector-icons": {
+      "version": "6.4.10",
+      "resolved": "https://registry.npmjs.org/@types/react-native-vector-icons/-/react-native-vector-icons-6.4.10.tgz",
+      "integrity": "sha512-z4sexbuZ7nmYsp7Z9YB5fSQoN3KFn6nZA3QsCkQLOYnVmVlxX4U22v/bM9Xx/6dOA1vClxoRZo2CFDX16uryXQ==",
+      "dependencies": {
+        "@types/react": "*",
+        "@types/react-native": "*"
+      }
+    },
+    "node_modules/@types/scheduler": {
+      "version": "0.16.2",
+      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
+      "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
+    },
     "node_modules/@types/stack-utils": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.1.tgz",
@@ -6149,7 +6187,6 @@
       "version": "4.2.2",
       "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
       "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -12045,6 +12082,14 @@
         "node": ">=4"
       }
     },
+    "node_modules/opencollective-postinstall": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/opencollective-postinstall/-/opencollective-postinstall-2.0.3.tgz",
+      "integrity": "sha512-8AV/sCtuzUeTo8gQK5qDZzARrulB3egtLzFgteqB2tcT4Mw7B8Kt7JcDHmltjz6FOAHsvTevk70gZEbhM4ZS9Q==",
+      "bin": {
+        "opencollective-postinstall": "index.js"
+      }
+    },
     "node_modules/optionator": {
       "version": "0.9.1",
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.1.tgz",
@@ -12617,6 +12662,26 @@
         "nullthrows": "^1.1.1"
       }
     },
+    "node_modules/react-native-elements": {
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/react-native-elements/-/react-native-elements-3.4.2.tgz",
+      "integrity": "sha512-m0eAWOn7JuR1wNTNY0WHuaqst4LI/gFE4N5Bbyfsc4DiryWsMST7aAg5w/Gos4IexWIzhLKCIkPxthND1m/8Xg==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@types/react-native-vector-icons": "^6.4.6",
+        "color": "^3.1.2",
+        "deepmerge": "^4.2.2",
+        "hoist-non-react-statics": "^3.3.2",
+        "lodash.isequal": "^4.5.0",
+        "opencollective-postinstall": "^2.0.3",
+        "react-native-ratings": "8.0.4",
+        "react-native-size-matters": "^0.3.1"
+      },
+      "peerDependencies": {
+        "react-native-safe-area-context": "^3.1.9",
+        "react-native-vector-icons": ">7.0.0"
+      }
+    },
     "node_modules/react-native-fontawesome": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/react-native-fontawesome/-/react-native-fontawesome-7.0.0.tgz",
@@ -12644,6 +12709,18 @@
         "react-native-windows": ">=0.63.3"
       }
     },
+    "node_modules/react-native-ratings": {
+      "version": "8.0.4",
+      "resolved": "https://registry.npmjs.org/react-native-ratings/-/react-native-ratings-8.0.4.tgz",
+      "integrity": "sha512-Xczu5lskIIRD6BEdz9A0jDRpEck/SFxRqiglkXi0u67yAtI1/pcJC76P4MukCbT8K4BPVl+42w83YqXBoBRl7A==",
+      "dependencies": {
+        "lodash": "^4.17.15"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
     "node_modules/react-native-reanimated": {
       "version": "2.2.4",
       "resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-2.2.4.tgz",
@@ -12682,6 +12759,14 @@
         "react-native": "*"
       }
     },
+    "node_modules/react-native-size-matters": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/react-native-size-matters/-/react-native-size-matters-0.3.1.tgz",
+      "integrity": "sha512-mKOfBLIBFBcs9br1rlZDvxD5+mAl8Gfr5CounwJtxI6Z82rGrMO+Kgl9EIg3RMVf3G855a85YVqHJL2f5EDRlw==",
+      "peerDependencies": {
+        "react-native": "*"
+      }
+    },
     "node_modules/react-native-vector-icons": {
       "version": "9.0.0",
       "resolved": "https://registry.npmjs.org/react-native-vector-icons/-/react-native-vector-icons-9.0.0.tgz",
@@ -18959,6 +19044,43 @@
       "integrity": "sha512-Fo79ojj3vdEZOHg3wR9ksAMRz4P3S5fDB5e/YWZiFnyFQI1WY2Vftu9XoXVVtJfxB7Bpce/QTqWSSntkz2Znrw==",
       "dev": true
     },
+    "@types/prop-types": {
+      "version": "15.7.4",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.4.tgz",
+      "integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ=="
+    },
+    "@types/react": {
+      "version": "17.0.38",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.38.tgz",
+      "integrity": "sha512-SI92X1IA+FMnP3qM5m4QReluXzhcmovhZnLNm3pyeQlooi02qI7sLiepEYqT678uNiyc25XfCqxREFpy3W7YhQ==",
+      "requires": {
+        "@types/prop-types": "*",
+        "@types/scheduler": "*",
+        "csstype": "^3.0.2"
+      }
+    },
+    "@types/react-native": {
+      "version": "0.66.11",
+      "resolved": "https://registry.npmjs.org/@types/react-native/-/react-native-0.66.11.tgz",
+      "integrity": "sha512-DFuNMhRuyKMbJrI/s3rIuM5io+tIOK4Iq9oMzatWX5bIgfjZM86X1aA/epE0ipw1aFaoHKermK3fLG1bqFzzDQ==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
+    "@types/react-native-vector-icons": {
+      "version": "6.4.10",
+      "resolved": "https://registry.npmjs.org/@types/react-native-vector-icons/-/react-native-vector-icons-6.4.10.tgz",
+      "integrity": "sha512-z4sexbuZ7nmYsp7Z9YB5fSQoN3KFn6nZA3QsCkQLOYnVmVlxX4U22v/bM9Xx/6dOA1vClxoRZo2CFDX16uryXQ==",
+      "requires": {
+        "@types/react": "*",
+        "@types/react-native": "*"
+      }
+    },
+    "@types/scheduler": {
+      "version": "0.16.2",
+      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
+      "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
+    },
     "@types/stack-utils": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.1.tgz",
@@ -20258,8 +20380,7 @@
     "deepmerge": {
       "version": "4.2.2",
       "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
-      "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==",
-      "dev": true
+      "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg=="
     },
     "defaults": {
       "version": "1.0.3",
@@ -24822,6 +24943,11 @@
         }
       }
     },
+    "opencollective-postinstall": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/opencollective-postinstall/-/opencollective-postinstall-2.0.3.tgz",
+      "integrity": "sha512-8AV/sCtuzUeTo8gQK5qDZzARrulB3egtLzFgteqB2tcT4Mw7B8Kt7JcDHmltjz6FOAHsvTevk70gZEbhM4ZS9Q=="
+    },
     "optionator": {
       "version": "0.9.1",
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.1.tgz",
@@ -25260,6 +25386,21 @@
         "nullthrows": "^1.1.1"
       }
     },
+    "react-native-elements": {
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/react-native-elements/-/react-native-elements-3.4.2.tgz",
+      "integrity": "sha512-m0eAWOn7JuR1wNTNY0WHuaqst4LI/gFE4N5Bbyfsc4DiryWsMST7aAg5w/Gos4IexWIzhLKCIkPxthND1m/8Xg==",
+      "requires": {
+        "@types/react-native-vector-icons": "^6.4.6",
+        "color": "^3.1.2",
+        "deepmerge": "^4.2.2",
+        "hoist-non-react-statics": "^3.3.2",
+        "lodash.isequal": "^4.5.0",
+        "opencollective-postinstall": "^2.0.3",
+        "react-native-ratings": "8.0.4",
+        "react-native-size-matters": "^0.3.1"
+      }
+    },
     "react-native-fontawesome": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/react-native-fontawesome/-/react-native-fontawesome-7.0.0.tgz",
@@ -25283,6 +25424,14 @@
       "integrity": "sha512-O/Ki7uw1lltKiTZLcTuLcSh4EzLFqXKKo2J4cLKvyG52YiEawbn/ipsZriZlWzK0mhX4dSe79CoRS4IsyUs1fw==",
       "requires": {}
     },
+    "react-native-ratings": {
+      "version": "8.0.4",
+      "resolved": "https://registry.npmjs.org/react-native-ratings/-/react-native-ratings-8.0.4.tgz",
+      "integrity": "sha512-Xczu5lskIIRD6BEdz9A0jDRpEck/SFxRqiglkXi0u67yAtI1/pcJC76P4MukCbT8K4BPVl+42w83YqXBoBRl7A==",
+      "requires": {
+        "lodash": "^4.17.15"
+      }
+    },
     "react-native-reanimated": {
       "version": "2.2.4",
       "resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-2.2.4.tgz",
@@ -25309,6 +25458,12 @@
         "warn-once": "^0.1.0"
       }
     },
+    "react-native-size-matters": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/react-native-size-matters/-/react-native-size-matters-0.3.1.tgz",
+      "integrity": "sha512-mKOfBLIBFBcs9br1rlZDvxD5+mAl8Gfr5CounwJtxI6Z82rGrMO+Kgl9EIg3RMVf3G855a85YVqHJL2f5EDRlw==",
+      "requires": {}
+    },
     "react-native-vector-icons": {
       "version": "9.0.0",
       "resolved": "https://registry.npmjs.org/react-native-vector-icons/-/react-native-vector-icons-9.0.0.tgz",

frontend/package.json

@@ -17,6 +17,7 @@
     "native-base": "^3.2.2",
     "react": "17.0.2",
     "react-native": "0.66.2",
+    "react-native-elements": "^3.4.2",
     "react-native-fontawesome": "^7.0.0",
     "react-native-gesture-handler": "^1.10.3",
     "react-native-orientation-locker": "^1.4.0",

frontend/src/screen/Read.js

@@ -20,14 +20,25 @@ import ImageButton from '../component/ImageButton';
 import ButtonView from '../component/buttonView';
 
 // const {width,height} = Dimensions.get('screen');
-const webUrel = 'http://192.168.8.101:5000/ru';
+const webUrel = 'http://127.0.0.1:5000/reading';
 
 export default function Read() {
-  const [names, setNames] = useState([]);
+  const [activity, setActivity] = useState([]);
 
   const navigation = useNavigation();
 
+  function getColorActivities() {
+    axios
+      .get(webUrel)
+      .then(response => {
+        setActivity(response.data);
+        console.log('response.data');
+      })
+      .catch(err => {});
+  }
+
   React.useEffect(() => {
+    getColorActivities();
     const unsubscribe = navigation.addListener('focus', () => {
       // The screen is focused
       // Call any action
@@ -52,6 +63,10 @@ export default function Read() {
           </View>
         </View>
 
+        {/* {activity.map((data, index) => {
+          return <ButtonView title={data.round} color="#00008B" />;
+        })} */}
+
         <ButtonView title="First Round" color="#00008B"></ButtonView>
         <ButtonView title="Second Round" color="#00008B"></ButtonView>
         <ButtonView title="Third Round" color="#00008B"></ButtonView>

frontend/src/screen/activity/readActivity.js

@@ -35,7 +35,7 @@ export default function ReadActivity() {
           source={require('../../assets/read/background2.jpeg')}>
           <View>
             <View style={styles.textBody}>
-              <Text style={styles.text}>Say the name of this color?</Text>
+              <Text style={styles.text}>Pronounce this Word!</Text>
             </View>
 
             <Image
@@ -93,7 +93,7 @@ const styles = StyleSheet.create({
   textBody: {
     marginTop: 150,
     marginLeft: 95,
-    backgroundColor: '#1DCE92',
+    backgroundColor: '#00008B',
     width: 200,
     borderRadius: 50,
     padding: 5,

frontend/src/screen/home.js

@@ -10,57 +10,54 @@ export default function Home({ navigation }){
 
     return (
       <SafeAreaView>
-      <ScrollView>
-        <View style={styles.imageContainer}>
-          <View style={styles.imageView}>
-            <Image
-              style={styles.image}
-              source={require('../assets/color/background.png')}
-              resizeMode="contain"></Image>
-            <ImageButton path="Color" title="Color Activity" />
+        <ScrollView>
+          <View style={styles.imageContainer}>
+            <View style={styles.imageView}>
+              <Image
+                style={styles.image}
+                source={require('../assets/color/background.png')}
+                resizeMode="contain"></Image>
+              <ImageButton path="Color" title="Color Activity" />
+            </View>
+            <View style={styles.imageView}>
+              <Image
+                style={styles.image}
+                source={require('../assets/read/background4.jpg')}
+                resizeMode="contain"></Image>
+              <ImageButton path="Read" title="Read Activity" />
+            </View>
           </View>
-          <View style={styles.imageView}>
-            <Image
-              style={styles.image}
-              source={require('../assets/color/background.png')}
-              resizeMode="contain"></Image>
-            <ImageButton path="Read" title="Read Activity" />
+          <View style={styles.imageContainer}>
+            <View style={styles.imageView}>
+              <Image
+                style={styles.image}
+                source={require('../assets/color/background.png')}
+                resizeMode="contain"></Image>
+              <ImageButton path="Progress" title="Progress Chack" />
+            </View>
           </View>
-        </View>
-        <View style={styles.imageContainer}>
-          <View style={styles.imageView}>
-            <Image
-              style={styles.image}
-              source={require('../assets/color/background.png')}
-              resizeMode="contain"></Image>
-            <ImageButton path="Progress" title="Progress Chack" />
-          </View>
-        </View>
-      </ScrollView>
-    </SafeAreaView>
+        </ScrollView>
+      </SafeAreaView>
     );
 
 }
 
 const styles = StyleSheet.create({
-
-    imageContainer:{
-        flexDirection: "row",
-        marginTop: 70,
-    },
-    imageView: {
-        width: 180,
-        height: 300,
-        // borderWidth:1,
-        // borderColor: "#000",
-        marginHorizontal: 15,
-        borderRadius: 50
-    },
-    image: {
-        width: "100%",
-        height: "100%",
-        borderRadius: 50
-    },
-    
+  imageContainer: {
+    flexDirection: 'row',
+    marginTop: 70,
+  },
+  imageView: {
+    width: 180,
+    height: 300,
+    // borderWidth:1,
+    // borderColor: "#000",
+    marginHorizontal: 15,
+    borderRadius: 50,
+  },
+  image: {
+    width: '100%',
+    height: '100%',
+    borderRadius: 50,
+  },
+});
\ No newline at end of file
-
-})
\ No newline at end of file