Bugfix: Mobile menu open-close problems fixed.

src/components/embeddedMenu/components/menuButton/index.tsx

@@ -26,6 +26,10 @@ import {
 import RowCard from "../../../rowCard";
 
 const isPageActive = ((buttonItem: EmbeddedMenuButtonType, navigation: NCoreUIKit.Navigation) => {
+    if (!navigation || typeof navigation.getState !== "function") {
+        return false;
+    }
+
     const state = navigation.getState();
 
     if (!state || !state.routes) return false;
@@ -71,6 +75,11 @@ const EmbeddedMenuButton: FC<IEmbeddedMenuButton> = ({
         setNavStateTracker
     ] = useState(Date.now());
 
+    const [
+        isShowSubs,
+        setIsShowSubs
+    ] = useState(buttonItem.isCollapse);
+
     const animatedCollabs = useRef(new Animated.Value(0)).current;
 
     useEffect(() => {
@@ -90,30 +99,42 @@ const EmbeddedMenuButton: FC<IEmbeddedMenuButton> = ({
         };
     }, [navigation]);
 
-    if(buttonItem.isCollapsible) {
-        useLayoutEffect(() => {
-            if(measure === null) return;
-
-            if(buttonItem.isCollapse) {
-                Animated.timing(animatedCollabs, {
-                    useNativeDriver: Platform.OS !== "web",
-                    toValue: Number(measure),
-                    easing: Easing.linear,
-                    duration: 150
-                }).start();
-            } else {
-                Animated.timing(animatedCollabs, {
-                    useNativeDriver: Platform.OS !== "web",
-                    easing: Easing.linear,
-                    duration: 150,
-                    toValue: 0
-                }).start();
-            }
-        }, [
-            buttonItem.isCollapse,
-            measure
-        ]);
-    }
+    useLayoutEffect(() => {
+        if(isShowSubs) {
+            Animated.timing(animatedCollabs, {
+                toValue: Platform.OS === "web" ? Number(measure) : 1,
+                useNativeDriver: Platform.OS !== "web",
+                easing: Easing.linear,
+                duration: 150
+            }).start();
+        }
+    }, [isShowSubs]);
+
+    useLayoutEffect(() => {
+        if(!buttonItem.isCollapsible) return;
+
+        if(Platform.OS === "web" && measure === null) return;
+
+        if(buttonItem.isCollapse) {
+            setIsShowSubs(true);
+        } else {
+            Animated.timing(animatedCollabs, {
+                useNativeDriver: Platform.OS !== "web",
+                easing: Easing.linear,
+                duration: 150,
+                toValue: 0
+            }).start(({
+                finished
+            }) => {
+                if(finished) {
+                    setIsShowSubs(false);
+                }
+            });
+        }
+    }, [
+        buttonItem.isCollapse,
+        measure
+    ]);
 
     const isPActive = isPageActive(buttonItem, navigation);
 
@@ -193,9 +214,16 @@ const EmbeddedMenuButton: FC<IEmbeddedMenuButton> = ({
                         if(height !== 0 && measure === null) setMeasure(height);
                     } : undefined}
                     style={[
-                        {
+                        Platform.OS === "web" ? {
                             height: measure === null ? "auto" : animatedCollabs,
                             overflow: "hidden"
+                        } : {
+                            display: isShowSubs ? "flex" : "none",
+                            transform: [{
+                                scaleY: animatedCollabs
+                            }],
+                            transformOrigin: "top",
+                            overflow: "hidden"
                         }
                     ]}
                 >

src/components/embeddedMenu/index.tsx

@@ -38,9 +38,9 @@ import {
 import {
     SafeAreaView
 } from "react-native-safe-area-context";
-import Button from "../button";
 import Seperator from "../seperator";
 import SiteLogo from "../siteLogo";
+import Button from "../button";
 
 const Menu: RefForwardingComponent<IEmbeddedMenuRef, IEmbeddedMenuProps> = ({
     isWorkWithSafeAreaView = true,
@@ -103,13 +103,17 @@ const Menu: RefForwardingComponent<IEmbeddedMenuRef, IEmbeddedMenuProps> = ({
 
     useLayoutEffect(() => {
         if(isActive) {
-            if(isWorkWithAnimation) {
-                openAnimation();
-            } else {
-                if(onOpen) onOpen({
+            if(onOpen) onOpen({
+                id
+            });
+
+            if(Platform.OS !== "web") {
+                if(onOpened) onOpened({
                     id
                 });
-
+            } else if(isWorkWithAnimation) {
+                openAnimation();
+            } else {
                 animatedX.setValue(maxWidth);
 
                 if(onOpened) onOpened({
@@ -117,13 +121,13 @@ const Menu: RefForwardingComponent<IEmbeddedMenuRef, IEmbeddedMenuProps> = ({
                 });
             }
         } else {
-            if(isWorkWithAnimation) {
+            if(onClose) onClose({
+                id
+            });
+
+            if(isWorkWithAnimation && Platform.OS === "web") {
                 closeAnimation();
             } else {
-                if(onClose) onClose({
-                    id
-                });
-
                 animatedX.setValue(minWidth);
 
                 if(onClosed) onClosed({
@@ -144,10 +148,6 @@ const Menu: RefForwardingComponent<IEmbeddedMenuRef, IEmbeddedMenuProps> = ({
     };
 
     const openAnimation = () => {
-        if(onOpen) onOpen({
-            id
-        });
-
         Animated.timing(animatedX, {
             useNativeDriver: Platform.OS !== "web",
             easing: Easing.linear,
@@ -165,10 +165,6 @@ const Menu: RefForwardingComponent<IEmbeddedMenuRef, IEmbeddedMenuProps> = ({
     };
 
     const closeAnimation = () => {
-        if(onClose) onClose({
-            id
-        });
-
         Animated.timing(animatedX, {
             useNativeDriver: Platform.OS !== "web",
             easing: Easing.linear,
@@ -401,8 +397,10 @@ const Menu: RefForwardingComponent<IEmbeddedMenuRef, IEmbeddedMenuProps> = ({
                 style,
                 stylesheet.container,
                 containerDynamicStyle,
-                {
+                Platform.OS === "web" ? {
                     width: animatedX
+                } : {
+                    width: isActive ? maxWidth : minWidth
                 }
             ]}
         >

src/components/menu/components/menuButton/index.tsx

@@ -26,13 +26,23 @@ import {
 import RowCard from "../../../rowCard";
 
 const isPageActive = ((buttonItem: MenuButtonType, navigation: NCoreUIKit.Navigation) => {
+    if (!navigation || typeof navigation.getState !== "function") {
+        return false;
+    }
+
     const state = navigation.getState();
-    const currentRoute = state?.routes?.[state.index];
+
+    if (!state || !state.routes) return false;
+
+    const activeIndex = state.index ?? 0;
+    const currentRoute = state?.routes?.[activeIndex];
 
     if(!currentRoute) return false;
 
     if(currentRoute.state) {
-        const nestedRoute = currentRoute.state.routes?.[currentRoute.state.index];
+        const nestedIndex = currentRoute.state.index ?? 0;
+        const nestedRoute = currentRoute.state.routes?.[nestedIndex];
+
         return nestedRoute?.name === (buttonItem.redirectSub ?? buttonItem.redirectMain);
     } else if(currentRoute.name) {
         return currentRoute.name === (buttonItem.redirectSub ?? buttonItem.redirectMain);
@@ -60,10 +70,15 @@ const MenuButton: FC<IMenuButton> = ({
     ] = useState<null | number>(null);
 
     const [
-        ,
+        navStateTracker,
         setNavStateTracker
     ] = useState(Date.now());
 
+    const [
+        isShowSubs,
+        setIsShowSubs
+    ] = useState(buttonItem.isCollapse);
+
     const animatedCollabs = useRef(new Animated.Value(0)).current;
 
     useEffect(() => {
@@ -83,35 +98,47 @@ const MenuButton: FC<IMenuButton> = ({
         };
     }, [navigation]);
 
-    if(buttonItem.isCollapsible) {
-        useLayoutEffect(() => {
-            if(measure === null) return;
-
-            if(buttonItem.isCollapse) {
-                Animated.timing(animatedCollabs, {
-                    useNativeDriver: Platform.OS !== "web",
-                    toValue: Number(measure),
-                    easing: Easing.linear,
-                    duration: 150
-                }).start();
-            } else {
-                Animated.timing(animatedCollabs, {
-                    useNativeDriver: Platform.OS !== "web",
-                    easing: Easing.linear,
-                    duration: 150,
-                    toValue: 0
-                }).start();
-            }
-        }, [
-            buttonItem.isCollapse,
-            measure
-        ]);
-    }
+    useLayoutEffect(() => {
+        if(isShowSubs) {
+            Animated.timing(animatedCollabs, {
+                toValue: Platform.OS === "web" ? Number(measure) : 1,
+                useNativeDriver: Platform.OS !== "web",
+                easing: Easing.linear,
+                duration: 150
+            }).start();
+        }
+    }, [isShowSubs]);
+
+    useLayoutEffect(() => {
+        if(!buttonItem.isCollapsible) return;
+
+        if(Platform.OS === "web" && measure === null) return;
+
+        if(buttonItem.isCollapse) {
+            setIsShowSubs(true);
+        } else {
+            Animated.timing(animatedCollabs, {
+                useNativeDriver: Platform.OS !== "web",
+                easing: Easing.linear,
+                duration: 150,
+                toValue: 0
+            }).start(({
+                finished
+            }) => {
+                if(finished) {
+                    setIsShowSubs(false);
+                }
+            });
+        }
+    }, [
+        buttonItem.isCollapse,
+        measure
+    ]);
 
     const isPActive = isPageActive(buttonItem, navigation);
 
     return <View
-        key={`menu-button-${id}-${buttonIndex}`}
+        key={`menu-button-${id}-${buttonIndex}-${navStateTracker.toString()}`}
     >
         <RowCard
             {...buttonItem.props}
@@ -178,9 +205,16 @@ const MenuButton: FC<IMenuButton> = ({
                         if(height !== 0 && measure === null) setMeasure(height);
                     } : undefined}
                     style={[
-                        {
+                        Platform.OS === "web" ? {
                             height: measure === null ? "auto" : animatedCollabs,
                             overflow: "hidden"
+                        } : {
+                            display: isShowSubs ? "flex" : "none",
+                            transform: [{
+                                scaleY: animatedCollabs
+                            }],
+                            transformOrigin: "top",
+                            overflow: "hidden"
                         }
                     ]}
                 >

src/components/menu/index.tsx

@@ -120,13 +120,13 @@ const Menu: RefForwardingComponent<IMenuRef, IMenuProps> = ({
 
     useLayoutEffect(() => {
         if(isActive && isOpacityVisible) {
+            if(onOpen) onOpen({
+                id
+            });
+
             if(isWorkWithAnimation) {
                 openAnimation();
             } else {
-                if(onOpen) onOpen({
-                    id
-                });
-
                 animatedX.setValue(0);
 
                 if(onOpened) onOpened({
@@ -134,14 +134,15 @@ const Menu: RefForwardingComponent<IMenuRef, IMenuProps> = ({
                 });
             }
         } else {
+            if(onClose) onClose({
+                id
+            });
+
             if(!isWorkWithModal) {
+
                 if(isWorkWithAnimation) {
                     closeAnimation();
                 } else {
-                    if(onClose) onClose({
-                        id
-                    });
-
                     animatedX.setValue(measures! * -1);
 
                     if(onClosed) onClosed({
@@ -160,6 +161,10 @@ const Menu: RefForwardingComponent<IMenuRef, IMenuProps> = ({
     };
 
     const close = () => {
+        if(onClose) onClose({
+            id
+        });
+
         if(isWorkWithModal) {
             if(isWorkWithAnimation) {
                 closeAnimation();
@@ -176,10 +181,6 @@ const Menu: RefForwardingComponent<IMenuRef, IMenuProps> = ({
     };
 
     const openAnimation = () => {
-        if(onOpen) onOpen({
-            id
-        });
-
         Animated.timing(animatedX, {
             useNativeDriver: Platform.OS !== "web",
             easing: Easing.linear,
@@ -197,10 +198,6 @@ const Menu: RefForwardingComponent<IMenuRef, IMenuProps> = ({
     };
 
     const closeAnimation = () => {
-        if(onClose) onClose({
-            id
-        });
-
         Animated.timing(animatedX, {
             useNativeDriver: Platform.OS !== "web",
             toValue: measures! * -1,