final theme implimentation

app.json

@@ -15,13 +15,15 @@
       "**/*"
     ],
     "ios": {
-      "supportsTablet": true
+      "supportsTablet": true,
+      "userInterfaceStyle": "automatic"
     },
     "android": {
       "adaptiveIcon": {
         "foregroundImage": "./assets/adaptive-icon.png",
         "backgroundColor": "#ffffff"
-      }
+      },
+      "userInterfaceStyle": "automatic"
     },
     "web": {
       "favicon": "./assets/favicon.png"

lib/theme.ts

@@ -8,7 +8,7 @@ export type Theme = {
     statusbar: 'light' | 'dark',
 }
 
-export const darkTheme: Theme = {
+export const dark: Theme = {
     name: 'dark',
     text: "#edecf3",
     background: "#0f0e16",
@@ -18,7 +18,7 @@ export const darkTheme: Theme = {
     statusbar: 'light',
 }
 
-export const lightTheme: Theme = {
+export const light: Theme = {
     name: 'light',
     text: "#0e1b17",
     background: "#e1efea",

routes/Settings.tsx

@@ -1,11 +1,33 @@
 import { StyleSheet, Text, View} from 'react-native';
 import Button from '../components/Button';
+import { useState, useEffect } from 'react';
+import DropDownPicker from 'react-native-dropdown-picker';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+
+
+export default function Settings({theme, changeTheme, themeMode}:any){
+    const [open, setOpen] = useState(false);
+    const [value, setValue] = useState(themeMode);
+    const [items, setItems] = useState([
+        {label: 'System', value: 'auto'},
+        {label: 'Light', value: 'light'},
+        {label: 'Dark', value: 'dark'}
+    ]);
+
+    useEffect(() => {changeTheme(value)}, [value]);
 
-export default function Settings({theme, changeTheme}:any){
     return (
         <View style={style(theme).container}>
-            <Text style={style(theme).text}>This is settings</Text>
+            <Text style={style(theme).text}>Theme:</Text>
-            <Button title="Change Theme" theme={theme}  onPress={changeTheme} eStyle={{}}/>
+            <DropDownPicker
+                open={open}
+                value={value}
+                items={items}
+                setOpen={setOpen}
+                setValue={setValue}
+                setItems={setItems}
+                style={style(theme).dropdown}
+            />
         </View>
     )
 }
@@ -13,9 +35,14 @@ export default function Settings({theme, changeTheme}:any){
 const style = (theme:any) => {
     return StyleSheet.create({
         container: {
+            width: '100%',
         },
         text: {
             color: theme.text,
+        },
+        dropdown: {
+            backgroundColor: theme.primary,
+            color: theme.text,
         }
     });
 }