@applicaster/zapp-react-native-ui-components 15.0.0-rc.2 → 15.0.0-rc.4

package/Components/GeneralContentScreen/utils/useCurationAPI.ts

@@ -142,17 +142,15 @@ export const useCurationAPI = (
       const url = path(SOURCE_PATH, component);
       const mapping = path(MAPPING_PATH, component);
 
-      map[component.id] = mapping
-        ? getInflatedDataSourceUrl({
-            source: url,
-            contexts: {
-              entry: entryContext,
-              screen: screenContext,
-              search: getSearchContext(searchContext, mapping),
-            },
-            mapping,
-          })
-        : url;
+      map[component.id] = getInflatedDataSourceUrl({
+        source: url,
+        contexts: {
+          entry: entryContext,
+          screen: screenContext,
+          search: getSearchContext(searchContext, mapping),
+        },
+        mapping,
+      });
     });
 
     return map;

package/Components/River/ComponentsMap/ComponentsMap.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import * as R from "ramda";
-import { View, StyleSheet, FlatList } from "react-native";
+import { FlatList, StyleSheet, View } from "react-native";
 import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 import { RiverItem } from "../RiverItem";
 import { RiverFooter } from "../RiverFooter";
@@ -9,8 +9,8 @@ import { useScreenConfiguration } from "../useScreenConfiguration";
 import { RefreshControl } from "../RefreshControl";
 import { ifEmptyUseFallback } from "@applicaster/zapp-react-native-utils/cellUtils";
 import {
-  useProfilerLogging,
   usePipesCacheReset,
+  useProfilerLogging,
 } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { useLoadingState } from "./hooks/useLoadingState";
 import { ViewportTracker } from "../../Viewport";
@@ -25,6 +25,8 @@ import { useScreenContextV2 } from "@applicaster/zapp-react-native-utils/reactHo
 import { useShallow } from "zustand/react/shallow";
 
 import { isAndroidPlatform } from "@applicaster/zapp-react-native-utils/reactUtils";
+import { ComponentsMapHeightContext } from "./ContextProviders/ComponentsMapHeightContext";
+import { ComponentsMapRefContext } from "./ContextProviders/ComponentsMapRefContext";
 
 const isAndroid = isAndroidPlatform();
 
@@ -70,6 +72,7 @@ function ComponentsMapComponent(props: Props) {
   } = props;
 
   const flatListRef = React.useRef<FlatList | null>(null);
+  const flatListWrapperRef = React.useRef<View | null>(null);
   const screenConfig = useScreenConfiguration(riverId);
   const screenData = useScreenData(riverId);
   const pullToRefreshEnabled = screenData?.rules?.pull_to_refresh_enabled;
@@ -265,47 +268,51 @@ 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}>
-      <ScreenLoadingMeasurements
-        riverId={riverId}
-        numberOfComponents={riverComponents.length}
-      >
-        <ViewportTracker>
-          <FlatList
-            ref={(ref) => {
-              flatListRef.current = ref;
-            }}
-            // Fix for WebView rerender crashes on Android API 28+
-            // https://github.com/react-native-webview/react-native-webview/issues/1915#issuecomment-964035468
-            overScrollMode={isAndroid ? "never" : "auto"}
-            scrollIndicatorInsets={scrollIndicatorInsets}
-            extraData={feed}
-            stickyHeaderIndices={stickyHeaderIndices}
-            removeClippedSubviews={isAndroid}
-            onLayout={handleOnLayout}
-            initialNumToRender={3}
-            maxToRenderPerBatch={10}
-            windowSize={12}
-            keyExtractor={keyExtractor}
-            renderItem={renderRiverItem}
-            data={riverComponents}
-            contentContainerStyle={contentContainerStyle}
-            ListFooterComponent={
-              <RiverFooter
-                flatListHeight={flatListHeight}
-                loadingState={loadingState}
+    <View style={styles.container} ref={flatListWrapperRef}>
+      <ComponentsMapHeightContext.Provider value={flatListHeight}>
+        <ComponentsMapRefContext.Provider value={flatListWrapperRef}>
+          <ScreenLoadingMeasurements
+            riverId={riverId}
+            numberOfComponents={riverComponents.length}
+          >
+            <ViewportTracker>
+              <FlatList
+                ref={(ref) => {
+                  flatListRef.current = ref;
+                }}
+                // Fix for WebView rerender crashes on Android API 28+
+                // https://github.com/react-native-webview/react-native-webview/issues/1915#issuecomment-964035468
+                overScrollMode={isAndroid ? "never" : "auto"}
+                scrollIndicatorInsets={scrollIndicatorInsets}
+                extraData={feed}
+                stickyHeaderIndices={stickyHeaderIndices}
+                removeClippedSubviews={isAndroid}
+                onLayout={handleOnLayout}
+                initialNumToRender={3}
+                maxToRenderPerBatch={10}
+                windowSize={12}
+                keyExtractor={keyExtractor}
+                renderItem={renderRiverItem}
+                data={riverComponents}
+                contentContainerStyle={contentContainerStyle}
+                ListFooterComponent={
+                  <RiverFooter
+                    flatListHeight={flatListHeight}
+                    loadingState={loadingState}
+                  />
+                }
+                refreshControl={refreshControl}
+                onScrollBeginDrag={onScrollBeginDrag}
+                onScroll={onScroll}
+                onMomentumScrollEnd={_onMomentumScrollEnd}
+                onScrollEndDrag={_onScrollEndDrag}
+                scrollEventThrottle={16}
+                {...scrollViewExtraProps}
               />
-            }
-            refreshControl={refreshControl}
-            onScrollBeginDrag={onScrollBeginDrag}
-            onScroll={onScroll}
-            onMomentumScrollEnd={_onMomentumScrollEnd}
-            onScrollEndDrag={_onScrollEndDrag}
-            scrollEventThrottle={16}
-            {...scrollViewExtraProps}
-          />
-        </ViewportTracker>
-      </ScreenLoadingMeasurements>
+            </ViewportTracker>
+          </ScreenLoadingMeasurements>
+        </ComponentsMapRefContext.Provider>
+      </ComponentsMapHeightContext.Provider>
     </View>
   );
 }

package/Components/River/ComponentsMap/ContextProviders/ComponentsMapHeightContext.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+
+export const ComponentsMapHeightContext = React.createContext<number | null>(
+  null
+);
+
+export const useComponentsMapHeight = () =>
+  React.useContext(ComponentsMapHeightContext);

package/Components/River/ComponentsMap/ContextProviders/ComponentsMapRefContext.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+import { View } from "react-native";
+
+export const ComponentsMapRefContext =
+  React.createContext<React.RefObject<View | null> | null>(null);
+
+export const useComponentsMapRef = () =>
+  React.useContext(ComponentsMapRefContext);

package/Components/ScreenResolver/index.tsx

@@ -16,6 +16,7 @@ import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { useScreenAnalytics } from "@applicaster/zapp-react-native-utils/analyticsUtils/helpers/hooks";
 
 import { useCallbackActions } from "@applicaster/zapp-react-native-utils/zappFrameworkUtils/HookCallback/useCallbackActions";
+import { ScreenResultCallback } from "@applicaster/zapp-react-native-utils/zappFrameworkUtils/HookCallback/callbackNavigationAction";
 
 const logger = componentsLogger.addSubsystem("ScreenResolver");
 
@@ -26,6 +27,7 @@ type Props = {
   feedId?: string;
   feedTitle?: string;
   focused?: boolean;
+  resultCallback?: ScreenResultCallback;
   parentFocus?: {
     nextFocusDown?: React.Ref<any>;
     nextFocusRight?: React.Ref<any>;
@@ -61,13 +63,17 @@ export function ScreenResolverComponent(props: Props) {
 
   React.useEffect(() => {
     setScreenContext(rivers[screenId]);
-  }, [screenId]);
+  }, [rivers, screenId, setScreenContext]);
 
-  const callbackAction = useCallbackActions(
+  const parentCallback = props.resultCallback;
+
+  const screenAction = useCallbackActions(
     hookPlugin || screenData,
     screenData.callback
   );
 
+  const callbackAction = parentCallback || screenAction;
+
   const ScreenPlugin =
     findPluginByType(screenType, plugins, { skipWarning: true }) ||
     findPluginByIdentifier(screenType, plugins) ||

package/Components/VideoModal/ModalAnimation/AnimatedScrollModal.tsx

@@ -42,6 +42,8 @@ type Props = {
   children: React.ReactNode;
 };
 
+const activeOffsetY = [-5, 5] as [number, number];
+
 export const AnimatedScrollModalComponent = ({ children }: Props) => {
   const {
     isActiveGesture,
@@ -372,9 +374,9 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
             ref={panHandlerRef}
             simultaneousHandlers={[scrollRef, tapHandlerRef]}
             shouldCancelWhenOutside={isMaximizedModal}
+            activeOffsetY={activeOffsetY}
             onGestureEvent={onGestureEvent}
             onHandlerStateChange={onHandlerStateChange}
-            activeOffsetY={[-5, 5]}
           >
             <Animated.View>
               <NativeViewGestureHandler

package/Components/VideoModal/PlayerDetails.tsx

@@ -4,8 +4,8 @@ import {
   Dimensions,
   Easing,
   StyleProp,
-  ViewStyle,
   StyleSheet,
+  ViewStyle,
 } from "react-native";
 import { useTargetScreenData } from "@applicaster/zapp-react-native-utils/reactHooks/screen";
 import { ComponentsMap } from "@applicaster/zapp-react-native-ui-components/Components/River/ComponentsMap";
@@ -69,11 +69,10 @@ export const PlayerDetails = ({
   const screenData = useTargetScreenData(entry);
   const insets = useSafeAreaInsets();
 
-  const extraTabletStyles = !isAudioPlayer
-    ? isTabletLandscape
+  const extraTabletStyles =
+    !isAudioPlayer && isTabletLandscape
       ? { marginTop: -insets.top, paddingTop: insets.top + 20 }
-      : { marginTop: -8, paddingTop: -8 }
-    : {};
+      : null;
 
   // Animation setup
   const translateY = useRef(new Animated.Value(50)).current;
@@ -129,6 +128,7 @@ export const PlayerDetails = ({
           riverId={screenData.id}
           feed={screenData?.data?.source}
           riverComponents={screenData.ui_components}
+          isScreenWrappedInContainer
         />
       ) : null}
     </Animated.View>

package/Components/ZappFrameworkComponents/BarView/BarView.tsx

@@ -1,6 +1,5 @@
 import React from "react";
-import { StyleSheet } from "react-native";
-import { SafeAreaView } from "react-native-safe-area-context";
+import { StyleSheet, View } from "react-native";
 
 import { useIsRTL } from "@applicaster/zapp-react-native-utils/localizationUtils";
 import CloseButton from "./Buttons/CloseButton";
@@ -45,15 +44,14 @@ const BarView = ({ screenStyles, barState = defaultState }: Props) => {
   );
 
   return (
-    <SafeAreaView
-      edges={["top", "left", "right"]}
+    <View
       style={[style.view, isRTL ? style.rtlStyle : {}]}
-      testID="BarView-safeAreaView"
+      testID="BarView-Container"
     >
       {backButton}
       <BarTitle title={barState.title} screenStyles={screenStyles} />
       {closeButton}
-    </SafeAreaView>
+    </View>
   );
 };
 

package/Components/ZappFrameworkComponents/BarView/__tests__/BarView.test.tsx

@@ -46,7 +46,7 @@ describe("BarView", () => {
       <BarView screenStyles={screenStyles} barState={barState} />
     );
 
-    expect(getByTestId("BarView-safeAreaView").props.style).toContainEqual({
+    expect(getByTestId("BarView-Container").props.style).toContainEqual({
       transform: [{ scaleX: -1 }],
     });
   });
@@ -58,7 +58,7 @@ describe("BarView", () => {
       <BarView screenStyles={screenStyles} barState={barState} />
     );
 
-    expect(getByTestId("BarView-safeAreaView").props.style).not.toContainEqual({
+    expect(getByTestId("BarView-Container").props.style).not.toContainEqual({
       transform: [{ scaleX: -1 }],
     });
   });

package/Decorators/RiverFeedLoader/utils/getDatasourceUrl.ts

@@ -24,16 +24,12 @@ export const getDatasourceUrl: (
   ) => {
     const { source, mapping } = R.propOr({}, ["data"], component);
 
-    if (mapping) {
-      const contexts = {
-        entry: entryContext,
-        screen: screenContext || screenData,
-        search: getSearchContext(searchContext, mapping),
-      };
+    const contexts = {
+      entry: entryContext,
+      screen: screenContext || screenData,
+      search: getSearchContext(searchContext, mapping),
+    };
 
-      return getInflatedDataSourceUrl({ source, mapping, contexts });
-    }
-
-    return source;
+    return getInflatedDataSourceUrl({ source, mapping, contexts });
   }
 );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "15.0.0-rc.2",
+  "version": "15.0.0-rc.4",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -28,10 +28,10 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "15.0.0-rc.2",
-    "@applicaster/zapp-react-native-bridge": "15.0.0-rc.2",
-    "@applicaster/zapp-react-native-redux": "15.0.0-rc.2",
-    "@applicaster/zapp-react-native-utils": "15.0.0-rc.2",
+    "@applicaster/applicaster-types": "15.0.0-rc.4",
+    "@applicaster/zapp-react-native-bridge": "15.0.0-rc.4",
+    "@applicaster/zapp-react-native-redux": "15.0.0-rc.4",
+    "@applicaster/zapp-react-native-utils": "15.0.0-rc.4",
     "promise": "^8.3.0",
     "url": "^0.11.0",
     "uuid": "^3.3.2"