@jescon-technologies/react-native-ui-kit 0.0.13 → 0.0.14

package/index.d.ts

@@ -3,6 +3,9 @@ export { default as AAlertIOS } from './src/Alerts/AAlertIOS';
 export { default as AAlert } from './src/Alerts/AAlert';
 export { default as ABlink } from './src/Alerts/ABlink';
 export { default as HIcons } from './src/Hoc/HIcons';
+export { default as HView } from './src/Hoc/HView';
+export { default as Navigation } from './src/Navigation/PageNavigation';
+
 export { default as NetworkServiceCall } from './src/Common/NetworkServiceCall';
 export * from './src/Navigation/useNavigation';
 export { default as CBackHandler } from './src/CustomComponents/CBackHandler';

package/index.js

@@ -3,6 +3,9 @@ export { default as AAlertIOS } from './src/Alerts/AAlertIOS';
 export { default as AAlert } from './src/Alerts/AAlert';
 export { default as ABlink } from './src/Alerts/ABlink';
 export { default as HIcons } from './src/Hoc/HIcons';
+export { default as HView } from './src/Hoc/HView';
+export { default as Navigation } from './src/Navigation/PageNavigation';
+
 export { default as NetworkServiceCall } from './src/Common/NetworkServiceCall';
 export * from './src/Navigation/useNavigation';
 export { default as CBackHandler } from './src/CustomComponents/CBackHandler';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jescon-technologies/react-native-ui-kit",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "description": "A React Native module for Jescon Technologies that provides react-native-ui-kit",
   "main": "index.js",
   "types": "index.d.ts",

package/src/Hoc/HView.tsx

@@ -0,0 +1,33 @@
+import React, { createContext, useContext } from 'react';
+import type { ReactNode } from 'react';
+
+interface HViewProps {
+    component?: string;
+    components?: Record<string, React.ComponentType<any>>;
+    children?: ReactNode;
+    [key: string]: any;
+}
+
+const ComponentsContext = createContext<
+    Record<string, React.ComponentType<any>> | undefined
+>(undefined);
+
+const HView: React.FC<HViewProps> = ({ component, components, ...props }) => {
+    const inheritedComponents = useContext(ComponentsContext);
+
+    if (!component) {
+        return components ? (
+            <ComponentsContext.Provider value={components}>
+                {props.children}
+            </ComponentsContext.Provider>
+        ) : (
+            <>{props.children}</>
+        );
+    }
+
+    const ViewHOCComponent = (components ?? inheritedComponents)?.[component];
+
+    return ViewHOCComponent ? <ViewHOCComponent {...props} /> : null;
+};
+
+export default HView;

package/src/Navigation/PageNavigation.tsx

@@ -0,0 +1,189 @@
+import React, {
+  createContext,
+  useState,
+  useRef,
+  useEffect,
+  useContext,
+  ReactNode,
+} from 'react';
+
+import { View, Platform } from 'react-native';
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+
+type Route = {
+  name: string;
+  params?: any;
+};
+
+type NavigationContextType = {
+  navigate: (screenName: string, params?: any) => void;
+  replace: (screenName: string, params?: any) => void;
+  goBack: () => void;
+  addFocusListener: (screenName: string, callback: () => void) => () => void;
+  current: Route;
+};
+
+const NavigationContext = createContext<NavigationContextType | null>(null);
+
+type NavigationScreens = Record<string, React.ComponentType<any>>;
+
+type ProviderProps = {
+  screens: NavigationScreens;
+  children?: ReactNode;
+};
+
+export const NavigationProvider: React.FC<ProviderProps> = ({
+  screens,
+  children,
+}) => {
+  const [stack, setStack] = useState<Route[]>([
+    { name: Object.keys(screens)[0], params: {} },
+  ]);
+
+  const focusListeners = useRef<Record<string, Array<() => void>>>({});
+
+  const current = stack[stack.length - 1];
+
+  const navigate = (screenName: string, params = {}) => {
+    setStack(prev => [...prev, { name: screenName, params }]);
+  };
+
+  const replace = (screenName: string, params = {}) => {
+    setStack(prev => [
+      ...prev.slice(0, -1),
+      { name: screenName, params },
+    ]);
+  };
+
+  const goBack = () => {
+    setStack(prev => (prev.length > 1 ? prev.slice(0, -1) : prev));
+  };
+
+  const addFocusListener = (screenName: string, callback: () => void) => {
+    if (!focusListeners.current[screenName]) {
+      focusListeners.current[screenName] = [];
+    }
+
+    focusListeners.current[screenName].push(callback);
+
+    return () => {
+      const listeners = focusListeners.current[screenName] || [];
+      focusListeners.current[screenName] = listeners.filter(
+        cb => cb !== callback
+      );
+    };
+  };
+
+  useEffect(() => {
+    const listeners = focusListeners.current[current.name] || [];
+    listeners.forEach(cb => cb());
+  }, [current.name]);
+
+  return (
+    <NavigationContext.Provider
+      value={{ navigate, goBack, replace, addFocusListener, current }}
+    >
+      <View style={{ flex: 1 }}>
+        {stack.map((route, index) => {
+          const ScreenComponent: React.ComponentType<any> = screens[route.name];
+          const isFocused = index === stack.length - 1;
+
+          return (
+            <View
+              key={index}
+              style={{
+                flex: 1,
+                display: isFocused ? 'flex' : 'none',
+              }}
+            >
+              <ScreenComponent
+                navigation={{ navigate, replace, goBack }}
+                route={{ params: route.params }}
+              />
+            </View>
+          );
+        })}
+
+        {children}
+      </View>
+    </NavigationContext.Provider>
+  );
+};
+
+export const useNavigation = () => {
+  const ctx = useContext(NavigationContext);
+  if (!ctx) {
+    throw new Error('useNavigation must be used inside NavigationProvider');
+  }
+  return ctx;
+};
+
+export const useFocusEffect = (callback: () => void | (() => void)) => {
+  const { current, addFocusListener } = useNavigation();
+  const cleanupRef = useRef<any>(null);
+
+  useEffect(() => {
+    cleanupRef.current?.();
+
+    const unsubscribe = addFocusListener(current.name, () => {
+      cleanupRef.current?.();
+      cleanupRef.current = callback();
+    });
+
+    return () => {
+      cleanupRef.current?.();
+      unsubscribe?.();
+    };
+  }, [current.name]);
+};
+
+export const useIsFocused = (): boolean => {
+  const { current, addFocusListener } = useNavigation();
+  const [isFocused, setIsFocused] = useState(true);
+
+  useEffect(() => {
+    setIsFocused(true);
+
+    const unsubscribe = addFocusListener(current.name, () => {
+      setIsFocused(true);
+    });
+
+    return () => {
+      setIsFocused(false);
+      unsubscribe();
+    };
+  }, [current.name]);
+
+  return isFocused;
+};
+
+export const ReactNativeNavigation: React.FC<{
+  screens: NavigationScreens;
+}> = ({ screens }) => {
+  const Stack = createNativeStackNavigator();
+
+  return (
+    <NavigationContainer>
+      <Stack.Navigator
+        initialRouteName={Object.keys(screens)[0]}
+        screenOptions={{
+          animation: 'none',
+          headerShown: false,
+        }}
+      >
+        {Object.entries(screens).map(([name, component]) => (
+          <Stack.Screen key={name} name={name} component={component} />
+        ))}
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+};
+
+export default function Navigation({ screens }: { screens: NavigationScreens }) {
+  return Platform.OS === 'web' ? (
+    <NavigationProvider screens={screens} />
+  ) : (
+    <ReactNativeNavigation screens={screens} />
+  );
+}

package/src/Navigation/useFocusEffect.ts

@@ -1,2 +1,2 @@
 
-export { useFocusEffect } from '../../../../../src/Navigation/PageNavigation';
+export { useFocusEffect } from './PageNavigation';

package/src/Navigation/useFocusEffect.web.ts

@@ -1 +1 @@
-export { useFocusEffect } from '../../../../../src/Navigation/PageNavigation';
+export { useFocusEffect } from './PageNavigation';

package/src/Navigation/useIsFocused.ts

@@ -1 +1 @@
-export { useIsFocused } from '../../../../../src/Navigation/PageNavigation';
+export { useIsFocused } from './PageNavigation';

package/src/Navigation/useIsFocused.web.ts

@@ -1 +1 @@
-export { useIsFocused } from '../../../../../src/Navigation/PageNavigation';
+export { useIsFocused } from './PageNavigation';

package/src/Navigation/useNavigation.ts

@@ -1,2 +1,2 @@
 
-export { useNavigation } from '../../../../../src/Navigation/PageNavigation';
+export { useNavigation } from './PageNavigation';

package/src/Navigation/useNavigation.web.ts

@@ -1 +1 @@
-export { useNavigation } from '../../../../../src/Navigation/PageNavigation';
+export { useNavigation } from './PageNavigation';

package/src/Screens/Login.tsx

@@ -16,7 +16,7 @@ import {
 import RNFetchBlob from 'react-native-blob-util';
 import { Global } from '../../../../../src/Common/Global';
 import RNExitApp from 'react-native-exit-app';
-import HView from '../../../../../src/Hoc/HView';
+import HView from '@jescon-technologies/react-native-ui-kit/src/Hoc/HView';
 import { APIURL } from '../../../../../src/Common/apiConstants';
 import { HIcons, useNavigation, normalize, isNU, Loader } from '@jescon-technologies/react-native-ui-kit';