ikualo-ui-kit-mobile 0.7.3 → 0.7.4

package/App.tsx

@@ -1,8 +1,5 @@
-import { darkTheme, lightTheme } from './src/config/paper.config';
 import { useFonts } from 'expo-font';
-import React, { useEffect } from 'react';
-import { Appearance } from 'react-native';
-import useStore from './src/store';
+import React from 'react';
 import { PageTouchable, Provider } from './src';
 import { Views } from './src/elements/views/Views';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
@@ -17,21 +14,9 @@ export default function App() {
     MontserratAlternatesExtraBold: require('./assets/fonts/MontserratAlternatesExtraBold.ttf'), //900
     MontserratAlternatesBold: require('./assets/fonts/MontserratAlternatesBold.ttf'), //700
   });
-  const { theme, setTheme } = useStore();
-
-
-  useEffect(() => {
-    const listener = Appearance.addChangeListener(({ colorScheme }) => {
-      if (colorScheme) {
-        setTheme(colorScheme === 'dark' ? darkTheme : lightTheme);
-      }
-    });
-    return () => listener.remove();
-  }, []);
 
   return (
-    < GestureHandlerRootView >
-
+    <GestureHandlerRootView >
       {fontsLoaded && (
         <Provider >
           <PageTouchable>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ikualo-ui-kit-mobile",
-  "version": "0.7.3",
+  "version": "0.7.4",
   "main": "src/index.ts",
   "scripts": {
     "start": "expo start",

package/src/elements/pages/Provider.tsx

@@ -1,10 +1,24 @@
 import { PaperProvider } from "react-native-paper"
 import useStore from "../../store"
-import { ReactNode } from "react"
+import { ReactNode, useEffect } from "react"
+import { ITheme } from "../../models"
+import { Appearance } from "react-native"
+import { darkTheme, lightTheme } from "../../config/paper.config"
 
-export const Provider = (props: { children: ReactNode }) => {
+export const Provider = (props: { children: ReactNode, onChange?: (theme: ITheme) => void }) => {
+    const { setTheme, theme } = useStore()
+
+    useEffect(() => {
+        const listener = Appearance.addChangeListener(({ colorScheme }) => {
+            if (colorScheme) {
+                setTheme(colorScheme === 'dark' ? darkTheme : lightTheme);
+                props.onChange && props.onChange(colorScheme === 'dark' ? darkTheme : lightTheme);
+            }
+        });
+        return () => listener.remove();
+    }, []);
     return (
-        <PaperProvider theme={useStore().theme} >
+        <PaperProvider theme={theme} >
             {props.children}
         </PaperProvider>)
 }