text4u app init

app/(tabs)/index.jsx

+// App.js
+import React, { useState } from 'react';
+import { PaperProvider } from 'react-native-paper';
+import { lightTheme, darkTheme } from '../../theme';
+import WelcomeScreen from '../screens/WelcomeScreen';
+import HomeScreen from '../screens/HomeScreen';
+import { Button, Switch } from 'react-native-paper';
+import { View } from 'react-native';
+
+const App = () => {
+  const [isDarkMode, setIsDarkMode] = useState(false);
+
+  return (
+    <PaperProvider theme={lightTheme}>
+      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+        <HomeScreen />
+      </View>
+    </PaperProvider>
+  );
+};
+
+export default App;

app/(tabs)/index.tsx

-import { Image, StyleSheet, Platform } from 'react-native';
-
-import { HelloWave } from '@/components/HelloWave';
-import ParallaxScrollView from '@/components/ParallaxScrollView';
-import { ThemedText } from '@/components/ThemedText';
-import { ThemedView } from '@/components/ThemedView';
-
-export default function HomeScreen() {
-  return (
-    <ParallaxScrollView
-      headerBackgroundColor={{ light: '#A1CEDC', dark: '#1D3D47' }}
-      headerImage={
-        <Image
-          source={require('@/assets/images/partial-react-logo.png')}
-          style={styles.reactLogo}
-        />
-      }>
-      <ThemedView style={styles.titleContainer}>
-        <ThemedText type="title">Welcome!</ThemedText>
-        <HelloWave />
-      </ThemedView>
-      <ThemedView style={styles.stepContainer}>
-        <ThemedText type="subtitle">Step 1: Try it</ThemedText>
-        <ThemedText>
-          Edit <ThemedText type="defaultSemiBold">app/(tabs)/index.tsx</ThemedText> to see changes.
-          Press{' '}
-          <ThemedText type="defaultSemiBold">
-            {Platform.select({
-              ios: 'cmd + d',
-              android: 'cmd + m',
-              web: 'F12'
-            })}
-          </ThemedText>{' '}
-          to open developer tools.
-        </ThemedText>
-      </ThemedView>
-      <ThemedView style={styles.stepContainer}>
-        <ThemedText type="subtitle">Step 2: Explore</ThemedText>
-        <ThemedText>
-          Tap the Explore tab to learn more about what's included in this starter app.
-        </ThemedText>
-      </ThemedView>
-      <ThemedView style={styles.stepContainer}>
-        <ThemedText type="subtitle">Step 3: Get a fresh start</ThemedText>
-        <ThemedText>
-          When you're ready, run{' '}
-          <ThemedText type="defaultSemiBold">npm run reset-project</ThemedText> to get a fresh{' '}
-          <ThemedText type="defaultSemiBold">app</ThemedText> directory. This will move the current{' '}
-          <ThemedText type="defaultSemiBold">app</ThemedText> to{' '}
-          <ThemedText type="defaultSemiBold">app-example</ThemedText>.
-        </ThemedText>
-      </ThemedView>
-    </ParallaxScrollView>
-  );
-}
-
-const styles = StyleSheet.create({
-  titleContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 8,
-  },
-  stepContainer: {
-    gap: 8,
-    marginBottom: 8,
-  },
-  reactLogo: {
-    height: 178,
-    width: 290,
-    bottom: 0,
-    left: 0,
-    position: 'absolute',
-  },
-});

app/screens/HomeScreen.jsx

+import React, { useState } from 'react';
+import { View, StyleSheet, TextInput, Text } from 'react-native';
+import { Appbar, Menu, Avatar, useTheme } from 'react-native-paper';
+import Icon from 'react-native-vector-icons/MaterialIcons';
+import dpuser from "@/assets/images/userdp.png";
+
+const HomeScreen = () => {
+  const { colors, fonts } = useTheme();
+  const [menuVisible, setMenuVisible] = useState(false);
+  const [searchInput, setSearchInput] = useState("")
+
+  return (
+    <View style={[styles.container, { backgroundColor: colors.background }]}>
+      <Appbar.Header>
+
+        <Avatar.Image size={50} source={dpuser}></Avatar.Image>
+
+        <View style={styles.titleContainer}>
+          <Appbar.Content title="General" titleStyle={[fonts.titleLarge, styles.title]} />
+        </View>
+
+        {/* Menu Component */}
+        <Menu
+          visible={menuVisible}
+          onDismiss={() => setMenuVisible(false)}
+          anchor={
+            <Appbar.Action icon="dots-vertical" onPress={() => setMenuVisible(true)} />
+          }
+        >
+          <Menu.Item onPress={() => console.log('Profile Clicked')} title="Profile" />
+          <Menu.Item onPress={() => console.log('Settings Clicked')} title="Settings" />
+          <Menu.Item onPress={() => console.log('Logout Clicked')} title="Logout" />
+        </Menu>
+      </Appbar.Header>
+
+      <View style={styles.tabContainer}>
+        <Text style={[styles.tabButton, fonts.titleMedium, { fontWeight: "bold" }, { borderBottomWidth: 2, borderBottomColor: colors.secondary, color: colors.secondary }]}>General  </Text>
+        <Text style={[styles.tabButton, { fontWeight: "bold" }, fonts.titleMedium]}>Request <Text style={styles.badge}>1</Text></Text>
+      </View>
+
+
+      <View style={styles.searchSection}>
+        <TextInput
+          style={styles.input}
+          placeholder="Search"
+          onChangeText={setSearchInput}
+          value={searchInput}
+          underlineColorAndroid="transparent"
+          placeholderTextColor="#D9D9D9"
+        />
+        <Icon name="search" size={20} color="#888" style={styles.icon} />
+      </View>
+
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 20,
+    width: '100%',
+  },
+  badge: {
+    backgroundColor: "#BB5C3F",
+    color: "#FFF",
+    borderRadius: 100,
+    paddingVertical: 4,
+    paddingHorizontal: 6,
+    fontSize: 10,
+    fontWeight: "400",
+    verticalAlign:"middle",
+    marginStart:5
+  },
+  tabContainer: {
+    flexDirection: "row",
+    marginBottom: 20
+  },
+  tabButton: {
+    fontWeight: "bold",
+    paddingVertical: 15,
+    width: "50%",
+    textAlign: "center",
+    active: {
+      borderBottomWidth: 2,
+    }
+  },
+  titleContainer: {
+    flex: 1,
+    alignItems: 'center',
+  },
+  title: {
+    fontWeight: 'bold',
+  },
+  searchSection: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  icon: {
+    padding: 10,
+    position: "absolute",
+    right: 10,
+    color: "#D9D9D9"
+  },
+  input: {
+    height: 40,
+    flex: 1,
+    borderWidth: 1,
+    paddingVertical: 10,
+    paddingHorizontal: 20,
+    borderRadius: 100,
+    borderColor: "#C0CFD0"
+  }
+});
+
+export default HomeScreen;

app/screens/WelcomeScreen.jsx

+import React from 'react';
+import { View, Text, StyleSheet, Image } from 'react-native';
+import { Button, useTheme } from 'react-native-paper';
+import text4uLogo from '@/assets/images/text4ulogo.png'
+import text4uTitle from '@/assets/images/text4utitle.png'
+
+const WelcomeScreen = () => {
+    const { colors, button, fonts } = useTheme();
+
+    const goToLogin = () => {
+        console.log("go to login")
+    }
+
+    return (
+        <View
+            style={[styles.container, { backgroundColor: colors.background }]}
+        >
+            <View style={[styles.logoContainer]}>
+                <Image style={[styles.logo]} source={text4uLogo}></Image>
+                <Image style={[styles.logoTitle]} source={text4uTitle}></Image>
+            </View>
+            <View style={styles.mainContainer}>
+                <Text style={[fonts.titleLarge, styles.heading]}>
+                    Notification Made Easy.
+                </Text>
+                <Text style={[fonts.titleSmall, styles.subHeading]}>
+                    Empowering you with instant alerts for every important moment!
+                </Text>
+                <Button
+                    mode="contained"
+                    style={[button, styles.button]}
+                    labelStyle={{ ...fonts.titleMedium, ...styles.buttonLabel }}
+                >
+                    Get Started
+                </Button>
+                <Text style={{ ...fonts.titleMedium, ...styles.loginInfo }}>
+                    Already have an account?
+                    <Text style={styles.loginText} onPress={goToLogin}>
+                        Login
+                    </Text>
+                </Text>
+            </View>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        width: "100%"
+    },
+    logoContainer:{
+        marginTop:"auto",
+        marginBottom:"auto"
+    },
+    logo:{
+        marginLeft:"auto",
+        marginRight:"auto"
+    },
+    logoTitle:{
+        marginLeft:"auto",
+        marginRight:"auto"
+    },
+    mainContainer:{
+        alignItems:"center",
+        marginTop:"auto",
+        marginBottom:"auto"
+    },
+    heading: {
+        fontWeight: "bold",
+        marginBottom: 20,
+    },
+    subHeading: {
+        marginBottom: 20,
+        maxWidth: "70%",
+        textAlign: "center",
+        marginBottom: 36
+    },
+    button: {
+        marginBottom: 36,
+        marginLeft:"auto",
+        marginRight:"auto"
+    },
+    buttonLabel: {
+        fontWeight: "bold"
+    },
+    loginInfo: {
+        marginBottom: 20,
+        maxWidth: "70%",
+        textAlign: "center",
+        fontWeight: "bold"
+    },
+    loginText: {
+        marginLeft: 5,
+        color:"#396868"
+    }
+});
+
+export default WelcomeScreen;

package-lock.json

         "@expo/vector-icons": "^14.0.2",
         "@react-navigation/bottom-tabs": "^7.2.0",
         "@react-navigation/native": "^7.0.14",
+        "@rneui/base": "github:react-native-elements/react-native-elements#base",
+        "@rneui/themed": "github:react-native-elements/react-native-elements#themed",
         "expo": "~52.0.40",
         "expo-blur": "~14.0.3",
         "expo-constants": "~17.0.8",
         "react-dom": "18.3.1",
         "react-native": "0.76.7",
         "react-native-gesture-handler": "~2.20.2",
+        "react-native-paper": "^5.13.1",
         "react-native-reanimated": "~3.16.1",
         "react-native-safe-area-context": "4.12.0",
         "react-native-screens": "~4.4.0",
+        "react-native-vector-icons": "^10.2.0",
         "react-native-web": "~0.19.13",
         "react-native-webview": "13.12.5"
       },
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@callstack/react-theme-provider": {
+      "version": "3.0.9",
+      "resolved": "https://registry.npmjs.org/@callstack/react-theme-provider/-/react-theme-provider-3.0.9.tgz",
+      "integrity": "sha512-tTQ0uDSCL0ypeMa8T/E9wAZRGKWj8kXP7+6RYgPTfOPs9N07C9xM8P02GJ3feETap4Ux5S69D9nteq9mEj86NA==",
+      "license": "MIT",
+      "dependencies": {
+        "deepmerge": "^3.2.0",
+        "hoist-non-react-statics": "^3.3.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.3.0"
+      }
+    },
+    "node_modules/@callstack/react-theme-provider/node_modules/deepmerge": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-3.3.0.tgz",
+      "integrity": "sha512-GRQOafGHwMHpjPx9iCvTgpu9NojZ49q794EEL94JVEw6VaeA8XTUyBKvAkOOjBX9oJNiV6G3P+T+tihFjo2TqA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/@egjs/hammerjs": {
       "version": "2.0.17",
       "resolved": "https://registry.npmjs.org/@egjs/hammerjs/-/hammerjs-2.0.17.tgz",
         "nanoid": "3.3.8"
       }
     },
+    "node_modules/@rneui/base": {
+      "version": "4.0.0-rc.7",
+      "resolved": "git+ssh://git@github.com/react-native-elements/react-native-elements.git#d42432d9581b3c1d4a3413e2861ff8be12c700b6",
+      "license": "MIT",
+      "dependencies": {
+        "@types/react-native-vector-icons": "^6.4.10",
+        "color": "^3.2.1",
+        "deepmerge": "^4.2.2",
+        "hoist-non-react-statics": "^3.3.2",
+        "react-native-ratings": "^8.1.0",
+        "react-native-size-matters": "^0.4.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/react-native-elements"
+      },
+      "peerDependencies": {
+        "react-native-safe-area-context": ">= 3.0.0",
+        "react-native-vector-icons": ">7.0.0"
+      }
+    },
+    "node_modules/@rneui/base/node_modules/color": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/color/-/color-3.2.1.tgz",
+      "integrity": "sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==",
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^1.9.3",
+        "color-string": "^1.6.0"
+      }
+    },
+    "node_modules/@rneui/base/node_modules/color-convert": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "1.1.3"
+      }
+    },
+    "node_modules/@rneui/base/node_modules/color-name": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
+      "license": "MIT"
+    },
+    "node_modules/@rneui/themed": {
+      "version": "4.0.0-rc.7",
+      "resolved": "git+ssh://git@github.com/react-native-elements/react-native-elements.git#bda83f52e80b644de8e684475a6e15fd895ab43e",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/react-native-elements"
+      }
+    },
     "node_modules/@segment/loosely-validate-event": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@segment/loosely-validate-event/-/loosely-validate-event-2.0.0.tgz",
       "version": "15.7.14",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.14.tgz",
       "integrity": "sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ==",
-      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/@types/react": {
       "version": "18.3.20",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.20.tgz",
       "integrity": "sha512-IPaCZN7PShZK/3t6Q87pfTkRm6oLTd4vztyoj+cbHUF1g3FfVb2tFIL79uCRKEfv16AhqDMBywP2VW3KIZUvcg==",
-      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.0.2"
       }
     },
+    "node_modules/@types/react-native": {
+      "version": "0.70.19",
+      "resolved": "https://registry.npmjs.org/@types/react-native/-/react-native-0.70.19.tgz",
+      "integrity": "sha512-c6WbyCgWTBgKKMESj/8b4w+zWcZSsCforson7UdXtXMecG3MxCinYi6ihhrHVPyUrVzORsvEzK8zg32z4pK6Sg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
+    "node_modules/@types/react-native-vector-icons": {
+      "version": "6.4.18",
+      "resolved": "https://registry.npmjs.org/@types/react-native-vector-icons/-/react-native-vector-icons-6.4.18.tgz",
+      "integrity": "sha512-YGlNWb+k5laTBHd7+uZowB9DpIK3SXUneZqAiKQaj1jnJCZM0x71GDim5JCTMi4IFkhc9m8H/Gm28T5BjyivUw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/react": "*",
+        "@types/react-native": "^0.70"
+      }
+    },
     "node_modules/@types/react-test-renderer": {
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/@types/react-test-renderer/-/react-test-renderer-18.3.1.tgz",
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/data-urls": {
         "react-native": ">=0.73.0"
       }
     },
+    "node_modules/react-native-paper": {
+      "version": "5.13.1",
+      "resolved": "https://registry.npmjs.org/react-native-paper/-/react-native-paper-5.13.1.tgz",
+      "integrity": "sha512-8frKVKJ5JBd8WL1G3tpcYzOgK40kxkD/U+yLHGKNeLnD6v1Qc9W6DxWTHWN7lsX/DPYnhgvw1aKkYaPTmDj5pg==",
+      "license": "MIT",
+      "dependencies": {
+        "@callstack/react-theme-provider": "^3.0.9",
+        "color": "^3.1.2",
+        "use-latest-callback": "^0.1.5"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*",
+        "react-native-safe-area-context": "*",
+        "react-native-vector-icons": "*"
+      }
+    },
+    "node_modules/react-native-paper/node_modules/color": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/color/-/color-3.2.1.tgz",
+      "integrity": "sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==",
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^1.9.3",
+        "color-string": "^1.6.0"
+      }
+    },
+    "node_modules/react-native-paper/node_modules/color-convert": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "1.1.3"
+      }
+    },
+    "node_modules/react-native-paper/node_modules/color-name": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
+      "license": "MIT"
+    },
+    "node_modules/react-native-paper/node_modules/use-latest-callback": {
+      "version": "0.1.11",
+      "resolved": "https://registry.npmjs.org/use-latest-callback/-/use-latest-callback-0.1.11.tgz",
+      "integrity": "sha512-8nhb73STSD/z3GTHklvNjL8F9wMOo0bj0AFnulpIYuFTm6aQlT3ZcNbXF2YurKImIY8+kpSFSDHZZyQmurGrhw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-native-ratings": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/react-native-ratings/-/react-native-ratings-8.1.0.tgz",
+      "integrity": "sha512-+QOJ4G3NjVkI1D+tk4EGx1dCvVfbD2nQdkrj9cXrcAoEiwmbep4z4bZbCKmWMpQ5h2dqbxABU8/eBnbDmvAc3g==",
+      "license": "MIT",
+      "dependencies": {
+        "lodash": "^4.17.15"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
     "node_modules/react-native-reanimated": {
       "version": "3.16.7",
       "resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-3.16.7.tgz",
         "react-native": "*"
       }
     },
+    "node_modules/react-native-size-matters": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/react-native-size-matters/-/react-native-size-matters-0.4.2.tgz",
+      "integrity": "sha512-DKE3f/sdcozd24oASgkP1iGg+YU3HoajRa5k3a4wkRzpiqREq8SGX12Y5zBgAt/8IivLQoTMYkyQu1/Giuy+zQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react-native": "*"
+      }
+    },
+    "node_modules/react-native-vector-icons": {
+      "version": "10.2.0",
+      "resolved": "https://registry.npmjs.org/react-native-vector-icons/-/react-native-vector-icons-10.2.0.tgz",
+      "integrity": "sha512-n5HGcxUuVaTf9QJPs/W22xQpC2Z9u0nb0KgLPnVltP8vdUvOp6+R26gF55kilP/fV4eL4vsAHUqUjewppJMBOQ==",
+      "license": "MIT",
+      "dependencies": {
+        "prop-types": "^15.7.2",
+        "yargs": "^16.1.1"
+      },
+      "bin": {
+        "fa-upgrade.sh": "bin/fa-upgrade.sh",
+        "fa5-upgrade": "bin/fa5-upgrade.sh",
+        "fa6-upgrade": "bin/fa6-upgrade.sh",
+        "generate-icon": "bin/generate-icon.js"
+      }
+    },
+    "node_modules/react-native-vector-icons/node_modules/cliui": {
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
+      "integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0",
+        "wrap-ansi": "^7.0.0"
+      }
+    },
+    "node_modules/react-native-vector-icons/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "license": "MIT"
+    },
+    "node_modules/react-native-vector-icons/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/react-native-vector-icons/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/react-native-vector-icons/node_modules/yargs": {
+      "version": "16.2.0",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",
+      "integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==",
+      "license": "MIT",
+      "dependencies": {
+        "cliui": "^7.0.2",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "require-directory": "^2.1.1",
+        "string-width": "^4.2.0",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^20.2.2"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/react-native-vector-icons/node_modules/yargs-parser": {
+      "version": "20.2.9",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz",
+      "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/react-native-web": {
       "version": "0.19.13",
       "resolved": "https://registry.npmjs.org/react-native-web/-/react-native-web-0.19.13.tgz",

package.json

     "@expo/vector-icons": "^14.0.2",
     "@react-navigation/bottom-tabs": "^7.2.0",
     "@react-navigation/native": "^7.0.14",
+    "@rneui/base": "github:react-native-elements/react-native-elements#base",
+    "@rneui/themed": "github:react-native-elements/react-native-elements#themed",
     "expo": "~52.0.40",
     "expo-blur": "~14.0.3",
     "expo-constants": "~17.0.8",
     "react-dom": "18.3.1",
     "react-native": "0.76.7",
     "react-native-gesture-handler": "~2.20.2",
+    "react-native-paper": "^5.13.1",
     "react-native-reanimated": "~3.16.1",
     "react-native-safe-area-context": "4.12.0",
     "react-native-screens": "~4.4.0",
+    "react-native-vector-icons": "^10.2.0",
     "react-native-web": "~0.19.13",
     "react-native-webview": "13.12.5"
   },

theme.js

+// src/theme.js
+import { DefaultTheme, MD3DarkTheme } from 'react-native-paper';
+
+export const lightTheme = {
+    ...DefaultTheme,
+    colors: {
+      primary: "#DD9C47",
+      onPrimary: "#FFF",
+      secondary: "#396868",
+      onSecondary: "#FFF",
+      error: "#BF645B",
+      background: "#FEFCF9",
+      onBackground: "#000000",
+      outline: "rgb(130, 117, 104)",
+      outlineVariant: "rgb(212, 196, 181)",
+      shadow: "rgb(0, 0, 0)",
+      scrim: "rgb(0, 0, 0)",
+      inverseSurface: "rgb(53, 47, 42)",
+      inverseOnSurface: "rgb(249, 239, 231)",
+      inversePrimary: "rgb(255, 185, 95)",
+      elevation: {
+        level0: "transparent",
+        level1: "rgb(249, 243, 242)",
+        level2: "rgb(245, 238, 235)",
+        level3: "rgb(242, 233, 227)",
+        level4: "rgb(240, 231, 224)",
+        level5: "rgb(238, 228, 219)"
+      },
+    },
+    button: {
+      alignSelf: 'flex-start',
+      paddingHorizontal: 15,
+      borderRadius: 100,
+      paddingVertical: 5,
+      minWidth: 'auto'
+    }
+};
+
+export const darkTheme = {
+    ...MD3DarkTheme,
+    colors: {
+      primary: "rgb(255, 185, 95)",
+      onPrimary: "rgb(71, 42, 0)",
+      primaryContainer: "rgb(101, 62, 0)",
+      onPrimaryContainer: "rgb(255, 221, 184)",
+      secondary: "rgb(76, 218, 218)",
+      onSecondary: "rgb(0, 55, 55)",
+      secondaryContainer: "rgb(0, 79, 79)",
+      onSecondaryContainer: "rgb(111, 247, 246)",
+      tertiary: "rgb(79, 216, 235)",
+      onTertiary: "rgb(0, 54, 61)",
+      tertiaryContainer: "rgb(0, 79, 88)",
+      onTertiaryContainer: "rgb(151, 240, 255)",
+      error: "rgb(255, 180, 171)",
+      onError: "rgb(105, 0, 5)",
+      errorContainer: "rgb(147, 0, 10)",
+      onErrorContainer: "rgb(255, 180, 171)",
+      background: "rgb(31, 27, 22)",
+      onBackground: "rgb(235, 225, 217)",
+      surface: "rgb(31, 27, 22)",
+      onSurface: "rgb(235, 225, 217)",
+      surfaceVariant: "rgb(80, 69, 57)",
+      onSurfaceVariant: "rgb(212, 196, 181)",
+      outline: "rgb(156, 142, 128)",
+      outlineVariant: "rgb(80, 69, 57)",
+      shadow: "rgb(0, 0, 0)",
+      scrim: "rgb(0, 0, 0)",
+      inverseSurface: "rgb(235, 225, 217)",
+      inverseOnSurface: "rgb(53, 47, 42)",
+      inversePrimary: "rgb(133, 83, 0)",
+      elevation: {
+        level0: "transparent",
+        level1: "rgb(42, 35, 26)",
+        level2: "rgb(49, 40, 28)",
+        level3: "rgb(56, 44, 30)",
+        level4: "rgb(58, 46, 31)",
+        level5: "rgb(62, 49, 32)"
+      },
+      surfaceDisabled: "rgba(235, 225, 217, 0.12)",
+      onSurfaceDisabled: "rgba(235, 225, 217, 0.38)",
+      backdrop: "rgba(56, 47, 36, 0.4)",
+      errorCustom: "rgb(255, 180, 171)",
+      onErrorCustom: "rgb(95, 20, 17)",
+      errorCustomContainer: "rgb(125, 43, 37)",
+      onErrorCustomContainer: "rgb(255, 218, 214)"
+    }
+};
+
+console.log(DefaultTheme)