ikualo-ui-kit-mobile 0.7.1 → 0.7.4

package/App.tsx

@@ -1,11 +1,6 @@
-import { PaperProvider } from 'react-native-paper';
-
-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 { PageTouchable } from './src';
+import React from 'react';
+import { PageTouchable, Provider } from './src';
 import { Views } from './src/elements/views/Views';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 
@@ -19,27 +14,15 @@ 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 && (
-        <PaperProvider theme={theme as any}>
+        <Provider >
           <PageTouchable>
             <Views />
           </PageTouchable>
-        </PaperProvider>
+        </Provider>
       )}
     </GestureHandlerRootView>
   );

package/package.json

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

package/src/elements/pages/Provider.tsx

@@ -0,0 +1,24 @@
+import { PaperProvider } from "react-native-paper"
+import useStore from "../../store"
+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, 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={theme} >
+            {props.children}
+        </PaperProvider>)
+}

package/src/index.ts

@@ -1,5 +1,6 @@
 export * from './elements/pages/PageBasic';
 export * from './elements/pages/PageTouchable';
+export * from './elements/pages/Provider';
 
 export * from './elements/buttons/BtnContained';
 export * from './elements/buttons/BtnOutlined';
@@ -38,4 +39,4 @@ export * from './elements/select/Select';
 export * from './elements/select/SelectList';
 
 export * from './elements/accordion/Accordion';
-export * from './elements/navbar/Navbar';
+export * from './elements/navbar/Navbar';