Merge branch 'master' of http://gitlab.sliit.lk/21_22-j-38/21_22j-38 into it18218640

API/app.py

@@ -155,14 +155,14 @@ def login():
     userId = user[0]
     if userId == 0:
         data = {
-            "body": [],
+            "userId": [],
             "message": "Failed",
             "status": 404
         }
     else:
         token = saveUserSession(userId)
         data = {
-            "body": user,
+            "body": userId,
             "token": token,
             "message": "Success",
             "status": 200
@@ -176,11 +176,11 @@ def logout():
     req = request.get_json()
     token = req['token']
     if(logoutUser(token) == 1):
-        data = {
+        response = {
             "message": "Success",
             "status": 200
         }
-    body = jsonify(data)
+    body = jsonify(response)
     return make_response(body)
 
 @app.route("/readingSession", methods=['POST'])
@@ -188,25 +188,30 @@ def reading_session():
     req = request.get_json()
     userId = req['userId']
     token = save_session_details(userId, 1)
-    data = {
+    response = {
         "token": token,
         "message": "Success",
         "status": 200
     }
-    body = jsonify(data)
+    body = jsonify(response)
     return make_response(body)
 
 
-@app.route("/reading", methods=['POST'])
-def reading():
+@app.route("/reading/<readingToken>", methods=['POST'])
+def reading(readingToken):
+    assert readingToken == request.view_args['readingToken']
+    token = readingToken
     req = request.get_json()
     word = req['word']
     userId = req['userId']
-    token = req['token']
     level = req['level']
     triedCount = req['triedCount']
     result = save_activity_details(userId, word, token, level, triedCount)
-    body = jsonify(word)
+    response = {
+        "message": "Success",
+        "status": 200
+    }
+    body = jsonify(response)
     return make_response(body)
 
 if __name__ == "__main__":

frontend/src/component/reading/ReadCategory.js

@@ -33,11 +33,10 @@ const ReadCategory = props => {
           console.log(res.data);
           const token = res.data.token;
           try {
-            AsyncStorage.setItem('token', token);
+            AsyncStorage.setItem('readingSession', token);
           } catch (error) {
             console.log(error);
           }
-
           navigation.navigate(path);
         }
       })

frontend/src/router/router.js

@@ -3,7 +3,7 @@ import {NavigationContainer} from '@react-navigation/native';
 import {createNativeStackNavigator} from '@react-navigation/native-stack';
 import Colors from '../constants/Colors';
 
-import Home from '../screen/home';
+import Home from '../screen/Home';
 import Start from '../screen/Start';
 import Register from '../screen/auth/Register';
 import Login from '../screen/auth/Login';

frontend/src/screen/Read.js

@@ -51,19 +51,16 @@ export default function Read() {
         </View> */}
         <TouchableOpacity style={styles.screen}>
           <ReadCategory
-            id={1}
             title={'Basic'}
             image={ImagePaths.roundOne}
             path={'ReadActivity'}
           />
           <ReadCategory
-            id={1}
             title={'Advanced'}
             image={ImagePaths.roundTwo}
             path={'ReadActivityBird'}
           />
           <ReadCategory
-            id={1}
             title={'Result & Summery'}
             image={ImagePaths.summery}
             path={'ReadActivity'}

frontend/src/screen/Start.js

 import React from "react";
-import { SafeAreaView, ScrollView, View, Text } from "react-native";
+import {SafeAreaView, ScrollView, View, Text, Button} from 'react-native';
 import { NavigationContainer } from "@react-navigation/native";
 import { createDrawerNavigator, DrawerItem } from "@react-navigation/drawer";
 import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
 
-import Home from "./home";
-import profile from "./profile";
-import report from "./report";
+import Home from "./Home";
+import profile from "./Profile";
+import report from "./Report";
+import Login from "./auth/Login";
 
 const Drawer = createDrawerNavigator();
 
 function Start() {
 
     return (
-
-        <Drawer.Navigator
+      <Drawer.Navigator
         initialRouteName="Home"
         screenOptions={{
           hearderTitleAlign: 'right',
           alignItems: 'center',
           justifyContent: 'center',
-          headerStyle:{
-            backgroundColor: '#1DCE92'
+          headerStyle: {
+            backgroundColor: '#1DCE92',
           },
-          headerTintColor: '#ffffff'
+          headerTintColor: '#ffffff',
         }}>
-  
-          <Drawer.Screen name="Home"
-            component={Home}
-            options={{
-              title: 'Home',
-              drawerIcon: ({focused}) => (
-                <FontAwesome5
-                  name="home"
-                  size={focused ? 25:20} 
-                  color={focused ? '#1DCE92' : '#0096FF'} 
-                />
-              )
-            }}
-          />
+        <Drawer.Screen
+          name="Home"
+          component={Home}
+          options={{
+            title: 'Home',
+            drawerIcon: ({focused}) => (
+              <FontAwesome5
+                name="home"
+                size={focused ? 25 : 20}
+                color={focused ? '#1DCE92' : '#0096FF'}
+              />
+            ),
+          }}
+        />
 
-          <Drawer.Screen name="Profile"
-            component={profile}
-            options={{
-              title: 'Profile',
-              drawerIcon: ({focused}) => (
-                <FontAwesome5
-                  name="users"
-                  size={focused ? 25:20} 
-                  color={focused ? '#1DCE92' : '#0096FF'} 
-                />
-              )
-            }}
-          />
-  
-          <Drawer.Screen name="Report"
-            component={report}
-            options={{
-              title: 'Report',
-              drawerIcon: ({focused}) => (
-                <FontAwesome5
-                  name="chart-line"
-                  size={focused ? 25:20}
-                  color={focused ? '#1DCE92' : '#0096FF'} 
-                />
-              )
-            }}
-          />
-  
-  
-        </Drawer.Navigator>
+        <Drawer.Screen
+          name="Profile"
+          component={profile}
+          options={{
+            title: 'Profile',
+            drawerIcon: ({focused}) => (
+              <FontAwesome5
+                name="users"
+                size={focused ? 25 : 20}
+                color={focused ? '#1DCE92' : '#0096FF'}
+              />
+            ),
+          }}
+        />
+
+        <Drawer.Screen
+          name="Report"
+          component={report}
+          options={{
+            title: 'Report',
+            drawerIcon: ({focused}) => (
+              <FontAwesome5
+                name="chart-line"
+                size={focused ? 25 : 20}
+                color={focused ? '#1DCE92' : '#0096FF'}
+              />
+            ),
+          }}
+        />
 
+      </Drawer.Navigator>
     );
   
   }

frontend/src/screen/auth/Login.js

@@ -98,7 +98,9 @@ const Login = () => {
         }
         if (response.data.status == 200) {
           const userToken = res.data.token;
+          const userId = res.data.userId;
           AsyncStorage.setItem('userToken', userToken);
+          AsyncStorage.setItem('userId', userId);
           return navigation.navigate('Start');
         }
       })

frontend/src/screen/profile.js

 import React from "react";
 import { StyleSheet, View, Text, Pressable } from 'react-native';
 
-export default function profile({ navigation }){
+export default function Pofile({ navigation }){
 
     const onPressHandler = () => {
         navigation.navigate('Start');

frontend/src/screen/reading/ReadActivity.js

@@ -24,6 +24,10 @@ export default function ReadActivity() {
   const [results, setResults] = useState([]);
   const [partialResults, setPartialResults] = useState([]);
 
+  useEffect(() => {
+    Voice.destroy().then(Voice.removeAllListeners);
+  }, []);
+
   useEffect(() => {
     Voice.onSpeechStart = onSpeechStartHandler;
     Voice.onSpeechEnd = onSpeechEndHandler;

frontend/src/screen/reading/advanced/ReadActivityBird.js

@@ -21,11 +21,12 @@ import AsyncStorage from '@react-native-async-storage/async-storage';
 import {Authorize} from '../../auth/AuthenticateUser';
 
 export default function ReadActivityBird() {
-  const userToken = Authorize();
+  // const userToken = Authorize();
+  const navigation = useNavigation();
+  
   const [error, setError] = useState('');
   const [readingData, setReadingData] = useState({activity: ''});
-  const readToken = AsyncStorage.getItem('readingSession');
-
+  // let user = AsyncStorage.getItem('readingSession');
   // useEffect(() => {
   //   if (Authorize) {
   //   }
@@ -42,15 +43,33 @@ export default function ReadActivityBird() {
     };
   }, []);
 
-  useEffect(() => {
-    AsyncStorage.getItem('token')
-      .then(value => {
-        console.log(value);
+  const getToken = data => {
+    AsyncStorage.getItem('readingSession')
+      .then(readingSession => {
+      
+        sendRedingData(data, readingSession);
       })
       .catch(error => {
         console.log(error);
       });
-  }, []);
+  };
+
+  const sendRedingData = (data, readingSession) => {
+    console.log('itemValue', data);
+    Client.post('reading/'+readingSession, JSON.stringify(data), {
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+      },
+    })
+      .then(res => {
+        console.log(res.data);
+        navigation.navigate('ReadActivity');
+      })
+      .catch(error => {
+        console.log(error);
+      });
+  };
 
   const onSpeechStartHandler = e => {
     console.log('start handler =>> ', e);
@@ -65,20 +84,19 @@ export default function ReadActivityBird() {
   };
 
   const onSpeechError = e => {
-    console.log('onSpeechError: ', e);
     setError(JSON.stringify(e.error));
     const result = DummyReadResult.value;
     const data = {
       word: 'bird',
       userId: 1,
-      token: readToken,
       level: 1,
       triedCount: 1,
     };
     if (result.includes('hello')) {
       setReadingData(data);
-      console.log(localStorage.getItem('readingSession'));
-      sendRedingData(data);
+      console.log('data', getToken());
+      console.log('readingData:', readingData);
+      getToken(data);
     }
   };
 
@@ -90,21 +108,6 @@ export default function ReadActivityBird() {
     }
   };
 
-  const sendRedingData = data => {
-    Client.post('reading', JSON.stringify(data), {
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json',
-      },
-    })
-      .then(res => {
-        console.log(res.data);
-      })
-      .catch(error => {
-        console.log(error);
-      });
-  };
-
   return (
     <SafeAreaView>
       <View style={{flexDirection: 'column'}}>

frontend/src/screen/reading/basic/ReadActivityGo.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,
+  TouchableHighlight,
+} from 'react-native';
+import Voice from '@react-native-voice/voice';
+import {DummyReadResult} from '../../assets/read/data/ReadData';
+
+export default function ReadActivityGo() {
+  const [pitch, setPitch] = useState('');
+  const [error, setError] = useState('');
+  const [end, setEnd] = useState('');
+  const [started, setStarted] = useState('');
+  const [results, setResults] = useState([]);
+  const [partialResults, setPartialResults] = useState([]);
+
+  useEffect(() => {
+    Voice.destroy().then(Voice.removeAllListeners);
+  }, []);
+
+  useEffect(() => {
+    Voice.onSpeechStart = onSpeechStartHandler;
+    Voice.onSpeechEnd = onSpeechEndHandler;
+    Voice.onSpeechResults = onSpeechResultsHandler;
+    Voice.onSpeechError = onSpeechError;
+    Voice.onSpeechPartialResults = onSpeechPartialResults;
+    Voice.onSpeechVolumeChanged = onSpeechVolumeChanged;
+
+    return () => {
+      Voice.destroy().then(Voice.removeAllListeners);
+    };
+  }, []);
+
+  const onSpeechStartHandler = e => {
+    console.log('start handler =>> ', e);
+  };
+
+  const onSpeechEndHandler = e => {
+    console.log('end handler =>> ', e);
+  };
+
+  const onSpeechResultsHandler = e => {
+    console.log('result handler =>> ', e);
+  };
+
+  const onSpeechError = e => {
+    console.log('onSpeechError: ', e);
+    setError(JSON.stringify(e.error));
+    const result = DummyReadResult.value;
+
+    if (result.includes('hello')) {
+      console.log('correct');
+    }
+  };
+
+  const onSpeechPartialResults = e => {
+    console.log('onSpeechPartialResults: ', e);
+    setPartialResults(e.value);
+  };
+
+  const onSpeechVolumeChanged = e => {
+    console.log('onSpeechVolumeChanged: ', e);
+    setPitch(e.value);
+  };
+
+  const startRecording = async () => {
+    try {
+      await Voice.start('en-US');
+    } catch (error) {
+      console.log('error =>> ', error);
+    }
+  };
+
+  const stopRecording = async () => {
+    try {
+      await Voice.stop();
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  return (
+    <SafeAreaView>
+      <View style={{flexDirection: 'column'}}>
+        <ImageBackground
+          style={styles.image}
+          source={require('../../assets/read/image/activity-2-backg.jpeg')}>
+          <View style={styles.imageContainer}>
+            <View style={styles.imageView}>
+              <View style={styles.robo}>
+                <Image
+                  source={require('../../assets/read/image/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/image/backboard3.png')}></Image>
+          </View>
+          <View style={styles.horizontalView}>
+            <TouchableHighlight onPress={startRecording}>
+              <Image
+                style={styles.imageButton}
+                source={{
+                  uri: 'https://raw.githubusercontent.com/AboutReact/sampleresource/master/microphone.png',
+                }}
+              />
+            </TouchableHighlight>
+          </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',
+    borderRadius: 10,
+    backgroundColor: 'rgba(0,0,0,0.2)',
+    textAlign: 'center',
+    fontWeight: 'bold',
+  },
+
+  button: {
+    padding: 10,
+    marginLeft: 5,
+    color: '#000000',
+  },
+  imageButton: {
+    width: 50,
+    height: 50,
+  },
+  horizontalView: {
+    backgroundColor: 'rgba(0,0,0,0.2)',
+    borderRadius: 50,
+    flexDirection: 'row',
+    position: 'absolute',
+    bottom: 0,
+    flexDirection: 'row',
+    marginBottom: 140,
+    marginLeft: 50,
+    padding: 7,
+  },
+});

frontend/src/screen/reading/basic/ReadActivityHe.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,
+  TouchableHighlight,
+} from 'react-native';
+import Voice from '@react-native-voice/voice';
+import {DummyReadResult} from '../../assets/read/data/ReadData';
+
+export default function ReadActivityHe() {
+  const [pitch, setPitch] = useState('');
+  const [error, setError] = useState('');
+  const [end, setEnd] = useState('');
+  const [started, setStarted] = useState('');
+  const [results, setResults] = useState([]);
+  const [partialResults, setPartialResults] = useState([]);
+
+  useEffect(() => {
+    Voice.destroy().then(Voice.removeAllListeners);
+  }, []);
+
+  useEffect(() => {
+    Voice.onSpeechStart = onSpeechStartHandler;
+    Voice.onSpeechEnd = onSpeechEndHandler;
+    Voice.onSpeechResults = onSpeechResultsHandler;
+    Voice.onSpeechError = onSpeechError;
+    Voice.onSpeechPartialResults = onSpeechPartialResults;
+    Voice.onSpeechVolumeChanged = onSpeechVolumeChanged;
+
+    return () => {
+      Voice.destroy().then(Voice.removeAllListeners);
+    };
+  }, []);
+
+  const onSpeechStartHandler = e => {
+    console.log('start handler =>> ', e);
+  };
+
+  const onSpeechEndHandler = e => {
+    console.log('end handler =>> ', e);
+  };
+
+  const onSpeechResultsHandler = e => {
+    console.log('result handler =>> ', e);
+  };
+
+  const onSpeechError = e => {
+    console.log('onSpeechError: ', e);
+    setError(JSON.stringify(e.error));
+    const result = DummyReadResult.value;
+
+    if (result.includes('hello')) {
+      console.log('correct');
+    }
+  };
+
+  const onSpeechPartialResults = e => {
+    console.log('onSpeechPartialResults: ', e);
+    setPartialResults(e.value);
+  };
+
+  const onSpeechVolumeChanged = e => {
+    console.log('onSpeechVolumeChanged: ', e);
+    setPitch(e.value);
+  };
+
+  const startRecording = async () => {
+    try {
+      await Voice.start('en-US');
+    } catch (error) {
+      console.log('error =>> ', error);
+    }
+  };
+
+  const stopRecording = async () => {
+    try {
+      await Voice.stop();
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  return (
+    <SafeAreaView>
+      <View style={{flexDirection: 'column'}}>
+        <ImageBackground
+          style={styles.image}
+          source={require('../../assets/read/image/activity-2-backg.jpeg')}>
+          <View style={styles.imageContainer}>
+            <View style={styles.imageView}>
+              <View style={styles.robo}>
+                <Image
+                  source={require('../../assets/read/image/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/image/backboard3.png')}></Image>
+          </View>
+          <View style={styles.horizontalView}>
+            <TouchableHighlight onPress={startRecording}>
+              <Image
+                style={styles.imageButton}
+                source={{
+                  uri: 'https://raw.githubusercontent.com/AboutReact/sampleresource/master/microphone.png',
+                }}
+              />
+            </TouchableHighlight>
+          </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',
+    borderRadius: 10,
+    backgroundColor: 'rgba(0,0,0,0.2)',
+    textAlign: 'center',
+    fontWeight: 'bold',
+  },
+
+  button: {
+    padding: 10,
+    marginLeft: 5,
+    color: '#000000',
+  },
+  imageButton: {
+    width: 50,
+    height: 50,
+  },
+  horizontalView: {
+    backgroundColor: 'rgba(0,0,0,0.2)',
+    borderRadius: 50,
+    flexDirection: 'row',
+    position: 'absolute',
+    bottom: 0,
+    flexDirection: 'row',
+    marginBottom: 140,
+    marginLeft: 50,
+    padding: 7,
+  },
+});

frontend/src/screen/reading/basic/ReadActivityNo.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,
+  TouchableHighlight,
+} from 'react-native';
+import Voice from '@react-native-voice/voice';
+import {DummyReadResult} from '../../assets/read/data/ReadData';
+
+export default function ReadActivityNo() {
+  const [pitch, setPitch] = useState('');
+  const [error, setError] = useState('');
+  const [end, setEnd] = useState('');
+  const [started, setStarted] = useState('');
+  const [results, setResults] = useState([]);
+  const [partialResults, setPartialResults] = useState([]);
+
+  useEffect(() => {
+    Voice.destroy().then(Voice.removeAllListeners);
+  }, []);
+
+  useEffect(() => {
+    Voice.onSpeechStart = onSpeechStartHandler;
+    Voice.onSpeechEnd = onSpeechEndHandler;
+    Voice.onSpeechResults = onSpeechResultsHandler;
+    Voice.onSpeechError = onSpeechError;
+    Voice.onSpeechPartialResults = onSpeechPartialResults;
+    Voice.onSpeechVolumeChanged = onSpeechVolumeChanged;
+
+    return () => {
+      Voice.destroy().then(Voice.removeAllListeners);
+    };
+  }, []);
+
+  const onSpeechStartHandler = e => {
+    console.log('start handler =>> ', e);
+  };
+
+  const onSpeechEndHandler = e => {
+    console.log('end handler =>> ', e);
+  };
+
+  const onSpeechResultsHandler = e => {
+    console.log('result handler =>> ', e);
+  };
+
+  const onSpeechError = e => {
+    console.log('onSpeechError: ', e);
+    setError(JSON.stringify(e.error));
+    const result = DummyReadResult.value;
+
+    if (result.includes('hello')) {
+      console.log('correct');
+    }
+  };
+
+  const onSpeechPartialResults = e => {
+    console.log('onSpeechPartialResults: ', e);
+    setPartialResults(e.value);
+  };
+
+  const onSpeechVolumeChanged = e => {
+    console.log('onSpeechVolumeChanged: ', e);
+    setPitch(e.value);
+  };
+
+  const startRecording = async () => {
+    try {
+      await Voice.start('en-US');
+    } catch (error) {
+      console.log('error =>> ', error);
+    }
+  };
+
+  const stopRecording = async () => {
+    try {
+      await Voice.stop();
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  return (
+    <SafeAreaView>
+      <View style={{flexDirection: 'column'}}>
+        <ImageBackground
+          style={styles.image}
+          source={require('../../assets/read/image/activity-2-backg.jpeg')}>
+          <View style={styles.imageContainer}>
+            <View style={styles.imageView}>
+              <View style={styles.robo}>
+                <Image
+                  source={require('../../assets/read/image/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/image/backboard3.png')}></Image>
+          </View>
+          <View style={styles.horizontalView}>
+            <TouchableHighlight onPress={startRecording}>
+              <Image
+                style={styles.imageButton}
+                source={{
+                  uri: 'https://raw.githubusercontent.com/AboutReact/sampleresource/master/microphone.png',
+                }}
+              />
+            </TouchableHighlight>
+          </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',
+    borderRadius: 10,
+    backgroundColor: 'rgba(0,0,0,0.2)',
+    textAlign: 'center',
+    fontWeight: 'bold',
+  },
+
+  button: {
+    padding: 10,
+    marginLeft: 5,
+    color: '#000000',
+  },
+  imageButton: {
+    width: 50,
+    height: 50,
+  },
+  horizontalView: {
+    backgroundColor: 'rgba(0,0,0,0.2)',
+    borderRadius: 50,
+    flexDirection: 'row',
+    position: 'absolute',
+    bottom: 0,
+    flexDirection: 'row',
+    marginBottom: 140,
+    marginLeft: 50,
+    padding: 7,
+  },
+});

frontend/src/screen/report.js

@@ -9,7 +9,7 @@ export default function report({ navigation }){
 
     return (
         <View>
-            <Text>report</Text>
+           
         </View>
     )
 

frontend/src/screen/sideMenu.js

@@ -8,8 +8,8 @@ import {
   Image,
 } from "react-native";
 
-import home from "./home";
-import profile from "./profile";
+import Home from "./Home";
+import Profile from "./Profile";
 
 import { NavigationContainer } from "@react-navigation/native";
 import { createDrawerNavigator } from "@react-navigation/drawer";
@@ -22,11 +22,11 @@ function sideMenu(){
     <NavigationContainer>
       <Drawer.Navigator>
         <Drawer.Screen name="home"
-          component={home}
+          component={Home}
         />
 
         <Drawer.Screen name="profile"
-          component={profile}
+          component={Profile}
         />
       </Drawer.Navigator>
     </NavigationContainer>