feat: create setting entry + header component

components/homescreen/SettingButton.jsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { View, TouchableOpacity } from "react-native";
+import { Cog6ToothIcon } from "react-native-heroicons/solid";
+import { useNavigation } from "@react-navigation/native";
+
+const SettingButton = () => {
+  const navigation = useNavigation();
+  const goToSetting = () => {
+    navigation.navigate("Setting");
+  };
+
+  return (
+    <View className="flex-row m-4 pb-10">
+      <TouchableOpacity
+        className="absolute left-8"
+        onPress={goToSetting}
+      >
+        <Cog6ToothIcon color="white" size="30" className="" testID="settingButton" />
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+export default SettingButton;

components/settingscreen/SettingHeader.jsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { View, Text, TouchableOpacity } from "react-native";
+import { ChevronLeftIcon } from "react-native-heroicons/solid";
+
+
+export default function SettingHeader( {title, onPress} ) {
+  return (
+    <View className="flex-row m-4 pb-10">
+        <TouchableOpacity className=" bg-white w-10 h-10 items-start justify-center rounded-full m-2 " onPress={onPress} testID="homeButton">
+            <ChevronLeftIcon
+            color="black"
+            size="35"
+            className=""
+            />
+        </TouchableOpacity>
+        <View className="flex-1 justify-center items-center">
+            <Text className="text-white items-start text-2xl font-black">{title}</Text>
+        </View>
+    </View>
+  );
+}

navigation/AppNavigation.js

@@ -6,6 +6,7 @@ import { LogBox } from "react-native";
 import Lobbyscreen from "../screens/Lobbyscreen";
 import Gamescreen from "../screens/Gamescreen";
 import Endscreen from "../screens/Endscreen";
+import SettingScreen from "../screens/SettingScreen";
 
 const Stack = createNativeStackNavigator();
 
@@ -37,6 +38,11 @@ export default function AppNavigation() {
           options={{headerShown:false}}
           component={Endscreen}
         />
+        <Stack.Screen
+          name="Setting"
+          options={{ headerShown: false }}
+          component={SettingScreen}
+        />
       </Stack.Navigator>
     </NavigationContainer>
   );

screens/Homescreen.js

@@ -9,6 +9,7 @@ import Header from "../components/homescreen/Header";
 import GifViewer from "../components/homescreen/GifViewer";
 import StartButton from "../components/homescreen/StartButton";
 import VersionNumber from "../components/reusable/VersionNumber";
+import SettingButton from "../components/homescreen/SettingButton";
 
 
 export default function HomeScreen() {
@@ -32,6 +33,7 @@ export default function HomeScreen() {
           <GifViewer />
           <StartButton onPress={goToLobby} />
           <VersionNumber />
+          <SettingButton />
       </SafeAreaView>
     </View>
   );

screens/SettingScreen.js

@@ -0,0 +1,32 @@
+import React from "react";
+import { View, ImageBackground } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { StatusBar } from "expo-status-bar";
+import { useNavigation } from "@react-navigation/native";
+import { useImage } from "../provider/ImageContext";
+import SettingHeader from "../components/settingscreen/SettingHeader";
+
+
+export default function SettingScreen() {
+  const navigation = useNavigation();
+  const { backgroundImageSource } = useImage();
+
+  const goToHomescreen = () => {
+    navigation.goBack();
+  };
+
+  return (
+    <View className="flex-1">
+      <ImageBackground
+        blurRadius={70}
+        source={backgroundImageSource}
+        resizeMode="cover"
+        className="absolute h-full w-full"
+      />
+      <SafeAreaView className="flex-1 ">
+        <StatusBar style="light" />
+        <SettingHeader title="OPTIONS" onPress={goToHomescreen} />
+      </SafeAreaView>
+    </View>
+  );
+}