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.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
-    },
-    
-
-})
\ No newline at end of file
+  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