@applicaster/zapp-react-native-ui-components 12.0.0-rc.136 → 12.0.0-rc.137

package/Components/MasterCell/DefaultComponents/ActionButton.tsx

@@ -66,11 +66,9 @@ export function ActionButton(props: Props) {
   );
 
   useEffect(() => {
-    if ((actionDisabled || !actionContext) && actionState !== null) {
-      return null;
+    if (!((actionDisabled || !actionContext) && actionState !== null)) {
+      setActionState(actionContext.initialEntryState(item));
     }
-
-    setActionState(actionContext.initialEntryState(item));
   }, [actionDisabled, item?.id, actionContext, action]);
 
   const onPress = useCallback(() => {
@@ -83,7 +81,7 @@ export function ActionButton(props: Props) {
 
   useEffect(() => {
     if (typeof actionContext?.addListener === "function") {
-      return actionContext?.addListener(item.id as string, (state) => {
+      return actionContext?.addListener(String(item.id), (state) => {
         setActionState(state);
       });
     }

package/Components/VideoModal/ModalAnimation/AnimatedScrollModal.tsx

@@ -61,6 +61,7 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
     setStartComponentsAnimation,
   } = useModalAnimationContext();
 
+  const [enableGesture, setIEnableGesture] = React.useState<boolean>(true);
   const { isLanguageOverlayVisible } = React.useContext(PlayerContainerContext);
 
   const { maximiseVideoModal, minimiseVideoModal, videoModalState } =
@@ -76,6 +77,7 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
     playerAnimationState !== PlayerAnimationStateEnum.maximaze;
 
   const isEnablePanGesture =
+    enableGesture &&
     !isLanguageOverlayVisible &&
     isNotMinimizeMaximazeAnimation &&
     (isMaximazedModal || isMinimizedModal);
@@ -169,15 +171,31 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
     scrollPosition.current = nativeEvent.contentOffset.y;
   }, []);
 
+  // Workaround for onMomentumScrollEnd issue
+  // https://github.com/facebook/react-native/issues/32696#issuecomment-1104217223
+  const canMomentum = React.useRef(false);
+
+  const onMomentumScrollBegin = React.useCallback(() => {
+    canMomentum.current = true;
+  }, []);
+
   const onMomentumScrollEnd = React.useCallback(
     ({ nativeEvent }) => {
-      if (nativeEvent.contentOffset.y === 0 && !isActiveGesture) {
-        resetScrollAnimatedValues(
-          lastScrollY,
-          lastScrollYValue,
-          dragScrollY,
-          dragVideoPlayerY
-        );
+      if (canMomentum.current && !isActiveGesture) {
+        if (nativeEvent.contentOffset.y === 0) {
+          resetScrollAnimatedValues(
+            lastScrollY,
+            lastScrollYValue,
+            dragScrollY,
+            dragVideoPlayerY
+          );
+
+          setIEnableGesture(true);
+        } else {
+          setIEnableGesture(false);
+        }
+
+        canMomentum.current = false;
       }
     },
     [isActiveGesture]
@@ -199,6 +217,14 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
   React.useEffect(() => {
     const { mode, previousMode, item } = videoModalState;
 
+    if (
+      mode === "MAXIMIZED" &&
+      !enableGesture &&
+      scrollPosition.current === 0
+    ) {
+      setIEnableGesture(true);
+    }
+
     if (mode === "MINIMIZED" && previousMode === "MAXIMIZED") {
       // set animation to the minimize values if moving from the player to another screen
       if (playerAnimationState === null) {
@@ -347,6 +373,7 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
                   bounces={false}
                   onScrollBeginDrag={onRegisterLastScroll}
                   onScroll={onScroll}
+                  onMomentumScrollBegin={onMomentumScrollBegin}
                   onMomentumScrollEnd={onMomentumScrollEnd}
                   scrollEventThrottle={1}
                   showsVerticalScrollIndicator={false}

package/Components/VideoModal/ModalAnimation/AnimatedVideoPlayerComponent.tsx

@@ -42,12 +42,17 @@ export const AnimatedVideoPlayer = ({ children }: Props) => {
   } = useNavigation();
 
   const { isLanguageOverlayVisible } = React.useContext(PlayerContainerContext);
-
   const isMaximazedModal = videoModalMode === "MAXIMIZED";
   const isMinimizedModal = videoModalMode === "MINIMIZED";
 
+  const isNotMinimizeMaximazeAnimation =
+    playerAnimationState !== PlayerAnimationStateEnum.minimize &&
+    playerAnimationState !== PlayerAnimationStateEnum.maximaze;
+
   const isEnablePanGesture =
-    !isLanguageOverlayVisible && (isMaximazedModal || isMinimizedModal);
+    !isLanguageOverlayVisible &&
+    isNotMinimizeMaximazeAnimation &&
+    (isMaximazedModal || isMinimizedModal);
 
   const onGestureEvent = Animated.event(
     [{ nativeEvent: { translationY: dragVideoPlayerY } }],
@@ -148,7 +153,6 @@ export const AnimatedVideoPlayer = ({ children }: Props) => {
   return (
     <PanGestureHandler
       enabled={isEnablePanGesture}
-      shouldCancelWhenOutside={isMaximazedModal}
       onGestureEvent={onGestureEvent}
       onHandlerStateChange={onHandlerStateChange}
     >

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "12.0.0-rc.136",
+  "version": "12.0.0-rc.137",
   "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-rc.136",
-    "@applicaster/zapp-react-native-bridge": "12.0.0-rc.136",
-    "@applicaster/zapp-react-native-redux": "12.0.0-rc.136",
-    "@applicaster/zapp-react-native-utils": "12.0.0-rc.136",
+    "@applicaster/applicaster-types": "12.0.0-rc.137",
+    "@applicaster/zapp-react-native-bridge": "12.0.0-rc.137",
+    "@applicaster/zapp-react-native-redux": "12.0.0-rc.137",
+    "@applicaster/zapp-react-native-utils": "12.0.0-rc.137",
     "promise": "^8.3.0",
     "react-router-native": "^5.1.2",
     "url": "^0.11.0",