@hoddy-ui/core 1.0.94 → 1.0.96

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hoddy-ui/core",
-  "version": "1.0.94",
+  "version": "1.0.96",
   "description": "Core rich react native components written in typescript",
   "main": "index.ts",
   "repository": {

package/src/hooks.ts

@@ -15,6 +15,7 @@ export const useTheme = () => {
 };
 export const useNavScreenOptions = (type: "stack" | "tab" | "drawer") => {
   const colors = useColors();
+  const theme = useTheme();
   const options: any = {
     stack: {
       headerShown: false,
@@ -36,7 +37,7 @@ export const useNavScreenOptions = (type: "stack" | "tab" | "drawer") => {
       headerShown: false,
       headerTintColor: colors.dark.main,
       tabBarStyle: {
-        borderTopColor: colors.white[2],
+        borderTopColor: theme === "dark" ? colors.light.main : colors.white[2],
         borderTopWidth: 1,
         // shadowColor: "#000",
         // shadowOffset: { height: -3, width: 0 },

package/src/theme/colors.ts

@@ -7,66 +7,66 @@ export const setExtraColors = (c: extraColorTypes) => (extraColors = c);
 export default function colors(theme: ThemeTypes) {
   const lightColors = {
     white: {
-      1: "#fff",
+      1: "#ffffff",
       2: "#f7f7f7",
-      3: "#eee",
-      4: "#ddd",
-      5: "#bbb",
+      3: "#eeeeee",
+      4: "#dddddd",
+      5: "#bbbbbb",
       ...extraColors?.light?.white,
     },
     black: {
-      1: "#888",
-      2: "#777",
-      3: "#555",
-      4: "#333",
-      5: "#000",
+      1: "#888888",
+      2: "#777777",
+      3: "#555555",
+      4: "#333333",
+      5: "#000000",
       ...extraColors?.light?.black,
     },
   };
 
   const darkColors = {
     black: {
-      1: "#fff",
+      1: "#ffffff",
       2: "#f7f7f7",
-      3: "#eee",
-      4: "#ddd",
-      5: "#aaa",
+      3: "#eeeeee",
+      4: "#dddddd",
+      5: "#aaaaaa",
       ...extraColors?.dark?.black,
     },
     white: {
-      1: "#000",
-      2: "#222",
-      3: "#333",
-      4: "#444",
-      5: "#555",
+      1: "#060606",
+      2: "#222222",
+      3: "#333333",
+      4: "#444444",
+      5: "#555555",
       ...extraColors?.dark?.white,
     },
     dark: {
       main: "#f2f3f4",
-      light: "#fff",
-      dark: "#ddd",
-      text: "#000",
+      light: "#ffffff",
+      dark: "#dddddd",
+      text: "#000000",
       ...extraColors?.dark?.dark,
     },
     light: {
-      main: "#111",
-      light: "#555",
-      dark: "#333",
-      text: "#fff",
+      main: "#111111",
+      light: "#555555",
+      dark: "#333333",
+      text: "#ffffff",
       ...extraColors?.dark?.light,
     },
     textSecondary: {
-      main: "#666",
-      light: "#777",
-      dark: "#444",
-      text: "#fff",
+      main: "#666666",
+      light: "#777777",
+      dark: "#444444",
+      text: "#ffffff",
       ...extraColors?.dark?.textSecondary,
     },
     primary: {
-      main: "#f80",
-      light: "#FEFFD3",
-      dark: "#fa0",
-      text: "#fff",
+      main: "#ff8800",
+      light: "#feffd3",
+      dark: "#ffaa00",
+      text: "#ffffff",
       ...extraColors?.light?.primary,
       ...extraColors?.dark?.primary,
     },
@@ -76,74 +76,73 @@ export default function colors(theme: ThemeTypes) {
   return {
     ...extraColors[theme],
     primary: {
-      main: "#f80",
-      light: "#FEFFD3",
-      dark: "#fa0",
-      text: "#fff",
+      main: "#ff8800",
+      light: "#feffd3",
+      dark: "#ffaa00",
+      text: "#ffffff",
       ...extraColors?.light?.primary,
     },
     secondary: {
-      main: "#f11",
-      light: "#f43",
-      dark: "#d00",
-      text: "#fff",
+      main: "#ff1111",
+      light: "#ff4433",
+      dark: "#dd0000",
+      text: "#ffffff",
       ...extraColors?.light?.secondary,
     },
     light: {
-      main: "#fff",
-      light: "#fff",
-      dark: "#ddd",
-      text: "#000",
+      main: "#ffffff",
+      light: "#ffffff",
+      dark: "#dddddd",
+      text: "#000000",
       ...extraColors?.light?.light,
     },
     dark: {
-      main: "#000",
-      light: "#777",
-      dark: "#111",
-      text: "#fff",
+      main: "#000000",
+      light: "#777777",
+      dark: "#111111",
+      text: "#ffffff",
       ...extraColors?.light?.dark,
     },
     textSecondary: {
-      main: "#aaa",
-      light: "#bbb",
-      dark: "#777",
-      text: "#123",
+      main: "#aaaaaa",
+      light: "#bbbbbb",
+      dark: "#777777",
+      text: "#112233",
       ...extraColors?.light?.textSecondary,
     },
     blue: {
-      main: "#09F",
-      light: "#39f",
-      dark: "#028",
-      text: "#fff",
+      main: "#0099ff",
+      light: "#3399ff",
+      dark: "#002288",
+      text: "#ffffff",
       ...extraColors?.light?.blue,
     },
     info: {
-      main: "#09f",
-      light: "#3af",
-      dark: "#08a",
-      text: "#fff",
+      main: "#0099ff",
+      light: "#33aaff",
+      dark: "#0088aa",
+      text: "#ffffff",
       ...extraColors?.light?.info,
     },
     success: {
-      main: "#0a4",
-      text: "#fff",
-      light: "#5c3",
-      dark: "#062",
+      main: "#00aa44",
+      text: "#ffffff",
+      light: "#55cc33",
+      dark: "#006622",
       ...extraColors?.light?.success,
     },
-
     warning: {
-      main: "#fa2",
-      light: "#fc7",
-      dark: "#f90",
-      text: "#fff",
+      main: "#ffaa22",
+      light: "#ffcc77",
+      dark: "#ff9900",
+      text: "#ffffff",
       ...extraColors?.light?.warning,
     },
     error: {
-      main: "#D22",
-      text: "#fff",
-      light: "#f43",
-      dark: "#a20",
+      main: "#dd2222",
+      text: "#ffffff",
+      light: "#ff4433",
+      dark: "#aa2200",
       ...extraColors?.light?.error,
     },
     ...dynamicColors,

package/src/theme/index.tsx

@@ -1,18 +1,18 @@
 import AsyncStorage from "@react-native-async-storage/async-storage";
 import * as NavigationBar from "expo-navigation-bar";
 import * as SystemUI from "expo-system-ui";
-import React, { createContext, useReducer, useState } from "react";
+import React, { createContext, useEffect, useReducer } from "react";
 import { Platform, useColorScheme } from "react-native";
+import { SafeAreaProvider } from "react-native-safe-area-context";
+import FlashMessage from "../Components/FlashMessage";
+import { useColors, useTheme } from "../hooks";
 import {
-  FlashMessageProps,
   ThemeActionTypes,
   ThemeContext,
   ThemeProviderProps,
   ThemeState,
   ThemeTypes,
 } from "../types";
-import FlashMessage from "../Components/FlashMessage";
-import { SafeAreaProvider } from "react-native-safe-area-context";
 
 export const UIThemeContext = createContext<ThemeContext>({
   themeState: { mode: "default", value: "light" },
@@ -23,19 +23,6 @@ function themeReducer(
   { type, payload }: ThemeActionTypes
 ): ThemeState {
   // Platform
-  if (payload === "dark" || type === "dark") {
-    SystemUI.setBackgroundColorAsync("#000000");
-    if (Platform.OS === "android") {
-      NavigationBar.setButtonStyleAsync("light");
-      NavigationBar.setBackgroundColorAsync("#000000");
-    }
-  } else {
-    SystemUI.setBackgroundColorAsync("#ffffff");
-    if (Platform.OS === "android") {
-      NavigationBar.setButtonStyleAsync("dark");
-      NavigationBar.setBackgroundColorAsync("#fff");
-    }
-  }
 
   switch (type) {
     case "dark":
@@ -49,6 +36,27 @@ function themeReducer(
   }
 }
 
+const ConfigureSystemUI = () => {
+  const theme = useTheme();
+  const colors = useColors();
+
+  useEffect(() => {
+    if (colors) {
+      SystemUI.setBackgroundColorAsync(colors.white[1]);
+      NavigationBar.setBackgroundColorAsync(colors.white[1]);
+    }
+    if (Platform.OS === "android") {
+      if (theme === "dark") {
+        NavigationBar.setButtonStyleAsync("light");
+      } else {
+        NavigationBar.setButtonStyleAsync("dark");
+      }
+    }
+  }, [colors, theme]);
+
+  return <></>;
+};
+
 export const UIThemeProvider = ({ children }: ThemeProviderProps) => {
   const [themeState, themeDispatch] = useReducer(themeReducer, {
     mode: "default",
@@ -87,6 +95,7 @@ export const UIThemeProvider = ({ children }: ThemeProviderProps) => {
       >
         {children}
         <FlashMessage />
+        <ConfigureSystemUI />
       </UIThemeContext.Provider>
     </SafeAreaProvider>
   );

package/src/types.ts

@@ -30,6 +30,7 @@ export type extraColorTypes = {
       light?: string;
       dark?: string;
       text?: string;
+      [key: number]: string;
     };
   };
   light?: {
@@ -38,6 +39,7 @@ export type extraColorTypes = {
       light?: string;
       dark?: string;
       text?: string;
+      [key: number]: string;
     };
   };
 };