change reuseable code

frontend/src/component/ImageButton.js

@@ -2,12 +2,13 @@ import { useNavigation } from "@react-navigation/native";
 import React from "react";
 import {Text, TouchableOpacity, StyleSheet} from 'react-native'
 
-export default function ImageButton({ title}){
+export default function ImageButton(props){
 
     const navigation = useNavigation();
+    const {title, path} = props;
 
     return(
-        <TouchableOpacity onPress={()=> {navigation.navigate("Color")}} style={styles.ImageButton}>
+        <TouchableOpacity onPress={()=> {navigation.navigate(path)}} style={styles.ImageButton}>
             <Text style={styles.text}>{title}</Text>
         </TouchableOpacity>
     );

frontend/src/router/router.js

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

frontend/src/screen/home.js

@@ -15,7 +15,7 @@ export default function Home({ navigation }){
                     <View style={styles.imageView}>
                         <Image style={styles.image} source={require('../assets/color/background.png')} resizeMode="contain">
                         </Image>
-                        <ImageButton title="Color Activity"/>
+                        <ImageButton path="Color" title="Color Activity"/>
                     </View>
                 </View>
             </ScrollView>