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

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