@applicaster/zapp-react-native-ui-components 12.0.0-alpha.9531194637 → 12.0.0-alpha.9834532023

package/Components/River/ComponentsMap/ComponentsMap.tsx

@@ -200,10 +200,19 @@ function ComponentsMapComponent(props: Props) {
         contentOffset: { y },
       } = nativeEvent;
 
-      useScreenScrollStore.setState({
-        scrollingVelocity: isScrollingDone ? 0 : 1,
-        scrollPosition: y,
-      });
+      const oldState = useScreenScrollStore.getState();
+      const scrollingVelocity = isScrollingDone ? 0 : 1;
+      const scrollPosition = y;
+
+      if (
+        scrollingVelocity !== oldState.scrollingVelocity ||
+        scrollPosition !== oldState.scrollPosition
+      ) {
+        useScreenScrollStore.setState({
+          scrollingVelocity,
+          scrollPosition,
+        });
+      }
     },
     []
   );
@@ -215,6 +224,15 @@ function ComponentsMapComponent(props: Props) {
     [onScrollFlatList]
   );
 
+  const onScrollEndDrag = React.useCallback(
+    ({ nativeEvent }) => {
+      if (nativeEvent.velocity.y === 0) {
+        onScrollFlatList({ nativeEvent }, true);
+      }
+    },
+    [onScrollFlatList]
+  );
+
   if (shouldShowLoadingError) {
     return <RiverError />;
   }
@@ -250,8 +268,9 @@ function ComponentsMapComponent(props: Props) {
             ListFooterComponent={renderFooter}
             refreshControl={refreshControl}
             onScroll={onScrollFlatList}
+            onScrollEndDrag={Platform.OS === "ios" && onScrollEndDrag}
             onMomentumScrollEnd={onMomentumScrollEnd}
-            scrollEventThrottle={16}
+            scrollEventThrottle={50}
             {...scrollViewExtraProps}
           />
         </ViewportTracker>

package/Components/Screen/index.tsx

@@ -6,7 +6,10 @@ import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 
 import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 import { getComponentModule } from "@applicaster/zapp-react-native-utils/pluginUtils";
-import { getNavigationPropsV2 } from "@applicaster/zapp-react-native-utils/navigationUtils";
+import {
+  getNavigationPropsV2,
+  resolveNavigationPlugin,
+} from "@applicaster/zapp-react-native-utils/navigationUtils";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import {
   useDimensions,
@@ -52,11 +55,11 @@ function isValidColor(string) {
 }
 
 type Props = {
-  setToggleMenu: () => void;
-  setCloseMenu: () => void;
+  pathname: unknown;
+  screenData: unknown;
 };
 
-export function Screen({ setToggleMenu, setCloseMenu }: Props) {
+export function Screen(_props: Props) {
   const theme = useTheme<BaseThemePropertiesMobile>();
   const navigation = useNavigation();
   const { plugins } = usePickFromState(["plugins"]);
@@ -70,26 +73,38 @@ export function Screen({ setToggleMenu, setCloseMenu }: Props) {
     fullDimensions: true,
   });
 
-  const routeData = useRoute();
+  const { screenData, pathname } = useRoute();
 
   const currentRiver = useScreenData(
-    getScreenId(routeData.screenData, navigation.activeRiver)
+    getScreenId(screenData, navigation.activeRiver)
   );
 
   const { title } = useNavbarState();
 
-  const navBarProps = React.useMemo(
-    () => ({
-      ...getNavigationPropsV2({
-        currentRiver,
-        title,
-        category: "nav_bar",
-      }),
-      setToggleMenu,
-      setCloseMenu,
-    }),
-    [currentRiver, setCloseMenu, setToggleMenu]
-  );
+  const hasMenu =
+    resolveNavigationPlugin({
+      category: "menu",
+      navigations: currentRiver.navigations,
+      plugins,
+    })?.identifier === "quick_brick_side_menu";
+
+  const navBarProps = React.useMemo<MobileNavBarPluginProps | null>(() => {
+    const props = getNavigationPropsV2({
+      currentRiver,
+      title,
+      category: "nav_bar",
+    });
+
+    if (props) {
+      return {
+        ...props,
+        id: pathname,
+        pathname: pathname,
+      };
+    }
+
+    return null;
+  }, [currentRiver, pathname]);
 
   const NavBar = React.useMemo(
     () =>
@@ -97,12 +112,10 @@ export function Screen({ setToggleMenu, setCloseMenu }: Props) {
         "nav_bar",
         currentRiver,
         plugins
-      ) as React.ComponentType<MobileNavBarPluginProps>,
+      ) as React.ComponentType<MobileNavBarPluginProps & { hasMenu: boolean }>,
     []
   );
 
-  const { screenData, pathname } = routeData;
-
   const offlinePlugin = getComponentModule({
     plugins,
     components: {},
@@ -133,9 +146,7 @@ export function Screen({ setToggleMenu, setCloseMenu }: Props) {
   return (
     <ScreenContextProvider pathname={pathname}>
       <View style={style}>
-        <NavBar
-          {...{ ...(navBarProps as MobileNavBarPluginProps), id: pathname }}
-        />
+        {navBarProps && <NavBar {...navBarProps} hasMenu={hasMenu} />}
 
         <OfflineFallbackScreen screenData={targetScreenData}>
           {/* @TODO RouteManager doesn't use props, can they be removed ?  */}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "12.0.0-alpha.9531194637",
+  "version": "12.0.0-alpha.9834532023",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -34,10 +34,10 @@
     "redux-mock-store": "^1.5.3"
   },
   "dependencies": {
-    "@applicaster/applicaster-types": "12.0.0-alpha.9531194637",
-    "@applicaster/zapp-react-native-bridge": "12.0.0-alpha.9531194637",
-    "@applicaster/zapp-react-native-redux": "12.0.0-alpha.9531194637",
-    "@applicaster/zapp-react-native-utils": "12.0.0-alpha.9531194637",
+    "@applicaster/applicaster-types": "12.0.0-alpha.9834532023",
+    "@applicaster/zapp-react-native-bridge": "12.0.0-alpha.9834532023",
+    "@applicaster/zapp-react-native-redux": "12.0.0-alpha.9834532023",
+    "@applicaster/zapp-react-native-utils": "12.0.0-alpha.9834532023",
     "promise": "^8.3.0",
     "react-router-native": "^5.1.2",
     "url": "^0.11.0",