Added theme toggler to parallax scroll view, added new icon, deleted …

…unused hooks

app.json

@@ -4,11 +4,11 @@
     "slug": "restaurant-menus",
     "version": "1.0.0",
     "orientation": "portrait",
-    "icon": "./assets/images/icon.png",
+    "icon": "./assets/images/miniconda.png",
     "scheme": "myapp",
     "userInterfaceStyle": "automatic",
     "splash": {
-      "image": "./assets/images/splash.png",
+      "image": "./assets/images/miniconda.png",
       "resizeMode": "contain",
       "backgroundColor": "#ffffff"
     },
@@ -17,7 +17,7 @@
     },
     "android": {
       "adaptiveIcon": {
-        "foregroundImage": "./assets/images/adaptive-icon.png",
+        "foregroundImage": "./assets/images/miniconda.png",
         "backgroundColor": "#ffffff"
       },
       "package": "com.conda_99.restaurantmenus"

app/index.tsx

@@ -1,20 +1,24 @@
 import ParallaxScrollView from "@/components/ParallaxScrollView";
 import { Image, Text, View, StyleSheet } from "react-native";
 import Menus from "@/components/Menus";
+import { ThemeProvider } from "@/context/themeContext";
 
 export default function Index() {
   return (
-    <ParallaxScrollView
-      headerText="Ruokalistat"
-      headerBackgroundColor={{ light: '#A1CEDC', dark: '#1D3D47' }}
-      headerImage={
-        <Image
-          source={require('@/assets/images/food.png')}
-        />
-      }>
-      <Menus />
+    <ThemeProvider>
+      <ParallaxScrollView
+        headerText="Ruokalistat"
+        headerBackgroundColor={{ light: '#A1CEDC', dark: '#1D3D47' }}
+        headerImage={
+          <Image
+            source={require('@/assets/images/food.png')}
+          />
+        }>
+        <Menus />
 
-    </ParallaxScrollView>
+      </ParallaxScrollView>
+    </ThemeProvider>
+
   );
 }
 

components/ParallaxScrollView.tsx

@@ -1,5 +1,6 @@
-import type { PropsWithChildren, ReactElement } from 'react';
-import { StyleSheet, useColorScheme, Text } from 'react-native';
+
+import React, { PropsWithChildren, ReactElement, useState } from 'react';
+import { StyleSheet, useColorScheme, Text, Button } from 'react-native';
 import Animated, {
   interpolate,
   useAnimatedRef,
@@ -9,12 +10,13 @@ import Animated, {
 
 import { ThemedView } from '@/components/ThemedView';
 import { ThemedText } from './ThemedText';
+import { useTheme } from '@/context/themeContext';
 
 const HEADER_HEIGHT = 250;
 
 type Props = PropsWithChildren<{
   headerImage: ReactElement;
-  headerBackgroundColor: { dark: string; light: string };
+  headerBackgroundColor: { light:string; dark:string};
   headerText: string; 
 }>;
 
@@ -27,7 +29,9 @@ export default function ParallaxScrollView({
   const colorScheme = useColorScheme() ?? 'light';
   const scrollRef = useAnimatedRef<Animated.ScrollView>();
   const scrollOffset = useScrollViewOffset(scrollRef);
+  const {toggleTheme} = useTheme();
 
+
   const headerAnimatedStyle = useAnimatedStyle(() => {
     return {
       transform: [
@@ -46,20 +50,26 @@ export default function ParallaxScrollView({
   });
 
   return (
-    <ThemedView style={styles.container}>
-      <Animated.ScrollView ref={scrollRef} scrollEventThrottle={16}>
-        <Animated.View
-          style={[
-            styles.header,
-            { backgroundColor: headerBackgroundColor[colorScheme] },
-            headerAnimatedStyle,
-          ]}>
-          {headerImage}
-          <ThemedText style={styles.headerText}>{headerText}</ThemedText>
-        </Animated.View>
-        <ThemedView style={styles.content}>{children}</ThemedView>
-      </Animated.ScrollView>
-    </ThemedView>
+    <>
+
+      <ThemedView style={styles.container}>
+        <Animated.ScrollView ref={scrollRef} scrollEventThrottle={16}>
+          <Animated.View
+            style={[
+              styles.header,
+              { backgroundColor: headerBackgroundColor[colorScheme] },
+              headerAnimatedStyle,
+            ]}>
+            {headerImage}
+            <ThemedText 
+              style={styles.headerText}>{headerText}</ThemedText>
+          </Animated.View>
+          <Button title="Toggle Theme" onPress={toggleTheme} />
+          <ThemedView style={styles.content}>{children}</ThemedView>
+        </Animated.ScrollView>
+      </ThemedView>
+    </>
+
   );
 }
 

context/themeContext.tsx

@@ -0,0 +1,30 @@
+import React, { createContext, ReactNode, useContext, useState } from 'react';
+type Theme = 'light' | 'dark';
+type ThemContextType = {
+    theme: Theme;
+    toggleTheme: () => void;
+};
+
+const ThemeContext = createContext<ThemContextType | undefined>(undefined);
+
+export const ThemeProvider = ({children} : { children: ReactNode}) => {
+    const [theme, setTheme] = useState<Theme>('light');
+
+    const toggleTheme = () => {
+        setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));
+    };
+
+    return (
+        <ThemeContext.Provider value={{ theme, toggleTheme}}>
+            {children}
+        </ThemeContext.Provider>
+    );
+};
+
+export const useTheme = () => {
+    const context = useContext(ThemeContext);
+    if (!context) {
+        throw new Error('useTheme must be used within a ThemeProvider');
+    }
+    return context;
+}

hooks/useThemeColor.ts

@@ -4,14 +4,14 @@
  */
 
 import { useColorScheme } from 'react-native';
-
+import { useTheme } from '@/context/themeContext';
 import { Colors } from '@/constants/Colors';
 
 export function useThemeColor(
   props: { light?: string; dark?: string },
   colorName: keyof typeof Colors.light & keyof typeof Colors.dark
 ) {
-  const theme = useColorScheme() ?? 'light';
+  const {theme} = useTheme();
   const colorFromProps = props[theme];
 
   if (colorFromProps) {