From c94fa6e7a7cf7ed453e6f61ee6dba87da48cb7b6 Mon Sep 17 00:00:00 2001 From: caxewsh Date: Sun, 22 Sep 2024 18:58:56 +0200 Subject: [PATCH] feat: create setting entry + header component --- components/homescreen/SettingButton.jsx | 24 ++++++++++++++++ components/settingscreen/SettingHeader.jsx | 21 ++++++++++++++ navigation/AppNavigation.js | 6 ++++ screens/Homescreen.js | 2 ++ screens/SettingScreen.js | 32 ++++++++++++++++++++++ 5 files changed, 85 insertions(+) create mode 100644 components/homescreen/SettingButton.jsx create mode 100644 components/settingscreen/SettingHeader.jsx create mode 100644 screens/SettingScreen.js diff --git a/components/homescreen/SettingButton.jsx b/components/homescreen/SettingButton.jsx new file mode 100644 index 0000000..5f19d37 --- /dev/null +++ b/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 ( + + + + + + ); +}; + +export default SettingButton; \ No newline at end of file diff --git a/components/settingscreen/SettingHeader.jsx b/components/settingscreen/SettingHeader.jsx new file mode 100644 index 0000000..039d0f3 --- /dev/null +++ b/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 ( + + + + + + {title} + + + ); +} diff --git a/navigation/AppNavigation.js b/navigation/AppNavigation.js index 5227f45..aaf810f 100644 --- a/navigation/AppNavigation.js +++ b/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} /> + ); diff --git a/screens/Homescreen.js b/screens/Homescreen.js index dd43c60..6e87c82 100644 --- a/screens/Homescreen.js +++ b/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() { + ); diff --git a/screens/SettingScreen.js b/screens/SettingScreen.js new file mode 100644 index 0000000..be2a2d7 --- /dev/null +++ b/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 ( + + + + + + + + ); +} \ No newline at end of file