simplify the ThemeProvider, add more colors

Nur Fikri · Nur Fikri · commit be626ce008d2 · 2021-06-06T14:55:34.000+07:00
diff --git a/constants/theme.json b/constants/theme.json
@@ -98,5 +98,9 @@
 	"gray500": "#6c6c6c",
 	"white": "#FFFFFF",
 	"white100": "#f7f7f7",
-	"white200": "#e6e6e6"
+	"white200": "#e6e6e6",
+	"dark" : "#191921",
+	"dark100": "#383b4d",
+	"dark200": "#262834"
+
 }
diff --git a/examples/showcase/App.tsx b/examples/showcase/App.tsx
@@ -1,13 +1,12 @@
 import React from "react";
-import { ThemeProvider, useTheme } from "react-native-rapi-ui";
+import { ThemeProvider } from "react-native-rapi-ui";
 import Navigator from "./src/navigation";
 import { enableScreens } from "react-native-screens";
 export default function App() {
   enableScreens();
-  const { setTheme } = useTheme();
 
   return (
-    <ThemeProvider theme="light" setTheme={setTheme}>
+    <ThemeProvider>
       <Navigator />
     </ThemeProvider>
   );
diff --git a/examples/showcase/package-lock.json b/examples/showcase/package-lock.json
diff --git a/examples/showcase/src/rapi/constants/theme.json b/examples/showcase/src/rapi/constants/theme.json
@@ -98,5 +98,9 @@
 	"gray500": "#6c6c6c",
 	"white": "#FFFFFF",
 	"white100": "#f7f7f7",
-	"white200": "#e6e6e6"
+	"white200": "#e6e6e6",
+	"dark" : "#191921",
+	"dark100": "#383b4d",
+	"dark200": "#262834"
+
 }
diff --git a/examples/showcase/src/rapi/provider/ThemeProvider.tsx b/examples/showcase/src/rapi/provider/ThemeProvider.tsx
@@ -19,25 +19,36 @@ const ThemeContext = React.createContext<ContextProps>({
 
 const useTheme = () => React.useContext(ThemeContext);
 
-const ThemeProvider: React.FC<ContextProps> = (props) => {
+const ThemeProvider = (props: {
+  theme?: "light" | "dark";
+  isDarkmode?: boolean;
+  images?: Array<any> | null;
+  fonts?: any;
+  children?: React.ReactNode;
+  loading?: React.ReactNode;
+}) => {
   const [theme, setTheme] = React.useState<"light" | "dark">(
     props.theme || "light"
   );
   const isLoadingComplete = useCachedResources(props.images, props.fonts);
   const isDarkmode = theme === "dark";
 
   return (
-    <ThemeContext.Provider value={{ theme, setTheme, isDarkmode }}>
+    <ThemeContext.Provider value={{ theme, isDarkmode, setTheme }}>
       <StatusBar
         backgroundColor={component[theme].statusBar.color}
         barStyle={isDarkmode ? "light-content" : "dark-content"}
       />
       <SafeAreaProvider
         style={{
-          backgroundColor: isDarkmode ? "#191921" : themeColor.white100,
+          backgroundColor: isDarkmode ? themeColor.dark : themeColor.white100,
         }}
       >
-        {!isLoadingComplete ? null : props.children}
+        {!isLoadingComplete
+          ? props.loading
+            ? props.loading
+            : null
+          : props.children}
       </SafeAreaProvider>
     </ThemeContext.Provider>
   );
diff --git a/examples/showcase/src/screens/Avatar.tsx b/examples/showcase/src/screens/Avatar.tsx
@@ -34,7 +34,7 @@ export default function ({
           <Ionicons
             name={isDarkmode ? "sunny" : "moon"}
             size={20}
-            color={isDarkmode ? themeColor.white100 : "#191921"}
+            color={isDarkmode ? themeColor.white100 : themeColor.dark}
           />
         }
         rightAction={() => {
diff --git a/examples/showcase/src/screens/Buttons.tsx b/examples/showcase/src/screens/Buttons.tsx
@@ -34,7 +34,7 @@ export default function ({
           <Ionicons
             name={isDarkmode ? "sunny" : "moon"}
             size={20}
-            color={isDarkmode ? themeColor.white100 : "#191921"}
+            color={isDarkmode ? themeColor.white100 : themeColor.dark}
           />
         }
         rightAction={() => {
diff --git a/examples/showcase/src/screens/Colors.tsx b/examples/showcase/src/screens/Colors.tsx
@@ -32,7 +32,7 @@ export default function ({
           <Ionicons
             name={isDarkmode ? "sunny" : "moon"}
             size={20}
-            color={isDarkmode ? themeColor.white100 : "#191921"}
+            color={isDarkmode ? themeColor.white100 : themeColor.dark}
           />
         }
         rightAction={() => {
diff --git a/examples/showcase/src/screens/Forms.tsx b/examples/showcase/src/screens/Forms.tsx
@@ -50,7 +50,7 @@ export default function ({
           <Ionicons
             name={isDarkmode ? "sunny" : "moon"}
             size={20}
-            color={isDarkmode ? themeColor.white100 : "#191921"}
+            color={isDarkmode ? themeColor.white100 : themeColor.dark}
           />
         }
         rightAction={() => {
diff --git a/examples/showcase/src/screens/Home.tsx b/examples/showcase/src/screens/Home.tsx
@@ -5,7 +5,6 @@ import {
   TopNav,
   Text,
   themeColor,
-  Button,
   useTheme,
 } from "react-native-rapi-ui";
 import { Ionicons } from "@expo/vector-icons";
@@ -39,7 +38,7 @@ export default function ({
           <Ionicons
             name={isDarkmode ? "sunny" : "moon"}
             size={20}
-            color={isDarkmode ? themeColor.white100 : "#191921"}
+            color={isDarkmode ? themeColor.white100 : themeColor.dark}
           />
         }
         rightAction={() => {
diff --git a/examples/showcase/src/screens/Section.tsx b/examples/showcase/src/screens/Section.tsx
@@ -34,7 +34,7 @@ export default function ({
           <Ionicons
             name={isDarkmode ? "sunny" : "moon"}
             size={20}
-            color={isDarkmode ? themeColor.white100 : "#191921"}
+            color={isDarkmode ? themeColor.white100 : themeColor.dark}
           />
         }
         rightAction={() => {
diff --git a/examples/showcase/src/screens/Typography.tsx b/examples/showcase/src/screens/Typography.tsx
@@ -26,7 +26,7 @@ export default function ({
           <Ionicons
             name={isDarkmode ? "sunny" : "moon"}
             size={20}
-            color={isDarkmode ? themeColor.white100 : "#191921"}
+            color={isDarkmode ? themeColor.white100 : themeColor.dark}
           />
         }
         rightAction={() => {
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "react-native-rapi-ui",
-	"version": "0.2.0",
+	"version": "0.2.1",
 	"description": "React native components library",
 	"main": "index.ts",
 	"scripts": {
diff --git a/provider/ThemeProvider.tsx b/provider/ThemeProvider.tsx
@@ -19,25 +19,36 @@ const ThemeContext = React.createContext<ContextProps>({
 
 const useTheme = () => React.useContext(ThemeContext);
 
-const ThemeProvider: React.FC<ContextProps> = (props) => {
+const ThemeProvider = (props: {
+  theme?: "light" | "dark";
+  isDarkmode?: boolean;
+  images?: Array<any> | null;
+  fonts?: any;
+  children?: React.ReactNode;
+  loading?: React.ReactNode;
+}) => {
   const [theme, setTheme] = React.useState<"light" | "dark">(
     props.theme || "light"
   );
   const isLoadingComplete = useCachedResources(props.images, props.fonts);
   const isDarkmode = theme === "dark";
 
   return (
-    <ThemeContext.Provider value={{ theme, setTheme, isDarkmode }}>
+    <ThemeContext.Provider value={{ theme, isDarkmode, setTheme }}>
       <StatusBar
         backgroundColor={component[theme].statusBar.color}
         barStyle={isDarkmode ? "light-content" : "dark-content"}
       />
       <SafeAreaProvider
         style={{
-          backgroundColor: isDarkmode ? "#191921" : themeColor.white100,
+          backgroundColor: isDarkmode ? themeColor.dark : themeColor.white100,
         }}
       >
-        {!isLoadingComplete ? null : props.children}
+        {!isLoadingComplete
+          ? props.loading
+            ? props.loading
+            : null
+          : props.children}
       </SafeAreaProvider>
     </ThemeContext.Provider>
   );

Original file line number	Diff line number	Diff line change
`@@ -34,7 +34,7 @@ export default function ({`
`34`	`34`	`<Ionicons`
`35`	`35`	`name={isDarkmode ? "sunny" : "moon"}`
`36`	`36`	`size={20}`
`37`		`- color={isDarkmode ? themeColor.white100 : "#191921"}`
	`37`	`+ color={isDarkmode ? themeColor.white100 : themeColor.dark}`
`38`	`38`	`/>`
`39`	`39`	`}`
`40`	`40`	`rightAction={() => {`
Original file line number	Diff line number	Diff line change
`@@ -32,7 +32,7 @@ export default function ({`
`32`	`32`	`<Ionicons`
`33`	`33`	`name={isDarkmode ? "sunny" : "moon"}`
`34`	`34`	`size={20}`
`35`		`- color={isDarkmode ? themeColor.white100 : "#191921"}`
	`35`	`+ color={isDarkmode ? themeColor.white100 : themeColor.dark}`
`36`	`36`	`/>`
`37`	`37`	`}`
`38`	`38`	`rightAction={() => {`
Original file line number	Diff line number	Diff line change
`@@ -50,7 +50,7 @@ export default function ({`
`50`	`50`	`<Ionicons`
`51`	`51`	`name={isDarkmode ? "sunny" : "moon"}`
`52`	`52`	`size={20}`
`53`		`- color={isDarkmode ? themeColor.white100 : "#191921"}`
	`53`	`+ color={isDarkmode ? themeColor.white100 : themeColor.dark}`
`54`	`54`	`/>`
`55`	`55`	`}`
`56`	`56`	`rightAction={() => {`