create function audioInit and checkPermission

frontend/src/router/router.js

@@ -16,7 +16,7 @@ const Stack = createNativeStackNavigator();
 const AppRouter = () => {
   return (
     <NavigationContainer>
-      <Stack.Navigator initialRouteName="Splash">
+      <Stack.Navigator initialRouteName="Color">
         <Stack.Screen
           options={{headerShown: false}}
           name="Home"

frontend/src/screen/activity/Blue.js

@@ -28,23 +28,59 @@ export default function Blue(color) {
     const backColor = color.route.params.color;
 
     React.useEffect(() => {
+
+        audioInit();
+
         const unsubscribe = navigation.addListener("focus", () => {
-          // The screen is focused
-          // Call any action
-          Orientation.unlockAllOrientations();
-          Orientation.lockToLandscape();
+            // The screen is focused
+            // Call any action
+            Orientation.unlockAllOrientations();
+            Orientation.lockToLandscape();
         });
-    
+
         return unsubscribe;
-      }, [navigation]);
+    }, [navigation]);
+
+    // audioInit
+    function audioInit() {
 
-      return(
+        console.log('audioInit');
+
+        const colorAudio = {
+            sampleRate: 16000,
+            channels: 1,
+            bitsPerSample: 16,
+            wavFile: 'color.wav', // thise wave file name
+        };
+
+        AudioRecord.init(colorAudio);
+    }
+
+    // checkPermission
+    async function checkPermission() {
+        console.log('checkPermission');
+        
+        const p = await Permissions.check('microphone');
+        console.log(p);
+        console.log('permission check', p);
+        if (p === 'authorized') {
+            console.log('if');
+            //audio start
+            audioStart();
+        } else {
+            console.log('else');
+            return requestPermission();
+        }
+
+    }
+
+    return (
         <SafeAreaView>
-            <View style={{flexDirection: "column"}}>
+            <View style={{ flexDirection: "column" }}>
                 <ImageBackground style={styles.image} source={require("../../assets/game/gameback.png")}>
 
                     <View>
-                        
+
                         <View style={styles.textBody}>
                             <Text style={styles.text}>Say the name of this color?</Text>
                         </View>
@@ -57,21 +93,21 @@ export default function Blue(color) {
 
                         <Image style={styles.blackboard} source={require("../../assets/game/blackboard.png")}></Image>
 
-                        <View style={{width: 180, height: 180, backgroundColor: backColor, marginTop: -370, marginLeft: 455, borderRadius: 100}}>  
+                        <View style={{ width: 180, height: 180, backgroundColor: backColor, marginTop: -370, marginLeft: 455, borderRadius: 100 }}>
                         </View>
 
                     </View>
 
-                    <View style={{flexDirection: "row", marginLeft: 480}}>
-                        <Button style={styles.button} title="Recode"/>
-                        <Button  title="Return" color="#1DCE92"/>
-                        <Button  title="Exit" color="#841584"/>
-                    </View>  
+                    <View style={{ flexDirection: "row", marginLeft: 480 }}>
+                        <Button style={styles.button} title="Recode" />
+                        <Button title="Return" color="#1DCE92" />
+                        <Button title="Exit" color="#841584" />
+                    </View>
 
                 </ImageBackground>
             </View>
         </SafeAreaView>
-      )
+    )
 }
 
 const styles = StyleSheet.create({