change single color activity

frontend/src/component/colorActivity.js

@@ -10,7 +10,7 @@ export default function ColorActivity(props){
     const navigation = useNavigation();
 
     return(
-        <TouchableOpacity onPress={()=> {navigation.navigate("Blue")}} 
+        <TouchableOpacity onPress={()=> {navigation.navigate("Blue", {color})}}
         style={{
             borderWidth: 5, 
             borderColor: color, 

frontend/src/screen/activity/Blue.js

@@ -18,9 +18,10 @@ import {
     Image
 } from 'react-native'
 
-export default function Blue() {
+export default function Blue(color) {
 
     const navigation = useNavigation();
+    const backColor = color.route.params.color;
 
     React.useEffect(() => {
         const unsubscribe = navigation.addListener("focus", () => {
@@ -52,7 +53,7 @@ export default function Blue() {
 
                         <Image style={styles.blackboard} source={require("../../assets/game/blackboard.png")}></Image>
 
-                        <View style={styles.box}>  
+                        <View style={{width: 180, height: 180, backgroundColor: backColor, marginTop: -370, marginLeft: 455, borderRadius: 100}}>  
                         </View>
 
                     </View>
@@ -77,16 +78,6 @@ const styles = StyleSheet.create({
         width: "100%",
         height: "100%",
     },
-    box: {
-        width: 180,
-        height: 180,
-        // borderColor: "#000000",
-        backgroundColor: "red",
-        marginTop: -370,
-        marginLeft: 455,
-        borderRadius: 100
-
-    },
     blackboard: {
         marginTop: -420,
         marginLeft: 240,