Add new activity interface

frontend/src/component/buttonView.js

@@ -5,7 +5,7 @@ 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 {title, image, id, color, des, path} = props;
 
   const navigation = useNavigation();
 
@@ -64,7 +64,7 @@ export default function ColorActivity(props) {
               marginVertical: 10,
             }}
             onPress={() => {
-              navigation.navigate('ReadActivity');
+              navigation.navigate(path);
             }}
           />
         </View>

frontend/src/router/router.js

@@ -11,6 +11,7 @@ import Color from '../screen/Color';
 import Blue from '../screen/activity/Blue';
 import Read from '../screen/Read';
 import ReadActivity from '../screen/activity/readActivity';
+import ReadActivity2 from '../screen/activity/readActivity2';
 const Stack = createNativeStackNavigator();
 
 const AppRouter = () => {
@@ -62,6 +63,11 @@ const AppRouter = () => {
           name="ReadActivity"
           component={ReadActivity}
         />
+        <Stack.Screen
+          options={{headerShown: false}}
+          name="ReadActivity2"
+          component={ReadActivity2}
+        />
       </Stack.Navigator>
     </NavigationContainer>
   );

frontend/src/screen/Read.js

@@ -66,8 +66,14 @@ export default function Read() {
           return <ButtonView title={data.round} color="#00008B" />;
         })} */}
 
-        <ButtonView title="First Round" color="#00008B"></ButtonView>
-        <ButtonView title="Second Round" color="#00008B"></ButtonView>
+        <ButtonView
+          title="First Round"
+          color="#00008B"
+          path="ReadActivity"></ButtonView>
+        <ButtonView
+          title="Second Round"
+          color="#00008B"
+          path="ReadActivity2"></ButtonView>
         {/* <ButtonView title="Third Round" color="#00008B"></ButtonView> */}
       </ScrollView>
     </SafeAreaView>

frontend/src/screen/activity/readActivity.js

@@ -40,7 +40,7 @@ export default function ReadActivity() {
 
             <Image
               style={styles.robo}
-              source={require('../../assets/read/robot1.png')}></Image>
+              source={require('../../assets/read/activity-2-rob.png')}></Image>
           </View>
 
           <View>

frontend/src/screen/activity/readActivity2.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,
+  ImageButton,
+  SafeAreaView,
+  ImageBackground,
+  Button,
+  Image,
+} from 'react-native';
+
+export default function ReadActivity2() {
+  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/activity-2-backg.jpeg')}>
+          <View style={styles.imageContainer}>
+            <View style={styles.imageView}>
+              <View style={styles.robo}>
+                <Image
+                  source={require('../../assets/read/activity-2-rob.png')}></Image>
+              </View>
+            </View>
+            <View style={styles.textBody}>
+              <Text style={styles.text}>Pronounce this Word!</Text>
+            </View>
+          </View>
+          {/* <View style={styles.textBody}>
+            <Text style={styles.text}>Pronounce this Word!</Text>
+          </View>
+          <View style={styles.robo}>
+            <Image
+              source={require('../../assets/read/activity-2-rob.png')}></Image>
+          </View> */}
+
+          <View>
+            <Image
+              style={styles.blackboard}
+              source={require('../../assets/read/backboard3.png')}></Image>
+          </View>
+
+          {/* <View style={{flexDirection: 'row', marginTop: 120}}>
+            <Button style={styles.button} title="Start" />
+          </View> */}
+        </ImageBackground>
+      </View>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  imageContainer: {
+    flexDirection: 'row',
+    marginTop: 70,
+  },
+  imageView: {
+    width: 180,
+    height: 300,
+    // borderWidth:1,
+    // borderColor: "#000",
+    marginHorizontal: 1,
+    marginVertical: 100,
+  },
+  body: {
+    flex: 1,
+  },
+  image: {
+    width: '100%',
+    height: '100%',
+  },
+  box: {
+    width: 180,
+    height: 180,
+    // borderColor: "#000000",
+    backgroundColor: 'blue',
+    marginTop: -370,
+    marginLeft: 455,
+    borderRadius: 100,
+  },
+  blackboard: {
+    marginTop: -320,
+    marginLeft: 200,
+    width: '50%',
+    height: 300,
+  },
+  robo: {
+    marginTop: 90,
+    marginLeft: 5,
+    width: 150,
+    height: 200,
+  },
+  textBody: {
+    marginTop: 150,
+    marginLeft: -30,
+    // backgroundColor: '#00008B',
+    width: 150,
+    borderRadius: 50,
+    padding: 5,
+  },
+  text: {
+    fontSize: 25,
+    justifyContent: 'center',
+    alignItems: 'center',
+    color: '#00008B',
+    textAlign: 'center',
+    fontWeight: 'bold',
+  },
+  
+  button: {
+    padding: 10,
+    marginLeft: 5,
+    color: '#000000',
+  },
+});