@applicaster/zapp-react-native-ui-components 13.0.11-alpha.1221577073 → 13.0.11-alpha.5714428013

package/Components/River/ComponentsMap/ComponentsMap.tsx

@@ -268,7 +268,12 @@ function ComponentsMapComponent(props: Props) {
   // The Screen Picker in Mobile is completly different than the TV
   // so the various offsets / margins in TV do not apply here.
   return (
-    <View style={styles.container} ref={flatListWrapperRef}>
+    <View
+      style={styles.container}
+      ref={(ref) => {
+        flatListWrapperRef.current = ref;
+      }}
+    >
       <ComponentsMapHeightContext.Provider value={flatListHeight}>
         <ComponentsMapRefContext.Provider value={flatListWrapperRef}>
           <ScreenLoadingMeasurements

package/Components/VideoModal/ModalAnimation/AnimatedScrollModal.tsx

@@ -43,8 +43,6 @@ type Props = {
   children: React.ReactNode;
 };
 
-const activeOffsetY = [-5, 5];
-
 export const AnimatedScrollModalComponent = ({ children }: Props) => {
   const {
     isActiveGesture,
@@ -374,17 +372,17 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
         maxDeltaY={lastSnap - modalSnapPoints[0]}
         numberOfTaps={1}
       >
-        <View pointerEvents="box-none">
+        <View pointerEvents="box-none" style={generalStyles.container}>
           <PanGestureHandler
             enabled={isEnablePanGesture}
             ref={panHandlerRef}
             simultaneousHandlers={[scrollRef, tapHandlerRef]}
             shouldCancelWhenOutside={isMaximizedModal}
-            activeOffsetY={activeOffsetY}
             onGestureEvent={onGestureEvent}
             onHandlerStateChange={onHandlerStateChange}
+            activeOffsetY={[-5, 5]}
           >
-            <Animated.View>
+            <Animated.View style={generalStyles.container}>
               <NativeViewGestureHandler
                 ref={scrollRef}
                 waitFor={tapHandlerRef}
@@ -399,6 +397,7 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
                   onMomentumScrollEnd={onMomentumScrollEnd}
                   scrollEventThrottle={1}
                   showsVerticalScrollIndicator={false}
+                  contentContainerStyle={generalStyles.container}
                 >
                   {children}
                 </Animated.ScrollView>

package/Components/VideoModal/PlayerDetails.tsx

@@ -13,6 +13,7 @@ import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
 
 const { width: SCREEN_WIDTH } = Dimensions.get("screen");
+const styles = StyleSheet.create({ flex1: { flex: 1 } });
 
 type Configuration = {
   [key: string]: any;
@@ -92,6 +93,7 @@ export const PlayerDetails = ({
           transform: [{ translateY }],
           opacity,
         },
+        styles.flex1,
         {
           // workaround for avoid wrong text-height after going back to portrait rotation
           // we don't see this view in landscape mode, so we are able to use fixed width from portrait mode

package/Components/VideoModal/PlayerWrapper.tsx

@@ -1,5 +1,4 @@
 import * as React from "react";
-import { useContext } from "react";
 import {
   Dimensions,
   Platform,
@@ -132,11 +131,6 @@ const getTabletWidth = (
   return widthValue - sidebarWidth;
 };
 
-const PlayerDetailsWrapperHeightContext = React.createContext(null);
-
-export const usePlayerDetailsWrapperHeight = () =>
-  useContext(PlayerDetailsWrapperHeightContext);
-
 const PlayerWrapperComponent = (props: Props) => {
   const {
     entry,
@@ -152,20 +146,6 @@ const PlayerWrapperComponent = (props: Props) => {
     pip,
   } = props;
 
-  const [playerDetailsWrapperHeight, setPlayerDetailsWrapperHeight] =
-    React.useState(0);
-
-  const onLayout = React.useCallback(
-    ({
-      nativeEvent: {
-        layout: { height },
-      },
-    }) => {
-      setPlayerDetailsWrapperHeight(height);
-    },
-    []
-  );
-
   const isTablet = useIsTablet();
 
   const isInlineModal = inline && isModal;
@@ -258,28 +238,22 @@ const PlayerWrapperComponent = (props: Props) => {
             </AnimatedVideoPlayerComponent>
           </AnimationComponent>
         </View>
-        <View style={defaultStyles.flex} onLayout={onLayout}>
-          <PlayerDetailsWrapperHeightContext.Provider
-            value={playerDetailsWrapperHeight}
-          >
-            <AnimatedScrollModal>
-              {isShowPlayerDetails ? (
-                <AnimationComponent
-                  animationType={ComponentAnimationType.componentFade}
-                  style={defaultStyles.flex}
-                >
-                  <PlayerDetails
-                    configuration={configuration}
-                    style={defaultStyles.playerDetails}
-                    entry={entry}
-                    isTabletLandscape={isTabletLandscape}
-                    isTablet={isTablet}
-                  />
-                </AnimationComponent>
-              ) : null}
-            </AnimatedScrollModal>
-          </PlayerDetailsWrapperHeightContext.Provider>
-        </View>
+        <AnimatedScrollModal>
+          {isShowPlayerDetails ? (
+            <AnimationComponent
+              animationType={ComponentAnimationType.componentFade}
+              style={defaultStyles.flex}
+            >
+              <PlayerDetails
+                configuration={configuration}
+                style={defaultStyles.playerDetails}
+                entry={entry}
+                isTabletLandscape={isTabletLandscape}
+                isTablet={isTablet}
+              />
+            </AnimationComponent>
+          ) : null}
+        </AnimatedScrollModal>
       </AnimationComponent>
     </WrapperView>
   );

package/package.json

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