@admin-layout/gluestack-ui-mobile 6.5.1-alpha.0 → 6.5.1-alpha.1

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.5.1-alpha.1](https://github.com/CDEBase/admin-layout/compare/v6.5.1-alpha.0...v6.5.1-alpha.1) (2024-05-10)
+
+**Note:** Version bump only for package @admin-layout/gluestack-ui-mobile
+
 ## [6.5.1-alpha.0](https://github.com/cdmbase/admin-layout/compare/v3.0.0-alpha.50...v6.5.1-alpha.0) (2024-04-27)
 
 **Note:** Version bump only for package @admin-layout/gluestack-ui-mobile

package/lib/components/with-interactions-managed.d.ts

@@ -1,2 +1,2 @@
 import React, { ComponentType } from 'react';
-export declare function withInteractionsManaged<Props>(Component: ComponentType<Props>, Placeholder?: ComponentType | null): (props: Props) => React.JSX.Element;
+export declare function withInteractionsManaged<Props>(Component: ComponentType<Props>, Placeholder?: ComponentType | null, interationTime?: number): (props: Props) => React.JSX.Element;

package/lib/components/with-interactions-managed.js

@@ -1,18 +1,79 @@
 import React from 'react';
-import { Transition, Transitioning } from 'react-native-reanimated';
+// import { Transition, Transitioning } from 'react-native-reanimated';
+import Animated from 'react-native-reanimated';
 import { useAfterInteractions } from '../hooks/use-after-interactions';
-import { Box, Spinner } from '@gluestack-ui/themed';
+import { Spinner, Center } from '@gluestack-ui/themed';
 import hoistNonReactStatics from 'hoist-non-react-statics';
-export function withInteractionsManaged(Component, Placeholder = null) {
+export function withInteractionsManaged(Component, Placeholder = null, interationTime) {
     const Wrapped = (props) => {
-        const { transitionRef, interactionsComplete } = useAfterInteractions();
-        const LoadingComponent = () => React.createElement(Box, { flex: 1 }, React.createElement(Spinner, { color: 'blue.500' }));
+        const { interactionsComplete, opacity, setInteractionsTimeOut } = useAfterInteractions();
+        React.useEffect(() => {
+            if (interationTime)
+                setInteractionsTimeOut(interationTime);
+        }, [interationTime]);
+        const LoadingComponent = () => (
+        // <SafeAreaView flex={1}>
+        React.createElement(Center, { flex: 1, justifyContent: 'center', alignItems: 'center' }, React.createElement(Spinner, { color: '$blue500' }))
+        // </SafeAreaView>
+        );
         console.log('interactionsComplete', interactionsComplete);
-        return (React.createElement(Transitioning.View, { transition: React.createElement(Transition.Together, null,
-                React.createElement(Transition.Change, { interpolation: "easeInOut" }),
-                React.createElement(Transition.In, { type: "fade" })), style: { flex: 1 }, ref: transitionRef }, interactionsComplete ? React.createElement(Component, Object.assign({}, props)) : Placeholder ? React.createElement(Placeholder, null) : React.createElement(LoadingComponent, null)));
+        return (React.createElement(React.Fragment, null, interactionsComplete ? (React.createElement(Component, Object.assign({}, props))) : (React.createElement(Animated.View, { style: {
+                flex: 1,
+                opacity: opacity.value,
+                transform: [{ scale: opacity.value }],
+            } }, Placeholder ? React.createElement(Placeholder, null) : React.createElement(LoadingComponent, null)))));
     };
     hoistNonReactStatics(Wrapped, Component);
     return Wrapped;
 }
+// export function withInteractionsManaged<Props>(
+//     Component: ComponentType<Props>,
+//     Placeholder: ComponentType | null = null,
+// ) {
+//     const Wrapped = (props: Props) => {
+//         const { transitionRef, interactionsComplete,opacity } = useAfterInteractions();
+//         const LoadingComponent = () => <SafeAreaView><Box flex={1}>{<Spinner color={'blue.500'} />}</Box></SafeAreaView>;
+//         console.log('interactionsComplete', interactionsComplete);
+//         return (
+//             <Animated.View
+//                 ref={transitionRef}
+//                 style={{
+//                     flex: 1,
+//                     opacity: opacity.value,
+//                     transform: [{ scale: opacity.value }],
+//                   }}
+//             >
+//                 {interactionsComplete ? <Component {...props} /> : Placeholder ? <Placeholder /> : <LoadingComponent />}
+//             </Animated.View>
+//         );
+//     };
+//     hoistNonReactStatics(Wrapped, Component);
+//     return Wrapped;
+// }
+// export function withInteractionsManaged<Props>(
+//     Component: ComponentType<Props>,
+//     Placeholder: ComponentType | null = null,
+// ) {
+//     const Wrapped = (props: Props) => {
+//         const { transitionRef, interactionsComplete } = useAfterInteractions();
+//         const LoadingComponent = () => <Box flex={1}>{<Spinner color={'blue.500'} />}</Box>;
+//         console.log('interactionsComplete', interactionsComplete);
+//         return (
+//             <Transitioning.View
+//                 transition={
+//                     <Transition.Together>
+//                         <Transition.Change interpolation="easeInOut" />
+//                         <Transition.In type="fade" />
+//                     </Transition.Together>
+//                 }
+//                 style={{ flex: 1 }}
+//                 ref={transitionRef}
+//             >
+//                 {interactionsComplete ? <Component {...props} /> : Placeholder ? <Placeholder /> : <LoadingComponent />}
+//             </Transitioning.View>
+//         );
+//     };
+//     hoistNonReactStatics(Wrapped, Component);
+//     return Wrapped;
+// }
 //# sourceMappingURL=with-interactions-managed.js.map

package/lib/components/with-interactions-managed.js.map

@@ -1 +1 @@
-{"version":3,"file":"with-interactions-managed.js","sourceRoot":"","sources":["../../src/components/with-interactions-managed.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,GAAG,EAAE,OAAO,EAAQ,MAAM,sBAAsB,CAAC;AAC1D,OAAO,oBAAoB,MAAM,yBAAyB,CAAC;AAE3D,MAAM,UAAU,uBAAuB,CACnC,SAA+B,EAC/B,cAAoC,IAAI;IAExC,MAAM,OAAO,GAAG,CAAC,KAAY,EAAE,EAAE;QAC7B,MAAM,EAAE,aAAa,EAAE,oBAAoB,EAAE,GAAG,oBAAoB,EAAE,CAAC;QACvE,MAAM,gBAAgB,GAAG,GAAG,EAAE,CAAC,oBAAC,GAAG,IAAC,IAAI,EAAE,CAAC,IAAG,oBAAC,OAAO,IAAC,KAAK,EAAE,UAAU,GAAI,CAAO,CAAC;QACpF,OAAO,CAAC,GAAG,CAAC,sBAAsB,EAAE,oBAAoB,CAAC,CAAC;QAC1D,OAAO,CACH,oBAAC,aAAa,CAAC,IAAI,IACf,UAAU,EACN,oBAAC,UAAU,CAAC,QAAQ;gBAChB,oBAAC,UAAU,CAAC,MAAM,IAAC,aAAa,EAAC,WAAW,GAAG;gBAC/C,oBAAC,UAAU,CAAC,EAAE,IAAC,IAAI,EAAC,MAAM,GAAG,CACX,EAE1B,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EAClB,GAAG,EAAE,aAAa,IAEjB,oBAAoB,CAAC,CAAC,CAAC,oBAAC,SAAS,oBAAK,KAAK,EAAI,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,oBAAC,WAAW,OAAG,CAAC,CAAC,CAAC,oBAAC,gBAAgB,OAAG,CACtF,CACxB,CAAC;IACN,CAAC,CAAC;IAEF,oBAAoB,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;IACzC,OAAO,OAAO,CAAC;AACnB,CAAC"}
+{"version":3,"file":"with-interactions-managed.js","sourceRoot":"","sources":["../../src/components/with-interactions-managed.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAC7C,uEAAuE;AACvE,OAAO,QAAwC,MAAM,yBAAyB,CAAC;AAC/E,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAO,OAAO,EAAgB,MAAM,EAAC,MAAM,sBAAsB,CAAC;AACzE,OAAO,oBAAoB,MAAM,yBAAyB,CAAC;AAE3D,MAAM,UAAU,uBAAuB,CACnC,SAA+B,EAC/B,cAAoC,IAAI,EACxC,cAAsB;IAEtB,MAAM,OAAO,GAAG,CAAC,KAAY,EAAE,EAAE;QAC7B,MAAM,EAAC,oBAAoB,EAAE,OAAO,EAAC,sBAAsB,EAAE,GAAG,oBAAoB,EAAE,CAAC;QAEvF,KAAK,CAAC,SAAS,CAAC,GAAE,EAAE;YAClB,IAAG,cAAc;gBAAE,sBAAsB,CAAC,cAAc,CAAC,CAAA;QAC3D,CAAC,EAAC,CAAC,cAAc,CAAC,CAAC,CAAA;QAEnB,MAAM,gBAAgB,GAAG,GAAG,EAAE,CAAC;QAC3B,0BAA0B;QACtB,oBAAC,MAAM,IAAC,IAAI,EAAE,CAAC,EAAE,cAAc,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,IAAG,oBAAC,OAAO,IAAC,KAAK,EAAE,UAAU,GAAI,CAAU;QAC9G,kBAAkB;SACrB,CAAC;QACF,OAAO,CAAC,GAAG,CAAC,sBAAsB,EAAE,oBAAoB,CAAC,CAAC;QAC1D,OAAO,CACH,0CACK,oBAAoB,CAAC,CAAC,CAAC,CACpB,oBAAC,SAAS,oBAAK,KAAK,EAAI,CAC3B,CAAC,CAAC,CAAC,CACA,oBAAC,QAAQ,CAAC,IAAI,IACV,KAAK,EAAE;gBACH,IAAI,EAAE,CAAC;gBACP,OAAO,EAAE,OAAO,CAAC,KAAK;gBACtB,SAAS,EAAE,CAAC,EAAE,KAAK,EAAE,OAAO,CAAC,KAAK,EAAE,CAAC;aACxC,IAEA,WAAW,CAAC,CAAC,CAAC,oBAAC,WAAW,OAAG,CAAC,CAAC,CAAC,oBAAC,gBAAgB,OAAG,CACzC,CACnB,CACF,CACN,CAAC;IACN,CAAC,CAAC;IAEF,oBAAoB,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;IACzC,OAAO,OAAO,CAAC;AACnB,CAAC;AAED,kDAAkD;AAClD,uCAAuC;AACvC,gDAAgD;AAChD,MAAM;AACN,0CAA0C;AAC1C,0FAA0F;AAC1F,4HAA4H;AAC5H,qEAAqE;AACrE,mBAAmB;AACnB,6BAA6B;AAC7B,sCAAsC;AACtC,2BAA2B;AAC3B,+BAA+B;AAC/B,8CAA8C;AAC9C,6DAA6D;AAC7D,uBAAuB;AACvB,gBAAgB;AAChB,2HAA2H;AAC3H,+BAA+B;AAC/B,aAAa;AACb,SAAS;AAET,gDAAgD;AAChD,sBAAsB;AACtB,IAAI;AAEJ,kDAAkD;AAClD,uCAAuC;AACvC,gDAAgD;AAChD,MAAM;AACN,0CAA0C;AAC1C,kFAAkF;AAClF,+FAA+F;AAC/F,qEAAqE;AACrE,mBAAmB;AACnB,kCAAkC;AAClC,+BAA+B;AAC/B,4CAA4C;AAC5C,0EAA0E;AAC1E,wDAAwD;AACxD,6CAA6C;AAC7C,oBAAoB;AACpB,sCAAsC;AACtC,sCAAsC;AACtC,gBAAgB;AAChB,2HAA2H;AAC3H,oCAAoC;AACpC,aAAa;AACb,SAAS;AAET,gDAAgD;AAChD,sBAAsB;AACtB,IAAI"}

package/lib/hooks/use-after-interactions.d.ts

@@ -1,6 +1,7 @@
+/// <reference types="react-native-reanimated" />
 import React from 'react';
-import { TransitioningView } from 'react-native-reanimated';
 export declare const useAfterInteractions: () => {
     interactionsComplete: boolean;
-    transitionRef: React.MutableRefObject<TransitioningView>;
+    opacity: import("react-native-reanimated").SharedValue<number>;
+    setInteractionsTimeOut: React.Dispatch<any>;
 };

package/lib/hooks/use-after-interactions.js

@@ -1,29 +1,51 @@
-import React, { useState, useRef } from 'react';
+import React, { useState } from 'react';
 import { InteractionManager } from 'react-native';
+// import { TransitioningView } from 'react-native-reanimated';
+import { useSharedValue, withTiming } from 'react-native-reanimated';
 import { useFocusEffect } from '@react-navigation/native';
 export const useAfterInteractions = () => {
     const [interactionsComplete, setInteractionsComplete] = useState(false);
-    const subscriptionRef = useRef(null);
-    const transitionRef = useRef(null);
+    const [interactionTimeout, setInteractionsTimeOut] = useState(200);
+    const opacity = useSharedValue(0);
+    // const subscriptionRef = useRef(null);
+    // const transitionRef = useRef<any>(null);
     useFocusEffect(React.useCallback(() => {
         // Do something when the screen is focused
-        subscriptionRef.current = InteractionManager.runAfterInteractions(() => {
-            var _a;
-            (_a = transitionRef.current) === null || _a === void 0 ? void 0 : _a.animateNextTransition();
-            setInteractionsComplete(true);
-            subscriptionRef.current = null;
+        const interactionPromise = InteractionManager.runAfterInteractions(() => {
+            // Simulate some asynchronous task
+            setTimeout(() => {
+                // Start the animation
+                opacity.value = withTiming(1, { duration: 500 });
+                setInteractionsComplete(true);
+            }, interactionTimeout);
         });
         return () => {
-            var _a;
             // Do something when the screen is unfocused
             // Useful for cleanup functions
+            interactionPromise === null || interactionPromise === void 0 ? void 0 : interactionPromise.cancel();
             setInteractionsComplete(false);
-            (_a = subscriptionRef.current) === null || _a === void 0 ? void 0 : _a.cancel();
         };
-    }, []));
+    }, [interactionTimeout]));
+    // useFocusEffect(
+    //     React.useCallback(() => {
+    //         // Do something when the screen is focused
+    //         subscriptionRef.current = InteractionManager.runAfterInteractions(() => {
+    //             transitionRef.current?.animateNextTransition();
+    //             setInteractionsComplete(true);
+    //             subscriptionRef.current = null;
+    //         });
+    //         return () => {
+    //             // Do something when the screen is unfocused
+    //             // Useful for cleanup functions
+    //             setInteractionsComplete(false);
+    //             subscriptionRef.current?.cancel();
+    //         };
+    //     }, []),
+    // );
     return {
         interactionsComplete,
-        transitionRef,
+        opacity,
+        setInteractionsTimeOut,
     };
 };
 //# sourceMappingURL=use-after-interactions.js.map

package/lib/hooks/use-after-interactions.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-after-interactions.js","sourceRoot":"","sources":["../../src/hooks/use-after-interactions.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAElD,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAE1D,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,EAAE;IACrC,MAAM,CAAC,oBAAoB,EAAE,uBAAuB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAExE,MAAM,eAAe,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAErC,MAAM,aAAa,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAEtD,cAAc,CACV,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACnB,0CAA0C;QAC1C,eAAe,CAAC,OAAO,GAAG,kBAAkB,CAAC,oBAAoB,CAAC,GAAG,EAAE;;YACnE,MAAA,aAAa,CAAC,OAAO,0CAAE,qBAAqB,EAAE,CAAC;YAC/C,uBAAuB,CAAC,IAAI,CAAC,CAAC;YAC9B,eAAe,CAAC,OAAO,GAAG,IAAI,CAAC;QACnC,CAAC,CAAC,CAAC;QAEH,OAAO,GAAG,EAAE;;YACR,4CAA4C;YAC5C,+BAA+B;YAC/B,uBAAuB,CAAC,KAAK,CAAC,CAAC;YAC/B,MAAA,eAAe,CAAC,OAAO,0CAAE,MAAM,EAAE,CAAC;QACtC,CAAC,CAAC;IACN,CAAC,EAAE,EAAE,CAAC,CACT,CAAC;IAEF,OAAO;QACH,oBAAoB;QACpB,aAAa;KAChB,CAAC;AACN,CAAC,CAAC"}
+{"version":3,"file":"use-after-interactions.js","sourceRoot":"","sources":["../../src/hooks/use-after-interactions.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAU,MAAM,OAAO,CAAC;AAChD,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAClD,+DAA+D;AAC/D,OAAQ,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACtE,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAE1D,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,EAAE;IACrC,MAAM,CAAC,oBAAoB,EAAE,uBAAuB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxE,MAAM,CAAC,kBAAkB,EAAE,sBAAsB,CAAC,GAAG,QAAQ,CAAM,GAAG,CAAC,CAAC;IACxE,MAAM,OAAO,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC;IAClC,wCAAwC;IACxC,2CAA2C;IAE3C,cAAc,CACV,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACnB,0CAA0C;QAC1C,MAAM,kBAAkB,GAAG,kBAAkB,CAAC,oBAAoB,CAAC,GAAG,EAAE;YACpE,kCAAkC;YAClC,UAAU,CAAC,GAAG,EAAE;gBACZ,sBAAsB;gBACtB,OAAO,CAAC,KAAK,GAAG,UAAU,CAAC,CAAC,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,CAAC;gBACjD,uBAAuB,CAAC,IAAI,CAAC,CAAC;YAClC,CAAC,EAAE,kBAAkB,CAAC,CAAC;QAC3B,CAAC,CAAC,CAAC;QAEH,OAAO,GAAG,EAAE;YACR,4CAA4C;YAC5C,+BAA+B;YAC/B,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAE,MAAM,EAAE,CAAC;YAC7B,uBAAuB,CAAC,KAAK,CAAC,CAAC;QACnC,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,kBAAkB,CAAC,CAAC,CAC3B,CAAC;IAEF,kBAAkB;IAClB,gCAAgC;IAChC,qDAAqD;IACrD,oFAAoF;IACpF,8DAA8D;IAC9D,6CAA6C;IAC7C,8CAA8C;IAC9C,cAAc;IAEd,yBAAyB;IACzB,2DAA2D;IAC3D,8CAA8C;IAC9C,8CAA8C;IAC9C,iDAAiD;IACjD,aAAa;IACb,cAAc;IACd,KAAK;IAEL,OAAO;QACH,oBAAoB;QACpB,OAAO;QACP,sBAAsB;KACzB,CAAC;AACN,CAAC,CAAC"}

package/lib/index.d.ts

@@ -7,8 +7,8 @@ import { useLayoutSetting, LayoutSettingProps } from './hooks/useLayoutSetting';
 export * from '@gluestack-ui/themed';
 export * from '@gluestack-ui/config';
 export * from '@gluestack-style/react';
-export * from './containers/layout/Lifecycle';
 export * from './components';
+export * from './containers/layout/Lifecycle';
 export { useLayoutSetting, LayoutSettingProps, routeConfigKeyReplace, LayoutFeature, ProLayout, AppFeatures, AppLayout, useAfterInteractions, useIsReady, };
 declare const _default: Feature;
 export default _default;

package/lib/index.js

@@ -5,17 +5,15 @@ import { settingsReducer } from './redux/settings';
 import { useAfterInteractions } from './hooks/use-after-interactions';
 import useIsReady from './hooks/useIsReady';
 import routeConfigKeyReplace from './utils/routeConfigKeyReplace';
-//changed
 import LayoutFeature, { ProLayout, AppFeatures, AppLayout } from './containers/layout/module';
 import { useLayoutSetting } from './hooks/useLayoutSetting';
-//...........................No change....///
+//...........................glustack-ui library....///
 export * from '@gluestack-ui/themed';
 export * from '@gluestack-ui/config';
 export * from '@gluestack-style/react';
-export * from './containers/layout/Lifecycle';
-//............................No change....///
-//changed
+//............................gluestack-ui....///
 export * from './components';
+export * from './containers/layout/Lifecycle';
 export { useLayoutSetting, routeConfigKeyReplace, LayoutFeature, ProLayout, AppFeatures, AppLayout, useAfterInteractions, useIsReady, };
 export default new Feature({
     reducer: { settings: settingsReducer, applicationErrors },

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,sDAAsD;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACzE,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AACtE,OAAO,UAAU,MAAM,oBAAoB,CAAC;AAC5C,OAAO,qBAAqB,MAAM,+BAA+B,CAAC;AAClE,SAAS;AACT,OAAO,aAAa,EAAE,EAAE,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAC9F,OAAO,EAAE,gBAAgB,EAAsB,MAAM,0BAA0B,CAAC;AAEhF,6CAA6C;AAC7C,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,+BAA+B,CAAC;AAC9C,8CAA8C;AAE9C,SAAS;AACT,cAAc,cAAc,CAAC;AAI7B,OAAO,EACH,gBAAgB,EAEhB,qBAAqB,EACrB,aAAa,EACb,SAAS,EACT,WAAW,EACX,SAAS,EACT,oBAAoB,EACpB,UAAU,GACb,CAAC;AAEF,eAAe,IAAI,OAAO,CAAC;IACvB,OAAO,EAAE,EAAE,QAAQ,EAAE,eAAe,EAAE,iBAAiB,EAAE;IACzD,iBAAiB,EAAE;QACf,YAAY,EAAE,CAAC,cAAc,CAAC;KACjC;CACJ,CAAC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,sDAAsD;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACzE,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AACtE,OAAO,UAAU,MAAM,oBAAoB,CAAC;AAC5C,OAAO,qBAAqB,MAAM,+BAA+B,CAAC;AAClE,OAAO,aAAa,EAAE,EAAE,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAC9F,OAAO,EAAE,gBAAgB,EAAsB,MAAM,0BAA0B,CAAC;AAEhF,uDAAuD;AACvD,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,iDAAiD;AAGjD,cAAc,cAAc,CAAC;AAC7B,cAAc,+BAA+B,CAAC;AAG9C,OAAO,EACH,gBAAgB,EAEhB,qBAAqB,EACrB,aAAa,EACb,SAAS,EACT,WAAW,EACX,SAAS,EACT,oBAAoB,EACpB,UAAU,GACb,CAAC;AAEF,eAAe,IAAI,OAAO,CAAC;IACvB,OAAO,EAAE,EAAE,QAAQ,EAAE,eAAe,EAAE,iBAAiB,EAAE;IACzD,iBAAiB,EAAE;QACf,YAAY,EAAE,CAAC,cAAc,CAAC;KACjC;CACJ,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@admin-layout/gluestack-ui-mobile",
-    "version": "6.5.1-alpha.0",
+    "version": "6.5.1-alpha.1",
     "description": "Glustack-ui for mobile component layout",
     "main": "lib/index.js",
     "scripts": {
@@ -24,10 +24,7 @@
     "license": "ISC",
     "dependencies": {
         "@admin-layout/client": "6.5.1-alpha.0",
-        "@common-stack/remix-router-redux": "^4.0.1-alpha.1",
-        "@gluestack-style/react": "^1.0.53",
-        "@gluestack-ui/config": "^1.1.18",
-        "@gluestack-ui/themed": "^1.1.22",
+        "@common-stack/remix-router-redux": "^4.0.1-alpha.3",
         "hoist-non-react-statics": "^3.3.2",
         "react-native-svg": "^15.1.0",
         "react-native-toast-message": "^2.1.5"
@@ -36,5 +33,5 @@
     "typescript": {
         "definition": "lib/index.d.ts"
     },
-    "gitHead": "c71dd945a16165bda37320de7533b1b3d9d6a0b4"
+    "gitHead": "d5bb921c9018ea34562b88351f0cf782334db26d"
 }

package/src/components/with-interactions-managed.tsx

@@ -1,33 +1,101 @@
 import React, { ComponentType } from 'react';
-import { Transition, Transitioning } from 'react-native-reanimated';
+// import { Transition, Transitioning } from 'react-native-reanimated';
+import Animated, { useSharedValue, withTiming } from 'react-native-reanimated';
 import { useAfterInteractions } from '../hooks/use-after-interactions';
-import { Box, Spinner, Text } from '@gluestack-ui/themed';
+import { Box, Spinner, SafeAreaView ,Center} from '@gluestack-ui/themed';
 import hoistNonReactStatics from 'hoist-non-react-statics';
 
 export function withInteractionsManaged<Props>(
     Component: ComponentType<Props>,
     Placeholder: ComponentType | null = null,
+    interationTime?:number,
 ) {
     const Wrapped = (props: Props) => {
-        const { transitionRef, interactionsComplete } = useAfterInteractions();
-        const LoadingComponent = () => <Box flex={1}>{<Spinner color={'blue.500'} />}</Box>;
+        const {interactionsComplete, opacity,setInteractionsTimeOut } = useAfterInteractions();
+        
+        React.useEffect(()=>{
+          if(interationTime) setInteractionsTimeOut(interationTime)
+        },[interationTime])
+
+        const LoadingComponent = () => (
+            // <SafeAreaView flex={1}>
+                <Center flex={1} justifyContent={'center'} alignItems={'center'}>{<Spinner color={'$blue500'} />}</Center>
+            // </SafeAreaView>
+        );
         console.log('interactionsComplete', interactionsComplete);
         return (
-            <Transitioning.View
-                transition={
-                    <Transition.Together>
-                        <Transition.Change interpolation="easeInOut" />
-                        <Transition.In type="fade" />
-                    </Transition.Together>
-                }
-                style={{ flex: 1 }}
-                ref={transitionRef}
-            >
-                {interactionsComplete ? <Component {...props} /> : Placeholder ? <Placeholder /> : <LoadingComponent />}
-            </Transitioning.View>
+            <>
+                {interactionsComplete ? (
+                    <Component {...props} />
+                ) : (
+                    <Animated.View
+                        style={{
+                            flex: 1,
+                            opacity: opacity.value,
+                            transform: [{ scale: opacity.value }],
+                        }}
+                    >
+                        {Placeholder ? <Placeholder /> : <LoadingComponent />}
+                    </Animated.View>
+                )}
+            </>
         );
     };
 
     hoistNonReactStatics(Wrapped, Component);
     return Wrapped;
 }
+
+// export function withInteractionsManaged<Props>(
+//     Component: ComponentType<Props>,
+//     Placeholder: ComponentType | null = null,
+// ) {
+//     const Wrapped = (props: Props) => {
+//         const { transitionRef, interactionsComplete,opacity } = useAfterInteractions();
+//         const LoadingComponent = () => <SafeAreaView><Box flex={1}>{<Spinner color={'blue.500'} />}</Box></SafeAreaView>;
+//         console.log('interactionsComplete', interactionsComplete);
+//         return (
+//             <Animated.View
+//                 ref={transitionRef}
+//                 style={{
+//                     flex: 1,
+//                     opacity: opacity.value,
+//                     transform: [{ scale: opacity.value }],
+//                   }}
+//             >
+//                 {interactionsComplete ? <Component {...props} /> : Placeholder ? <Placeholder /> : <LoadingComponent />}
+//             </Animated.View>
+//         );
+//     };
+
+//     hoistNonReactStatics(Wrapped, Component);
+//     return Wrapped;
+// }
+
+// export function withInteractionsManaged<Props>(
+//     Component: ComponentType<Props>,
+//     Placeholder: ComponentType | null = null,
+// ) {
+//     const Wrapped = (props: Props) => {
+//         const { transitionRef, interactionsComplete } = useAfterInteractions();
+//         const LoadingComponent = () => <Box flex={1}>{<Spinner color={'blue.500'} />}</Box>;
+//         console.log('interactionsComplete', interactionsComplete);
+//         return (
+//             <Transitioning.View
+//                 transition={
+//                     <Transition.Together>
+//                         <Transition.Change interpolation="easeInOut" />
+//                         <Transition.In type="fade" />
+//                     </Transition.Together>
+//                 }
+//                 style={{ flex: 1 }}
+//                 ref={transitionRef}
+//             >
+//                 {interactionsComplete ? <Component {...props} /> : Placeholder ? <Placeholder /> : <LoadingComponent />}
+//             </Transitioning.View>
+//         );
+//     };
+
+//     hoistNonReactStatics(Wrapped, Component);
+//     return Wrapped;
+// }

package/src/hooks/use-after-interactions.ts

@@ -1,35 +1,58 @@
 import React, { useState, useRef } from 'react';
 import { InteractionManager } from 'react-native';
-import { TransitioningView } from 'react-native-reanimated';
+// import { TransitioningView } from 'react-native-reanimated';
+import  { useSharedValue, withTiming } from 'react-native-reanimated';
 import { useFocusEffect } from '@react-navigation/native';
 
 export const useAfterInteractions = () => {
     const [interactionsComplete, setInteractionsComplete] = useState(false);
-
-    const subscriptionRef = useRef(null);
-
-    const transitionRef = useRef<TransitioningView>(null);
+    const [interactionTimeout, setInteractionsTimeOut] = useState<any>(200);
+    const opacity = useSharedValue(0);
+    // const subscriptionRef = useRef(null);
+    // const transitionRef = useRef<any>(null);
 
     useFocusEffect(
         React.useCallback(() => {
             // Do something when the screen is focused
-            subscriptionRef.current = InteractionManager.runAfterInteractions(() => {
-                transitionRef.current?.animateNextTransition();
-                setInteractionsComplete(true);
-                subscriptionRef.current = null;
+            const interactionPromise = InteractionManager.runAfterInteractions(() => {
+                // Simulate some asynchronous task
+                setTimeout(() => {
+                    // Start the animation
+                    opacity.value = withTiming(1, { duration: 500 });
+                    setInteractionsComplete(true);
+                }, interactionTimeout);
             });
 
             return () => {
                 // Do something when the screen is unfocused
                 // Useful for cleanup functions
+                interactionPromise?.cancel();
                 setInteractionsComplete(false);
-                subscriptionRef.current?.cancel();
             };
-        }, []),
+        }, [interactionTimeout]),
     );
 
+    // useFocusEffect(
+    //     React.useCallback(() => {
+    //         // Do something when the screen is focused
+    //         subscriptionRef.current = InteractionManager.runAfterInteractions(() => {
+    //             transitionRef.current?.animateNextTransition();
+    //             setInteractionsComplete(true);
+    //             subscriptionRef.current = null;
+    //         });
+
+    //         return () => {
+    //             // Do something when the screen is unfocused
+    //             // Useful for cleanup functions
+    //             setInteractionsComplete(false);
+    //             subscriptionRef.current?.cancel();
+    //         };
+    //     }, []),
+    // );
+
     return {
         interactionsComplete,
-        transitionRef,
+        opacity,
+        setInteractionsTimeOut,
     };
 };

package/src/index.ts

@@ -5,20 +5,18 @@ import { settingsReducer } from './redux/settings';
 import { useAfterInteractions } from './hooks/use-after-interactions';
 import useIsReady from './hooks/useIsReady';
 import routeConfigKeyReplace from './utils/routeConfigKeyReplace';
-//changed
 import LayoutFeature, { ProLayout, AppFeatures, AppLayout } from './containers/layout/module';
 import { useLayoutSetting, LayoutSettingProps } from './hooks/useLayoutSetting';
 
-//...........................No change....///
+//...........................glustack-ui library....///
 export * from '@gluestack-ui/themed';
 export * from '@gluestack-ui/config';
 export * from '@gluestack-style/react';
-export * from './containers/layout/Lifecycle';
-//............................No change....///
+//............................gluestack-ui....///
 
-//changed
-export * from './components';
 
+export * from './components';
+export * from './containers/layout/Lifecycle';
 
 
 export {