@boneframework/native-components 1.0.55 → 1.0.56

package/components/ColorProvider.tsx

@@ -1,10 +1,14 @@
-import ColorContext from "@boneframework/native-components/contexts/colors";
-import { defaultTheme, ThemeColors } from "@boneframework/native-components/contexts/theme";
+import { defaultTheme, ThemeColors } from "../contexts/theme";
+import {useContext} from "react";
+import ColorContext from "../contexts/colors";
 
-const ColorProvider = ({value, children}: {value?: ThemeColors; children: React.ReactNode}) => {
-  return <ColorContext value={value ?? defaultTheme}>
+const ColorProvider = ({colors, children}: {colors?: ThemeColors; children: React.ReactNode}) => {
+   const colorContext: ThemeColors = useContext(ColorContext);
+   colorContext.colors = colors.colors;
+
+    return <>
             {children}
-        </ColorContext>; 
+        </>;
 };
 
-export default ColorProvider; 
+export default ColorProvider;

package/contexts/colors.ts

@@ -1,4 +1,4 @@
-import { ThemeColors, defaultTheme } from "@boneframework/native-components/contexts/theme";
+import { ThemeColors, defaultTheme } from "../contexts/theme";
 import { createContext } from "react";
 
 const ColorContext = createContext<ThemeColors>(defaultTheme);
@@ -8,4 +8,4 @@ export type ColorsProviderProps = {
     value: ThemeColors;
 };
 
-export default ColorContext; 
+export default ColorContext;

package/contexts/theme.ts

@@ -1,34 +1,38 @@
-import { createContext } from 'react';
+import {Context, createContext} from 'react';
 
 type ThemeColors = {
-    primary: string;
-    secondary: string;
-    black: string;
-    white: string;
-    light: string;
-    whitish: string;
-    medium: string;
-    darkish: string;
-    dark: string;
-    danger: string;
-    bgGradient: string[];
+    colors: {
+        primary: string;
+        secondary: string;
+        black: string;
+        white: string;
+        light: string;
+        whitish: string;
+        medium: string;
+        darkish: string;
+        dark: string;
+        danger: string;
+        bgGradient: string[];
+    }
 };
 
 const defaultTheme: ThemeColors = {
-    primary: '#fc5c65',
-    secondary: '#4ecdc4',
-    black: '#000',
-    white: '#fff',
-    light: '#f0f4f4',
-    whitish: '#ddd',
-    medium: '#999',
-    darkish: '#333',
-    dark: '#222',
-    danger: '#ff5200',
-    bgGradient: ['#001C50', '#003698']
+    colors: {
+        primary: '#fc5c65',
+        secondary: '#4ecdc4',
+        black: '#000',
+        white: '#fff',
+        light: '#f0f4f4',
+        whitish: '#ddd',
+        medium: '#999',
+        darkish: '#333',
+        dark: '#222',
+        danger: '#ff5200',
+        bgGradient: ['#001C50', '#003698']
+    }
 };
 
-const ThemeContext = createContext<ThemeColors>(defaultTheme);
+const ThemeContext: Context<ThemeColors> = createContext<ThemeColors>(defaultTheme);
 
 export default ThemeContext;
 export { defaultTheme, ThemeColors };

package/hooks/useColors.ts

@@ -1,11 +1,10 @@
 
-// import { useContext } from "react";
-import colors from "../../../../config/colors";
-// import ColorContext from "@boneframework/native-components/contexts/colors";
+import { useContext } from "react";
+import ColorContext from "../contexts/colors";
+import {ThemeColors} from "../contexts/theme";
 
-const useColors = () => {
-    // return useContext(ColorContext);
-    return colors
+const useColors = (): ThemeColors => {
+    return useContext(ColorContext);
 }
 
-export default useColors;
+export default useColors;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@boneframework/native-components",
-  "version": "1.0.55",
+  "version": "1.0.56",
   "description": "Expo React Native Components for Bone Framework",
   "main": "src/Bone.ts",
   "scripts": {