Create read activity screen

frontend/src/component/buttonView.js

+import {useNavigation} from '@react-navigation/native';
+import React from 'react';
+import { Text, TouchableOpacity, StyleSheet, View, Image } from 'react-native';
+import {Button, ButtonGroup, withTheme} from 'react-native-elements';
+import {block} from 'react-native-reanimated';
+
+export default function ColorActivity(props) {
+  const {title, image, id, color, des} = props;
+
+  const navigation = useNavigation();
+
+  return (
+    <TouchableOpacity
+      style={{
+        borderWidth: 0.1,
+        borderColor: color,
+        marginVertical: 20,
+        backgroundColor: '#E4E3DB',
+        paddingVertical: 8,
+        paddingHorizontal: 15,
+        padding: 15,
+        width: 375,
+        marginHorizontal: 10,
+        borderRadius: 5,
+        shadowColor: '#000',
+        shadowOffset: {
+          width: 2,
+          height: 2,
+        },
+        shadowOpacity: 0.3,
+        shadowRadius: 1.5,
+      }}>
+      <View style={[{flexDirection: 'row'}]}>
+        <View style={styles.cardImage}>
+          <Image
+            source={require('../assets/read/backboard3.jpeg')}
+            style={{width: 100, height: 100, borderRadius: 20}}></Image>
+        </View>
+
+        <View style={{flex: 0.6}}>
+          {/* <Text style={styles.cardDescription}>{id}</Text> */}
+          <Text style={styles.cardTitle}>{title}</Text>
+          {/* <Text style={styles.cardLocation}>{des}</Text> */}
+          <Button
+            title="START"
+            icon={{
+              name: 'play',
+              type: 'font-awesome',
+              size: 15,
+              color: 'white',
+            }}
+            iconRight
+            iconContainerStyle={{marginRight: 0}}
+            titleStyle={{fontWeight: '700'}}
+            buttonStyle={{
+              backgroundColor: '#2f4f4f',
+              borderColor: 'transparent',
+              borderWidth: 0,
+              borderRadius: 30,
+            }}
+            containerStyle={{
+              width: 150,
+              marginHorizontal: 50,
+              marginVertical: 10,
+            }}
+            onPress={() => {
+              navigation.navigate('ReadActivity');
+            }}
+          />
+        </View>
+      </View>
+    </TouchableOpacity>
+  );
+}
+
+const styles = StyleSheet.create({
+  card: {
+    marginVertical: 20,
+    backgroundColor: '#fff',
+    paddingVertical: 8,
+    paddingHorizontal: 15,
+    padding: 15,
+    width: 380,
+    marginHorizontal: 20,
+    borderRadius: 5,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 2,
+      height: 2,
+    },
+    shadowOpacity: 0.3,
+    shadowRadius: 1.5,
+  },
+  cardTitle: {
+    fontWeight: 'bold',
+    fontSize: 25,
+    marginLeft: 10,
+  },
+  cardLocation: {
+    fontSize: 16,
+    color: '#777',
+    marginLeft: 10,
+  },
+  cardDescription: {
+    fontSize: 18,
+    marginVertical: 8,
+    marginLeft: 10,
+  },
+  cardImage: {
+    padding: 0,
+    flex: 0.4,
+  },
+});

frontend/src/screen/Read.js

 import {useNavigation} from '@react-navigation/native';
 import axios from 'axios';
+import Orientation from 'react-native-orientation-locker';
 import React, {useState, useEffect} from 'react';
 import {
   StyleSheet,
@@ -16,7 +17,7 @@ import {
   NativeModules,
 } from 'react-native';
 import ImageButton from '../component/ImageButton';
-import ColorActivity from '../component/colorActivity';
+import ButtonView from '../component/buttonView';
 
 // const {width,height} = Dimensions.get('screen');
 const webUrel = 'http://192.168.8.101:5000/ru';
@@ -26,24 +27,17 @@ export default function Read() {
 
   const navigation = useNavigation();
 
-  function getSMSReport() {
-    axios
-      .get(webUrel)
-      .then(response => {
-        console.log(response);
-      })
-      .catch(err => {
-        setNotify({
-          isOpen: true,
-          message: err.message,
-          type: 'warning',
-        });
-      });
-  }
+  React.useEffect(() => {
+    const unsubscribe = navigation.addListener('focus', () => {
+      // The screen is focused
+      // Call any action
+      Orientation.unlockAllOrientations();
+      Orientation.lockToPortrait();
+    });
 
-  useEffect(() => {
-    getSMSReport();
-  });
+    // Return the function to unsubscribe from the event so it gets removed on unmount
+    return unsubscribe;
+  }, [navigation]);
 
   return (
     <SafeAreaView>
@@ -51,22 +45,16 @@ export default function Read() {
         <View>
           <View>
             <ImageBackground
-              source={require('../assets/color/background.png')}
+              source={require('../assets/read/background3.jpeg')}
               style={styles.image}>
               <Text style={styles.title}>Read Activity</Text>
             </ImageBackground>
           </View>
         </View>
 
-        <ColorActivity></ColorActivity>
-
-        <ColorActivity></ColorActivity>
-
-        <ColorActivity></ColorActivity>
-
-        <ColorActivity></ColorActivity>
-
-        <ColorActivity></ColorActivity>
+        <ButtonView title="First Round" color="#00008B"></ButtonView>
+        <ButtonView title="Second Round" color="#00008B"></ButtonView>
+        <ButtonView title="Third Round" color="#00008B"></ButtonView>
       </ScrollView>
     </SafeAreaView>
   );
@@ -94,7 +82,7 @@ const styles = StyleSheet.create({
     color: 'white',
     fontSize: 40,
     position: 'absolute',
-    left: 50,
-    bottom: 50,
+    left: 90,
+    bottom: 90,
   },
 });

frontend/src/screen/activity/readActivity.js

+import {useNavigation} from '@react-navigation/native';
+import Orientation from 'react-native-orientation-locker';
+import React, {useEffect, useState} from 'react';
+import {
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  View,
+  Dimensions,
+  SafeAreaView,
+  ImageBackground,
+  Button,
+  Image,
+} from 'react-native';
+
+export default function ReadActivity() {
+  const navigation = useNavigation();
+
+  React.useEffect(() => {
+    const unsubscribe = navigation.addListener('focus', () => {
+      // The screen is focused
+      // Call any action
+      Orientation.unlockAllOrientations();
+      Orientation.lockToLandscape();
+    });
+
+    return unsubscribe;
+  }, [navigation]);
+
+  return (
+    <SafeAreaView>
+      <View style={{flexDirection: 'column'}}>
+        <ImageBackground
+          style={styles.image}
+          source={require('../../assets/read/background2.jpeg')}>
+          <View>
+            <View style={styles.textBody}>
+              <Text style={styles.text}>Say the name of this color?</Text>
+            </View>
+
+            <Image
+              style={styles.robo}
+              source={require('../../assets/read/robot1.png')}></Image>
+          </View>
+
+          <View>
+            <Image
+              style={styles.blackboard}
+              source={require('../../assets/read/reading.png')}></Image>
+          </View>
+
+          <View style={{flexDirection: 'row', marginLeft: 580, marginTop: -30}}>
+            <Button style={styles.button} title="Start" />
+          </View>
+        </ImageBackground>
+      </View>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  body: {
+    flex: 1,
+  },
+  image: {
+    width: '100%',
+    height: '100%',
+  },
+  box: {
+    width: 180,
+    height: 180,
+    // borderColor: "#000000",
+    backgroundColor: 'blue',
+    marginTop: -370,
+    marginLeft: 455,
+    borderRadius: 100,
+  },
+  aa: {
+    marginTop: -120,
+  },
+  blackboard: {
+    marginTop: -320,
+    marginLeft: 240,
+    width: '50%',
+    height: 300,
+  },
+  robo: {
+    marginTop: -70,
+    marginLeft: -5,
+    width: 150,
+    height: 200,
+  },
+  textBody: {
+    marginTop: 150,
+    marginLeft: 95,
+    backgroundColor: '#1DCE92',
+    width: 200,
+    borderRadius: 50,
+    padding: 5,
+  },
+  text: {
+    fontSize: 25,
+    justifyContent: 'center',
+    alignItems: 'center',
+    color: 'white',
+    textAlign: 'center',
+    fontWeight: 'bold',
+  },
+  button: {
+    padding: 10,
+    marginRight: 50,
+    color: '#000000',
+  },
+});