Add more screenshots

README.md

@@ -16,21 +16,30 @@ This repository is a template for React Native Expo applications. It integrates
 
 ### Light Theme
 
-![Home Screen Light](screenshots/home-light.png)
-![Settings Screen Light](screenshots/settings-light.png)
-![Modal Screen Light](screenshots/modal-light.png)
+![Home Screen Light](screenshots/light/home.png)
+![Settings Screen Light](screenshots/light/settings.png)
+![Modal Screen Light](screenshots/light/modal.png)
 
 ### Dark Theme
 
-![Home Screen Dark](screenshots/home-dark.png)
-![Settings Screen Dark](screenshots/settings-dark.png)
-![Modal Screen Dark](screenshots/modal-dark.png)
+![Home Screen Dark](screenshots/dark/home.png)
+![Settings Screen Dark](screenshots/dark/settings.png)
+![Modal Screen Dark](screenshots/dark/modal.png)
 
 ### Custom Themes
 
-![Home Screen Cyan Dark](screenshots/home-cyan.png)
-![Settings Screen Orange Light](screenshots/settings-orange.png)
-![Modal Screen Yellow Dark](screenshots/modal-yellow.png)
+![Default Theme](screenshots/themes/default.png)
+![Blue Theme](screenshots/themes/blue.png)
+![Brown Theme](screenshots/themes/brown.png)
+![Cyan Theme](screenshots/themes/cyan.png)
+![Green Theme](screenshots/themes/green.png)
+![Indigo Theme](screenshots/themes/indigo.png)
+![Lime Theme](screenshots/themes/lime.png)
+![Olive Theme](screenshots/themes/olive.png)
+![Orange Theme](screenshots/themes/orange.png)
+![Red Theme](screenshots/themes/red.png)
+![Teal Theme](screenshots/themes/teal.png)
+![Violet Theme](screenshots/themes/violet.png)
 
 ## Getting Started
 

app/(tabs)/_layout.tsx

@@ -30,6 +30,7 @@ const TabLayout = () => (
     }}
     tabBar={({ navigation, state, descriptors, insets }) => (
       <BottomNavigation.Bar
+        shifting
         navigationState={state}
         safeAreaInsets={insets}
         onTabPress={({ route, preventDefault }) => {

styles/colors.ts

@@ -7,85 +7,43 @@ import { MD3DarkTheme, MD3LightTheme } from "react-native-paper";
 const Colors = {
   light: {
     default: { primary: MD3LightTheme.colors.primary },
-    yellow: {
-      primary: "rgb(135, 82, 0)",
+    orange: {
+      primary: "rgb(176, 46, 0)",
       onPrimary: "rgb(255, 255, 255)",
-      primaryContainer: "rgb(255, 221, 186)",
-      onPrimaryContainer: "rgb(43, 23, 0)",
-      secondary: "rgb(113, 90, 65)",
+      primaryContainer: "rgb(255, 219, 209)",
+      onPrimaryContainer: "rgb(59, 9, 0)",
+      secondary: "rgb(119, 87, 78)",
       onSecondary: "rgb(255, 255, 255)",
-      secondaryContainer: "rgb(253, 221, 189)",
-      onSecondaryContainer: "rgb(40, 24, 5)",
-      tertiary: "rgb(85, 99, 60)",
+      secondaryContainer: "rgb(255, 219, 209)",
+      onSecondaryContainer: "rgb(44, 21, 15)",
+      tertiary: "rgb(108, 93, 47)",
       onTertiary: "rgb(255, 255, 255)",
-      tertiaryContainer: "rgb(216, 233, 183)",
-      onTertiaryContainer: "rgb(20, 31, 2)",
+      tertiaryContainer: "rgb(246, 225, 166)",
+      onTertiaryContainer: "rgb(35, 27, 0)",
       background: "rgb(255, 251, 255)",
-      onBackground: "rgb(31, 27, 22)",
+      onBackground: "rgb(32, 26, 24)",
       surface: "rgb(255, 251, 255)",
-      onSurface: "rgb(31, 27, 22)",
-      surfaceVariant: "rgb(241, 224, 208)",
-      onSurfaceVariant: "rgb(80, 69, 58)",
-      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, 184, 101)",
-      elevation: {
-        level0: "transparent",
-        level1: "rgb(249, 243, 242)",
-        level2: "rgb(245, 238, 235)",
-        level3: "rgb(242, 232, 227)",
-        level4: "rgb(241, 231, 224)",
-        level5: "rgb(238, 227, 219)",
-      },
-      surfaceDisabled: "rgba(31, 27, 22, 0.12)",
-      onSurfaceDisabled: "rgba(31, 27, 22, 0.38)",
-      backdrop: "rgba(57, 47, 36, 0.4)",
-    },
-    orange: {
-      primary: "rgb(255, 183, 134)",
-      onPrimary: "rgb(80, 36, 0)",
-      primaryContainer: "rgb(114, 54, 0)",
-      onPrimaryContainer: "rgb(255, 220, 198)",
-      secondary: "rgb(229, 191, 168)",
-      onSecondary: "rgb(66, 43, 27)",
-      secondaryContainer: "rgb(91, 65, 48)",
-      onSecondaryContainer: "rgb(255, 220, 198)",
-      tertiary: "rgb(201, 202, 147)",
-      onTertiary: "rgb(49, 50, 10)",
-      tertiaryContainer: "rgb(72, 73, 31)",
-      onTertiaryContainer: "rgb(229, 230, 173)",
-      error: "rgb(255, 180, 171)",
-      onError: "rgb(105, 0, 5)",
-      errorContainer: "rgb(147, 0, 10)",
-      onErrorContainer: "rgb(255, 180, 171)",
-      background: "rgb(32, 26, 23)",
-      onBackground: "rgb(236, 224, 218)",
-      surface: "rgb(32, 26, 23)",
-      onSurface: "rgb(236, 224, 218)",
-      surfaceVariant: "rgb(82, 68, 60)",
-      onSurfaceVariant: "rgb(215, 195, 183)",
-      outline: "rgb(159, 141, 131)",
-      outlineVariant: "rgb(82, 68, 60)",
+      onSurface: "rgb(32, 26, 24)",
+      surfaceVariant: "rgb(245, 222, 216)",
+      onSurfaceVariant: "rgb(83, 67, 63)",
+      outline: "rgb(133, 115, 110)",
+      outlineVariant: "rgb(216, 194, 188)",
       shadow: "rgb(0, 0, 0)",
       scrim: "rgb(0, 0, 0)",
-      inverseSurface: "rgb(236, 224, 218)",
-      inverseOnSurface: "rgb(54, 47, 43)",
-      inversePrimary: "rgb(150, 73, 0)",
+      inverseSurface: "rgb(54, 47, 45)",
+      inverseOnSurface: "rgb(251, 238, 235)",
+      inversePrimary: "rgb(255, 181, 160)",
       elevation: {
         level0: "transparent",
-        level1: "rgb(43, 34, 29)",
-        level2: "rgb(50, 39, 32)",
-        level3: "rgb(57, 43, 35)",
-        level4: "rgb(59, 45, 36)",
-        level5: "rgb(63, 48, 39)",
+        level1: "rgb(251, 241, 242)",
+        level2: "rgb(249, 235, 235)",
+        level3: "rgb(246, 229, 227)",
+        level4: "rgb(246, 226, 224)",
+        level5: "rgb(244, 222, 219)",
       },
-      surfaceDisabled: "rgba(236, 224, 218, 0.12)",
-      onSurfaceDisabled: "rgba(236, 224, 218, 0.38)",
-      backdrop: "rgba(58, 46, 38, 0.4)",
+      surfaceDisabled: "rgba(32, 26, 24, 0.12)",
+      onSurfaceDisabled: "rgba(32, 26, 24, 0.38)",
+      backdrop: "rgba(59, 45, 41, 0.4)",
     },
     red: {
       primary: "rgb(185, 12, 85)",
@@ -470,85 +428,47 @@ const Colors = {
   },
   dark: {
     default: { primary: MD3DarkTheme.colors.primary },
-    yellow: {
-      primary: "rgb(255, 184, 101)",
-      onPrimary: "rgb(72, 42, 0)",
-      primaryContainer: "rgb(102, 61, 0)",
-      onPrimaryContainer: "rgb(255, 221, 186)",
-      secondary: "rgb(224, 193, 163)",
-      onSecondary: "rgb(63, 45, 23)",
-      secondaryContainer: "rgb(88, 67, 43)",
-      onSecondaryContainer: "rgb(253, 221, 189)",
-      tertiary: "rgb(189, 205, 157)",
-      onTertiary: "rgb(40, 52, 18)",
-      tertiaryContainer: "rgb(62, 75, 39)",
-      onTertiaryContainer: "rgb(216, 233, 183)",
+    orange: {
+      primary: "rgb(255, 183, 134)",
+      onPrimary: "rgb(80, 36, 0)",
+      primaryContainer: "rgb(114, 54, 0)",
+      onPrimaryContainer: "rgb(255, 220, 198)",
+      secondary: "rgb(229, 191, 168)",
+      onSecondary: "rgb(66, 43, 27)",
+      secondaryContainer: "rgb(91, 65, 48)",
+      onSecondaryContainer: "rgb(255, 220, 198)",
+      tertiary: "rgb(201, 202, 147)",
+      onTertiary: "rgb(49, 50, 10)",
+      tertiaryContainer: "rgb(72, 73, 31)",
+      onTertiaryContainer: "rgb(229, 230, 173)",
       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, 58)",
-      onSurfaceVariant: "rgb(212, 196, 181)",
-      outline: "rgb(157, 142, 129)",
-      outlineVariant: "rgb(80, 69, 58)",
-      shadow: "rgb(0, 0, 0)",
-      scrim: "rgb(0, 0, 0)",
-      inverseSurface: "rgb(235, 225, 217)",
-      inverseOnSurface: "rgb(53, 47, 42)",
-      inversePrimary: "rgb(135, 82, 0)",
-      elevation: {
-        level0: "transparent",
-        level1: "rgb(42, 35, 26)",
-        level2: "rgb(49, 40, 28)",
-        level3: "rgb(56, 44, 31)",
-        level4: "rgb(58, 46, 32)",
-        level5: "rgb(62, 49, 33)",
-      },
-      surfaceDisabled: "rgba(235, 225, 217, 0.12)",
-      onSurfaceDisabled: "rgba(235, 225, 217, 0.38)",
-      backdrop: "rgba(57, 47, 36, 0.4)",
-    },
-    orange: {
-      primary: "rgb(176, 46, 0)",
-      onPrimary: "rgb(255, 255, 255)",
-      primaryContainer: "rgb(255, 219, 209)",
-      onPrimaryContainer: "rgb(59, 9, 0)",
-      secondary: "rgb(119, 87, 78)",
-      onSecondary: "rgb(255, 255, 255)",
-      secondaryContainer: "rgb(255, 219, 209)",
-      onSecondaryContainer: "rgb(44, 21, 15)",
-      tertiary: "rgb(108, 93, 47)",
-      onTertiary: "rgb(255, 255, 255)",
-      tertiaryContainer: "rgb(246, 225, 166)",
-      onTertiaryContainer: "rgb(35, 27, 0)",
-      background: "rgb(255, 251, 255)",
-      onBackground: "rgb(32, 26, 24)",
-      surface: "rgb(255, 251, 255)",
-      onSurface: "rgb(32, 26, 24)",
-      surfaceVariant: "rgb(245, 222, 216)",
-      onSurfaceVariant: "rgb(83, 67, 63)",
-      outline: "rgb(133, 115, 110)",
-      outlineVariant: "rgb(216, 194, 188)",
+      background: "rgb(32, 26, 23)",
+      onBackground: "rgb(236, 224, 218)",
+      surface: "rgb(32, 26, 23)",
+      onSurface: "rgb(236, 224, 218)",
+      surfaceVariant: "rgb(82, 68, 60)",
+      onSurfaceVariant: "rgb(215, 195, 183)",
+      outline: "rgb(159, 141, 131)",
+      outlineVariant: "rgb(82, 68, 60)",
       shadow: "rgb(0, 0, 0)",
       scrim: "rgb(0, 0, 0)",
-      inverseSurface: "rgb(54, 47, 45)",
-      inverseOnSurface: "rgb(251, 238, 235)",
-      inversePrimary: "rgb(255, 181, 160)",
+      inverseSurface: "rgb(236, 224, 218)",
+      inverseOnSurface: "rgb(54, 47, 43)",
+      inversePrimary: "rgb(150, 73, 0)",
       elevation: {
         level0: "transparent",
-        level1: "rgb(251, 241, 242)",
-        level2: "rgb(249, 235, 235)",
-        level3: "rgb(246, 229, 227)",
-        level4: "rgb(246, 226, 224)",
-        level5: "rgb(244, 222, 219)",
+        level1: "rgb(43, 34, 29)",
+        level2: "rgb(50, 39, 32)",
+        level3: "rgb(57, 43, 35)",
+        level4: "rgb(59, 45, 36)",
+        level5: "rgb(63, 48, 39)",
       },
-      surfaceDisabled: "rgba(32, 26, 24, 0.12)",
-      onSurfaceDisabled: "rgba(32, 26, 24, 0.38)",
-      backdrop: "rgba(59, 45, 41, 0.4)",
+      surfaceDisabled: "rgba(236, 224, 218, 0.12)",
+      onSurfaceDisabled: "rgba(236, 224, 218, 0.38)",
+      backdrop: "rgba(58, 46, 38, 0.4)",
     },
     red: {
       primary: "rgb(255, 177, 194)",

styles/themes.ts

@@ -43,13 +43,6 @@ const Themes = {
         ...Colors.light.default,
       },
     },
-    yellow: {
-      ...BaseLightTheme,
-      colors: {
-        ...BaseLightTheme.colors,
-        ...Colors.light.yellow,
-      },
-    },
     orange: {
       ...BaseLightTheme,
       colors: {
@@ -136,13 +129,6 @@ const Themes = {
         ...Colors.dark.default,
       },
     },
-    yellow: {
-      ...BaseDarkTheme,
-      colors: {
-        ...BaseDarkTheme.colors,
-        ...Colors.dark.yellow,
-      },
-    },
     red: {
       ...BaseDarkTheme,
       colors: {