@hoddy-ui/core 1.0.95 → 1.0.97

package/package.json

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

package/src/Components/Popup.tsx

@@ -11,7 +11,7 @@ import {
 
 import React, { useState } from "react";
 import { ScaledSheet } from "react-native-size-matters";
-import { useColors } from "../hooks";
+import { useColors, useTheme } from "../hooks";
 import { PopupProps } from "../types";
 import { IconButton } from "./Button";
 import Typography from "./Typography";
@@ -25,7 +25,9 @@ export const Popup: React.FC<PopupProps> = ({
   children,
   open,
   onClose = () => {},
+  style,
 }) => {
+  const theme = useTheme();
   const colors = useColors();
   const [show, setShow] = useState(open);
   const [showSecondary, setShowSecondary] = useState(false);
@@ -47,12 +49,13 @@ export const Popup: React.FC<PopupProps> = ({
     },
     container: {
       paddingBottom: sheet ? "30@ms" : 0,
-      backgroundColor: colors.white[2],
+      backgroundColor: theme === "dark" ? "#111" : colors.white[2],
       borderTopLeftRadius: 20,
       borderTopRightRadius: 20,
       borderBottomRightRadius: sheet ? 0 : 20,
       borderBottomLeftRadius: sheet ? 0 : 20,
       width: "100%",
+      ...style,
     },
     content: {
       paddingHorizontal: bare ? undefined : "10@ms",

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

@@ -220,6 +220,7 @@ export interface PopupProps {
   children: ReactNode;
   open: boolean;
   onClose?: () => void;
+  style?: ViewStyle;
 }
 
 export interface SpinnerProps {