@applicaster/zapp-react-native-ui-components 13.0.8-alpha.1940580104 → 13.0.8-alpha.2505844239

package/Components/Cell/Cell.tsx

@@ -15,7 +15,6 @@ import { AccessibilityManager } from "@applicaster/zapp-react-native-utils/appUt
 import { styles } from "./styles";
 
 type Props = {
-  dataLength: number;
   item: ZappEntry;
   index: number;
   shouldScrollHorizontally: (arg1: [any]) => boolean | null | undefined;
@@ -71,8 +70,6 @@ type State = {
 };
 
 export class CellComponent extends React.Component<Props, State> {
-  accessibilityManager: AccessibilityManager;
-
   constructor(props) {
     super(props);
     this.onPress = this.onPress.bind(this);
@@ -82,13 +79,10 @@ export class CellComponent extends React.Component<Props, State> {
     this.hasReceivedFocus = this.hasReceivedFocus.bind(this);
     this.scrollVertically = this.scrollVertically.bind(this);
     this.scrollToIndex = this.scrollToIndex.bind(this);
-    this.handleAccessibilityFocus = this.handleAccessibilityFocus.bind(this);
 
     this.state = {
       hasFocusableInside: props.CellRenderer.hasFocusableInside?.(props.item),
     };
-
-    this.accessibilityManager = AccessibilityManager.getInstance();
   }
 
   setScreenLayout(componentAnchorPointY, screenLayout) {
@@ -189,30 +183,6 @@ export class CellComponent extends React.Component<Props, State> {
     return !isFocusable ? false : focused || focusableFocused;
   }
 
-  handleAccessibilityFocus(item, index, dataLength) {
-    const accessibilityTitle =
-      item?.extensions?.accessibility?.label || item?.title;
-
-    const accessibilityHint = item?.extensions?.accessibility?.hint;
-
-    // For loop scrolling, calculate the correct logical index
-    const logicalIndex = dataLength ? index % dataLength : index;
-
-    const positionLabel = dataLength
-      ? `item ${logicalIndex + 1} of ${dataLength}`
-      : "";
-
-    accessibilityTitle &&
-      this.accessibilityManager.addHeading(accessibilityTitle);
-
-    accessibilityHint &&
-      this.accessibilityManager.addHeading(accessibilityHint);
-
-    this.accessibilityManager.readText({
-      text: `${positionLabel}`,
-    });
-  }
-
   componentDidUpdate(prevProps: Readonly<Props>) {
     if (prevProps.item !== this.props.item) {
       this.setState({
@@ -227,7 +197,6 @@ export class CellComponent extends React.Component<Props, State> {
     const {
       item,
       index,
-      dataLength,
       component,
       offsetUpdater,
       preferredFocus,
@@ -288,15 +257,22 @@ export class CellComponent extends React.Component<Props, State> {
           style={styles.baseCell}
           isFocusable={isFocusable}
           skipFocusManagerRegistration={skipFocusManagerRegistration}
-          {...this.accessibilityManager.getButtonAccessibilityProps(
-            item?.extensions?.accessibility?.label || item?.title
-          )}
         >
           {(focused, event) => {
             const isFocused = this.isCellFocused(focused);
 
             if (isFocused) {
-              this.handleAccessibilityFocus(item, index, dataLength);
+              const accessibilityManager = AccessibilityManager.getInstance();
+
+              const accessibilityTitle =
+                item?.extensions?.accessibility?.label || item?.title || "";
+
+              const accessibilityHint =
+                item?.extensions?.accessibility?.hint || "";
+
+              accessibilityManager.readText({
+                text: `${accessibilityTitle} ${accessibilityHint}`,
+              });
             }
 
             return (

package/Components/Focusable/Focusable.tsx

@@ -5,7 +5,6 @@ import { BaseFocusable } from "../BaseFocusable";
 import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils/focusManager";
 import { LONG_KEY_PRESS_TIMEOUT } from "@applicaster/quick-brick-core/const";
 import { withFocusableContext } from "../../Contexts/FocusableGroupContext/withFocusableContext";
-import { AccessibilityManager } from "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager";
 
 type Props = {
   initialFocus?: boolean;
@@ -29,7 +28,6 @@ class Focusable extends BaseFocusable<Props> {
   isGroup: boolean;
   mouse: boolean;
   longPressTimeout = null;
-  accessibilityManager: AccessibilityManager;
 
   constructor(props) {
     super(props);
@@ -44,8 +42,6 @@ class Focusable extends BaseFocusable<Props> {
     this.resetLongPressTimeout = this.resetLongPressTimeout.bind(this);
     this.longPress = this.longPress.bind(this);
     this.press = this.press.bind(this);
-
-    this.accessibilityManager = AccessibilityManager.getInstance();
   }
 
   /**
@@ -132,9 +128,6 @@ class Focusable extends BaseFocusable<Props> {
     const id = this.getId();
     const focusableId = `focusable-${id}`;
 
-    const accessibilityProps =
-      this.accessibilityManager.getWebAccessibilityProps(this.props);
-
     return (
       <div
         id={focusableId}
@@ -147,7 +140,6 @@ class Focusable extends BaseFocusable<Props> {
         data-testid={focusableId}
         focused-teststate={focused ? "focused" : "default"}
         style={style}
-        {...accessibilityProps}
       >
         {children(focused, { mouse: this.mouse })}
       </div>

package/Components/MasterCell/DefaultComponents/FocusableView/index.tsx

@@ -47,7 +47,7 @@ export function FocusableView({ style, children, item, ...otherProps }: Props) {
 
   const accessibilityManager = useAccessibilityManager({});
 
-  const { heading = "", ttsLabel = "" } =
+  const { ttsLabel = "" } =
     actionContext?.initialEntryState(item)?.getAccessibility?.(item) || {};
 
   const onPress = (event) => {
@@ -95,12 +95,10 @@ export function FocusableView({ style, children, item, ...otherProps }: Props) {
       });
     });
 
-    if (heading && ttsLabel) {
-      accessibilityManager.addHeading(heading);
-    }
-
     if (ttsLabel) {
-      accessibilityManager.readText({ text: `${ttsLabel} button` });
+      accessibilityManager.readText({
+        text: ttsLabel,
+      });
     }
   };
 

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,48 +268,57 @@ 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}
-            listKey={riverId}
-            keyExtractor={keyExtractor}
-            renderItem={renderRiverItem}
-            data={riverComponents}
-            contentContainerStyle={contentContainerStyle}
-            ListFooterComponent={
-              <RiverFooter
-                flatListHeight={flatListHeight}
-                loadingState={loadingState}
+    <View
+      style={styles.container}
+      ref={(ref) => {
+        flatListWrapperRef.current = ref;
+      }}
+    >
+      <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}
+                listKey={riverId}
+                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/TextInputTv/__tests__/__snapshots__/TextInputTv.test.js.snap

@@ -2,19 +2,6 @@
 
 exports[`<TextInputTv /> renders 1`] = `
 <input
-  accessibilityProps={
-    {
-      "accessibilityHint": "Enter text into Search",
-      "accessibilityLabel": "Search",
-      "accessibilityRole": "text",
-      "accessible": true,
-      "aria-description": "Enter text into Search",
-      "aria-label": "Search",
-      "aria-role": "text",
-      "role": "text",
-      "tabindex": 0,
-    }
-  }
   testID="TextInput-tv"
 />
 `;

package/Components/TextInputTv/index.tsx

@@ -4,7 +4,6 @@ import { Appearance, Platform, StyleSheet, TextInput } from "react-native";
 import { isFunction } from "@applicaster/zapp-react-native-utils/functionUtils";
 import { isWeb } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { useIsRTL } from "@applicaster/zapp-react-native-utils/localizationUtils";
-import { useAccessibilityManager } from "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager/hooks";
 
 type Props = Partial<{
   style: any;
@@ -43,8 +42,6 @@ function TextInputTV(props: Props, ref) {
   const [colorScheme, setColorScheme] = useState(getInitialColorScheme());
   const isRTL = useIsRTL();
 
-  const accessibilityManager = useAccessibilityManager({});
-
   const onColorChange = useCallback(
     ({ colorScheme: color }) => {
       if (color !== colorScheme) {
@@ -156,13 +153,6 @@ function TextInputTV(props: Props, ref) {
       ])
     )(props);
 
-  const getAccessibilityProps = () => {
-    return {
-      accessibilityProps:
-        accessibilityManager.getInputAccessibilityProps("Search"),
-    };
-  };
-
   const inputProps = {
     ...getProps(),
     ...getStyle(),
@@ -171,7 +161,6 @@ function TextInputTV(props: Props, ref) {
     ...getSecureTextEntry(),
     ...getOnEndEditing(),
     ...getOnPress(),
-    ...getAccessibilityProps(),
   };
 
   if (

package/Components/VideoModal/ModalAnimation/AnimatedScrollModal.tsx

@@ -372,7 +372,7 @@ 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}
@@ -382,7 +382,7 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
             onHandlerStateChange={onHandlerStateChange}
             activeOffsetY={[-5, 5]}
           >
-            <Animated.View>
+            <Animated.View style={generalStyles.container}>
               <NativeViewGestureHandler
                 ref={scrollRef}
                 waitFor={tapHandlerRef}
@@ -397,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

@@ -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";
@@ -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 flex1 = { flex: 1 };
 
 type Configuration = {
   [key: string]: any;
@@ -50,7 +51,7 @@ export const PlayerDetails = ({
   const extraTabletStyles = !isAudioPlayer
     ? isTabletLandscape
       ? { marginTop: -insets.top, paddingTop: insets.top + 20 }
-      : { marginTop: -8, paddingTop: -8 }
+      : {}
     : {};
 
   // Animation setup
@@ -93,6 +94,7 @@ export const PlayerDetails = ({
           transform: [{ translateY }],
           opacity,
         },
+        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
@@ -107,6 +109,7 @@ export const PlayerDetails = ({
           riverId={screenData.id}
           feed={screenData?.data?.source}
           riverComponents={screenData.ui_components}
+          isScreenWrappedInContainer
         />
       ) : null}
     </Animated.View>

package/Components/VideoModal/PlayerWrapper.tsx

@@ -238,7 +238,6 @@ const PlayerWrapperComponent = (props: Props) => {
             </AnimatedVideoPlayerComponent>
           </AnimationComponent>
         </View>
-
         <AnimatedScrollModal>
           {isShowPlayerDetails ? (
             <AnimationComponent

package/package.json

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