@applicaster/zapp-react-native-ui-components 14.0.0-rc.9 → 15.0.0-alpha.1001559563

package/Components/Cell/TvOSCellComponent.tsx

@@ -1,6 +1,9 @@
 import * as React from "react";
 import * as R from "ramda";
 import { View, StyleSheet } from "react-native";
+import { first, filter } from "rxjs/operators";
+
+import { compose } from "@applicaster/zapp-react-native-utils/utils";
 
 import { Focusable } from "@applicaster/zapp-react-native-ui-components/Components/Focusable/FocusableTvOS";
 import { FocusableCell } from "@applicaster/zapp-react-native-ui-components/Components/FocusableCell";
@@ -9,7 +12,11 @@ import { SCREEN_TYPES } from "@applicaster/zapp-react-native-utils/navigationUti
 import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils/focusManager";
 import { sendSelectCellEvent } from "@applicaster/zapp-react-native-utils/analyticsUtils";
 import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
+import { toBooleanWithDefaultTrue } from "@applicaster/zapp-react-native-utils/booleanUtils";
 import { CellWithFocusable } from "./CellWithFocusable";
+import { FocusableWrapper } from "./FocusableWrapper";
+
+import { focusableButtonsRegistration$ } from "@applicaster/zapp-react-native-utils/appUtils/focusManagerAux/utils/utils.ios";
 
 type Props = {
   item: ZappEntry;
@@ -66,6 +73,8 @@ type Props = {
   shouldUpdate: boolean;
   behavior: Behavior;
   componentsMapOffset: number;
+  applyFocusableWrapper: boolean;
+  hasFocusableInside: boolean;
 };
 
 type State = {
@@ -82,7 +91,7 @@ const baseCellStyles = {
   flex: 1,
 } as const;
 
-export class TvOSCellComponent extends React.Component<Props, State> {
+class TvOSCell extends React.Component<Props, State> {
   cell: any;
   target: any;
   layout: any;
@@ -239,6 +248,8 @@ export class TvOSCellComponent extends React.Component<Props, State> {
       groupId,
       isFocusable,
       behavior,
+      applyFocusableWrapper,
+      hasFocusableInside,
     } = this.props;
 
     const { id } = item;
@@ -254,24 +265,33 @@ export class TvOSCellComponent extends React.Component<Props, State> {
       this.onFocus(arg1, index);
     };
 
-    const hasFocusableInside = CellRenderer.hasFocusableInside?.(item);
-
     if (hasFocusableInside) {
       return (
         <View onLayout={this.onLayout}>
-          <CellWithFocusable
-            CellRenderer={CellRenderer}
-            item={item}
+          <FocusableWrapper
             id={focusableId}
-            groupId={(groupId || component?.id).toString()}
+            groupId={String(groupId || component?.id)}
+            isParallaxDisabled={this.layout?.width > 1740}
             onFocus={handleFocus}
-            index={index}
-            scrollTo={this.scrollTo}
-            preferredFocus={preferredFocus}
-            focused={this.props.focused}
-            behavior={behavior}
-            isFocusable={isFocusable}
-          />
+            onBlur={onBlur || this.onBlur}
+            applyWrapper={applyFocusableWrapper}
+          >
+            {(focused) => (
+              <CellWithFocusable
+                CellRenderer={CellRenderer}
+                item={item}
+                id={focusableId}
+                groupId={(groupId || component?.id).toString()}
+                onFocus={handleFocus}
+                index={index}
+                scrollTo={this.scrollTo}
+                preferredFocus={preferredFocus}
+                focused={focused || this.props.focused}
+                behavior={behavior}
+                isFocusable={isFocusable}
+              />
+            )}
+          </FocusableWrapper>
         </View>
       );
     }
@@ -309,3 +329,49 @@ export class TvOSCellComponent extends React.Component<Props, State> {
     );
   }
 }
+
+export function withFocusableWrapperHOC(Component) {
+  return function WrappedComponent(props) {
+    const [focusableViewIsRendered, setFocusableViewIsRendered] =
+      React.useState(false);
+
+    const { CellRenderer, item, groupId, component } = props;
+
+    const isFocusable = toBooleanWithDefaultTrue(props?.isFocusable);
+
+    const focusableGroupId = String(groupId || component?.id);
+
+    const hasFocusableInside = CellRenderer.hasFocusableInside?.(item);
+
+    React.useEffect(() => {
+      // start waiting any first registration of FocusableButton inside this focusableGroup
+      // after it we could get rid of applying focusable-wrapper
+      const subscription = focusableButtonsRegistration$(focusableGroupId)
+        .pipe(
+          filter(() => isFocusable),
+          first()
+        )
+        .subscribe(() => {
+          setFocusableViewIsRendered(true);
+        });
+
+      return () => {
+        subscription.unsubscribe();
+      };
+    }, [isFocusable, focusableGroupId]);
+
+    const applyFocusableWrapper = React.useMemo(() => {
+      return isFocusable && hasFocusableInside && !focusableViewIsRendered;
+    }, [isFocusable, hasFocusableInside, focusableViewIsRendered]);
+
+    return (
+      <Component
+        {...props}
+        applyFocusableWrapper={applyFocusableWrapper}
+        hasFocusableInside={hasFocusableInside}
+      />
+    );
+  };
+}
+
+export const TvOSCellComponent = compose(withFocusableWrapperHOC)(TvOSCell);

package/Components/Cell/__tests__/CellWIthFocusable.test.js

@@ -1,12 +1,13 @@
 import { View } from "react-native";
 import React from "react";
-import { act, render } from "@testing-library/react-native";
+import { act } from "@testing-library/react-native";
 import { CellWithFocusable } from "../CellWithFocusable.tsx";
 
 import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils/focusManager";
+import { renderWithProviders } from "@applicaster/zapp-react-native-utils/testUtils/index.tsx";
 
 const renderWith = (props) => {
-  return render(<CellWithFocusable {...props} />);
+  return renderWithProviders(<CellWithFocusable {...props} />);
 };
 
 describe("CellWithFocusable", () => {

package/Components/Cell/index.js

@@ -1,13 +1,17 @@
 import * as R from "ramda";
 
-import { connectToStore } from "@applicaster/zapp-react-native-redux";
+import { connectToStore } from "@applicaster/zapp-react-native-redux/utils/connectToStore";
 import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
 
-import { HorizontalScrollContext, RiverOffsetContext } from "../../Contexts";
+import {
+  HorizontalScrollContext,
+  RiverOffsetContext,
+  ScreenScrollingContext,
+} from "../../Contexts";
+
 import { CellComponent } from "./Cell";
 import { TvOSCellComponent } from "./TvOSCellComponent";
 import { withConsumer } from "../../Contexts/HeaderOffsetContext";
-import { ScreenScrollingContext } from "../../Contexts/ScreenScrollingContext";
 
 import { ScreenLayoutContextConsumer } from "../../Contexts/ScreenLayoutContext";
 import { createContext } from "@applicaster/zapp-react-native-utils/reactUtils/createContext";

package/Components/ComponentResolver/index.ts

@@ -1,6 +1,6 @@
 import * as R from "ramda";
 
-import { connectToStore } from "@applicaster/zapp-react-native-redux";
+import { connectToStore } from "@applicaster/zapp-react-native-redux/utils/connectToStore";
 
 import { ComponentResolverComponent } from "./ComponentResolver";
 

package/Components/FeedLoader/FeedLoader.tsx

@@ -1,25 +1,16 @@
 import React from "react";
 import * as R from "ramda";
+import { selectZappPipes } from "@applicaster/zapp-react-native-redux";
 
 type Props = {
-  zappPipes: ZappPipesData;
-  loadPipesData: (
-    feed: string,
-    options?: Partial<{
-      clearCache: boolean;
-      meta: any;
-      loadLocalFavorites: boolean;
-      silentRefresh: boolean;
-      parentFeed: ZappFeed;
-      callback: () => void;
-      bodyParams: any;
-      riverId: string;
-    }>
-  ) => void;
+  zappPipes: ReturnType<typeof selectZappPipes>;
+  loadPipesData: ReturnType<
+    typeof import("@applicaster/zapp-react-native-utils/reactHooks/feed").useLoadPipesDataDispatch
+  >;
   feedUrl: string;
-  children: (feed: ZappFeed) => React.ComponentType<any>;
+  children: (feed: ZappFeed) => React.ReactNode;
   onFeedLoaded: (feed: ZappFeed) => {};
-  onError: (feed: ZappFeed) => {};
+  onError: (error: ZappPipesData["error"]) => {};
   refreshing: boolean;
   refreshCallback: () => void;
 };

package/Components/FeedLoader/FeedLoaderHOC.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import {
+  selectZappPipes,
+  useAppSelector,
+} from "@applicaster/zapp-react-native-redux";
+import { useLoadPipesDataDispatch } from "@applicaster/zapp-react-native-utils/reactHooks/feed";
+
+export const FeedLoaderHOC = (_Component: any) => {
+  return function FeedLoaderHOC(props: any) {
+    const zappPipes = useAppSelector(selectZappPipes);
+    const loadPipesData = useLoadPipesDataDispatch();
+
+    return (
+      <_Component
+        {...props}
+        zappPipes={zappPipes}
+        loadPipesData={loadPipesData}
+      />
+    );
+  };
+};

package/Components/FeedLoader/index.js

@@ -1,10 +1,4 @@
-import * as R from "ramda";
-
-import { connectToStore } from "@applicaster/zapp-react-native-redux";
-import { loadPipesData } from "@applicaster/zapp-react-native-redux/ZappPipes";
-
 import { FeedLoaderComponent } from "./FeedLoader";
+import { FeedLoaderHOC } from "./FeedLoaderHOC";
 
-export const FeedLoader = connectToStore(R.pick(["zappPipes"]), {
-  loadPipesData,
-})(FeedLoaderComponent);
+export const FeedLoader = FeedLoaderHOC(FeedLoaderComponent);

package/Components/Focusable/Focusable.tsx

@@ -5,6 +5,8 @@ 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 { StyleSheet, ViewStyle } from "react-native";
+import { AccessibilityManager } from "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager";
 
 type Props = {
   initialFocus?: boolean;
@@ -19,15 +21,16 @@ type Props = {
   onPressOut?: () => void;
   onLongPress?: () => void;
   handleFocus?: ({ mouse }: { mouse: boolean }) => void;
-  children: (boolean, string) => React.ComponentType<any>;
+  children: (boolean, string) => React.ReactNode;
   selected?: boolean;
-  style?: React.CSSProperties;
+  style?: ViewStyle[] | ViewStyle;
 };
 
 class Focusable extends BaseFocusable<Props> {
   isGroup: boolean;
   mouse: boolean;
   longPressTimeout = null;
+  accessibilityManager: AccessibilityManager;
 
   constructor(props) {
     super(props);
@@ -42,6 +45,8 @@ 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();
   }
 
   /**
@@ -128,6 +133,9 @@ class Focusable extends BaseFocusable<Props> {
     const id = this.getId();
     const focusableId = `focusable-${id}`;
 
+    const accessibilityProps =
+      this.accessibilityManager.getWebAccessibilityProps(this.props);
+
     return (
       <div
         id={focusableId}
@@ -139,7 +147,8 @@ class Focusable extends BaseFocusable<Props> {
         onMouseUp={this.pressOut}
         data-testid={focusableId}
         focused-teststate={focused ? "focused" : "default"}
-        style={style}
+        style={StyleSheet.flatten(style) as any as React.CSSProperties}
+        {...accessibilityProps}
       >
         {children(focused, { mouse: this.mouse })}
       </div>

package/Components/Focusable/FocusableTvOS.tsx

@@ -16,10 +16,10 @@ function noop() {}
 type Props = {
   id: string;
   groupId: string;
-  onPress?: (nativeEvent: React.SyntheticEvent) => void;
-  onFocus?: (nativeEvent: React.SyntheticEvent) => void;
-  onBlur?: (nativeEvent: React.SyntheticEvent) => void;
-  children: (focused?: boolean) => React.ReactNode;
+  onPress?: (nativeEvent: any) => void;
+  onFocus?: (nativeEvent: any) => void;
+  onBlur?: (nativeEvent: any) => void;
+  children: ((focused?: boolean) => React.ReactNode) | React.ReactNode;
   isParallaxDisabled: boolean;
   preferredFocus?: boolean;
   selected?: boolean;
@@ -204,7 +204,7 @@ export class Focusable extends BaseFocusable<Props> {
         {...this.nextFocusableReactTags}
         {...otherProps}
       >
-        {R.is(Function, children) ? children(focused) : children}
+        {typeof children === "function" ? children(focused) : children}
       </FocusableItemNative>
     );
   }

package/Components/Focusable/FocusableiOS.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 type Props = {
   children: () => React.ReactNode;
-};
+} & Record<string, any>;
 
 function FocusableiOSComponent({ children }: Props) {
   if (typeof children === "function") {
@@ -12,4 +12,4 @@ function FocusableiOSComponent({ children }: Props) {
   return children;
 }
 
-export const FocusableiOS = React.forwardRef(FocusableiOSComponent);
+export const FocusableiOS = FocusableiOSComponent;

package/Components/Focusable/Touchable.tsx

@@ -9,7 +9,8 @@ type Props = {
   onLongPress?: (ref: FocusManager.TouchableRef) => void;
   onFocus?: (
     ref: FocusManager.TouchableRef,
-    options: FocusManager.Android.CallbackOptions
+    options: FocusManager.Android.CallbackOptions,
+    context: Option<FocusManager.FocusContext>
   ) => void;
   onBlur?: (
     ref: FocusManager.TouchableRef,
@@ -39,9 +40,10 @@ export class Touchable extends React.Component<Props> {
 
   onFocus(
     focusableRef: FocusManager.TouchableRef,
-    options: FocusManager.Android.CallbackOptions
+    options: FocusManager.Android.CallbackOptions,
+    context: Option<FocusManager.FocusContext>
   ): void {
-    this.props?.onFocus?.(focusableRef, options);
+    this.props?.onFocus?.(focusableRef, options, context);
   }
 
   onBlur(

package/Components/Focusable/__tests__/index.android.test.tsx

@@ -38,6 +38,9 @@ describe("Focusable", () => {
   });
 
   it("updates disableFocus state when disableFocus prop changes", () => {
+    const unregister = jest.fn();
+    mockFocusManager.registerFocusable.mockReturnValue(unregister);
+
     const { rerender } = render(
       <Focusable id="test-id" disableFocus={false}>
         <Touchable testID="touchable" />

package/Components/Focusable/index.android.tsx

@@ -22,7 +22,8 @@ type Props = {
   onPress?: (ref: FocusManager.FocusableRef) => void;
   onFocus?: (
     ref: FocusManager.FocusableRef,
-    options: FocusManager.Android.CallbackOptions
+    options: FocusManager.Android.CallbackOptions,
+    context?: FocusManager.FocusContext
   ) => void;
   onBlur?: (
     ref: FocusManager.FocusableRef,
@@ -32,6 +33,7 @@ type Props = {
   onPressOut?: (ref: FocusManager.FocusableRef) => void;
   onLongPress?: (ref: FocusManager.FocusableRef) => void;
   onRegister?: () => void;
+  onUnregister?: () => void;
   isFocusableCell?: boolean;
   /** only for FocusableScrollView */
   onSetIsFocusable?: (isFocusable: boolean) => void;
@@ -43,11 +45,13 @@ export const FocusableContext = React.createContext<
     // eslint-disable-next-line
     setIsFocusable: (enableFocus: boolean) => void;
     ref: FocusManager.FocusableRef;
+    parentFocusableId: Option<string>;
   } & ParentFocus
 >({
   focused: false,
   setIsFocusable: () => {},
   ref: { current: null },
+  parentFocusableId: undefined,
 });
 
 export const useFocusable = () => React.useContext(FocusableContext);
@@ -68,13 +72,14 @@ function FocusableComponent(props: Props, forwardedRef) {
     onPressOut,
     onLongPress,
     onRegister = noop,
+    onUnregister = noop,
     isFocusableCell = true,
     onSetIsFocusable,
   } = props;
 
   const isRTL = useIsRTL();
   const focusManager = useFocusManager();
-  const { ref: parentFocusable } = useFocusable();
+  const { ref: parentFocusableRef, parentFocusableId } = useFocusable();
   const touchableRef = React.useRef(null);
 
   const [focused, setFocused] = React.useState(() =>
@@ -98,21 +103,23 @@ function FocusableComponent(props: Props, forwardedRef) {
     }
   }, [disableFocus]);
 
-  React.useEffect(() => {
+  React.useLayoutEffect(() => {
     if (id) {
-      const unregister = focusManager.registerFocusable(
+      const unregister = focusManager.registerFocusable({
         touchableRef,
-        parentFocusable,
-        isFocusableCell
-      );
+        parentFocusableRef,
+        isFocusableCell,
+        parentFocusableId,
+      });
 
       onRegister();
 
       return () => {
         unregister();
+        onUnregister();
       };
     }
-  }, [id, onRegister, isFocusableCell]);
+  }, [id, onRegister, onUnregister, isFocusableCell, parentFocusableId]);
 
   if (R.isNil(id)) {
     // eslint-disable-next-line no-console
@@ -122,9 +129,9 @@ function FocusableComponent(props: Props, forwardedRef) {
   }
 
   const _onFocus = React.useCallback(
-    (ref, options) => {
+    (ref, options, context) => {
       setFocused(true);
-      onFocus?.(ref, options);
+      onFocus?.(ref, options, context);
     },
     [onFocus]
   );
@@ -164,8 +171,9 @@ function FocusableComponent(props: Props, forwardedRef) {
       ...parentFocus,
       ref: touchableRef,
       setIsFocusable,
+      parentFocusableId: id,
     };
-  }, [parentFocus, focused]);
+  }, [parentFocus, focused, id]);
 
   return (
     <Touchable

package/Components/Focusable/index.tsx

@@ -4,7 +4,7 @@ import { FocusableiOS } from "./FocusableiOS";
 
 import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
 
-export const Focusable = platformSelect({
+export const Focusable: React.ComponentType<any> = platformSelect({
   tvos: FocusableTvOS,
   ios: FocusableiOS,
   default: FocusableDefault,

package/Components/FocusableGroup/FocusableTvOS.tsx

@@ -22,7 +22,7 @@ type FocusableGroupNativeEvent = {
 
 type Props = {
   id: string;
-  children: (arg1: boolean) => React.ComponentType<any>;
+  children: React.ReactNode;
   isFocusDisabled: boolean;
   isWithMemory: boolean;
   focusGroupRef: React.Component;

package/Components/FocusableList/FocusableItem.tsx

@@ -10,7 +10,8 @@ type FocusableItemComponentProps = {
   onFocus: (
     element: FocusManager.FocusableRef,
     renderArgs: { item: FocusableItemComponentProps["item"]; index: number },
-    direction: FocusManager.Android.FocusNavigationDirections
+    options: FocusManager.Android.CallbackOptions,
+    context: Option<FocusManager.FocusContext>
   ) => void;
   onListElementFocus?: (any, RenderItemProps, Direction) => void;
   onListElementBlur?: (any, RenderItemProps, Direction) => void;
@@ -45,8 +46,8 @@ const FocusableItemComponent = ({
   const renderArgs = { item, index };
 
   const onFocusHandler = React.useCallback(
-    (element, direction) => {
-      onFocus?.(element, renderArgs, direction);
+    (element, options, context) => {
+      onFocus?.(element, renderArgs, options, context);
     },
     [item, onFocus]
   );

package/Components/FocusableList/FocusableListItemWrapper.tsx

@@ -17,7 +17,8 @@ type Props = {
   onFocus: (
     element: FocusManager.FocusableRef,
     renderArgs: { item: Item; index: number },
-    direction: FocusManager.Android.FocusNavigationDirections
+    options: FocusManager.Android.CallbackOptions,
+    context: FocusManager.FocusContext
   ) => void;
   onListElementBlur?: (any, RenderItemProps, Direction) => void;
   onListElementPress?: (any, RenderItemProps) => void;

package/Components/FocusableList/hooks/useCellState.android.ts

@@ -10,15 +10,25 @@ export const useCellState = (id: string) => {
   );
 
   React.useEffect(() => {
-    const handler = (focusable) => {
+    const focusHandler = (focusable) => {
       const isChildren = focusManager.isFocusableChildOf(focusable, id);
+
       setCurrentCellFocused(isChildren);
     };
 
-    focusManager.on(FOCUS_EVENTS.FOCUS, handler);
+    focusManager.on(FOCUS_EVENTS.FOCUS, focusHandler);
+
+    const resetHandler = ({ focusedId }) => {
+      if (id === focusedId) {
+        setCurrentCellFocused(false);
+      }
+    };
+
+    focusManager.on(FOCUS_EVENTS.RESET, resetHandler);
 
     return () => {
-      focusManager.removeHandler(FOCUS_EVENTS.FOCUS, handler);
+      focusManager.removeHandler(FOCUS_EVENTS.FOCUS, focusHandler);
+      focusManager.removeHandler(FOCUS_EVENTS.RESET, resetHandler);
     };
   }, [id]);
 

package/Components/FocusableList/index.tsx

@@ -20,27 +20,34 @@ import { FocusableScrollView } from "../FocusableScrollView";
 const mapIndexed = R.addIndex(R.map);
 
 export type IListRenderItem<ItemT> = (
-  info: IListRenderItemInfo<ItemT> & {
+  info: {
     focused: boolean;
     onLoadFinished: () => void;
     onLoadFailed: () => void;
-  }
+  } & IListRenderItemInfo<ItemT>
 ) => React.ReactElement | null;
 
 export const getFocusableId = (parentId, index) =>
   `${parentId}___index:${index}`;
 
+type Item = ZappEntry | ZappUIComponent | any;
+
 export type Props<ItemT> = FlatListProps<ItemT> & {
   id?: number | string;
   horizontal?: boolean;
   loop?: boolean;
   numColumns?: number;
   data: ZappEntry[] | ZappUIComponent[] | any[];
-  onListElementFocus?: (any, RenderItemProps, Direction) => void;
-  onListElementBlur?: (any, RenderItemProps, Direction) => void;
-  onListElementPress?: (any, RenderItemProps) => void;
-  onListElementPressOut?: (any, RenderItemProps) => void;
-  onListElementLongPress?: (any, RenderItemProps) => void;
+  onListElementFocus?: (
+    element: FocusManager.FocusableRef,
+    renderItemProps: { item: Item; index: number },
+    options: FocusManager.Android.CallbackOptions,
+    context: FocusManager.FocusContext
+  ) => void;
+  onListElementBlur?: (element, renderItemProps, direction) => void;
+  onListElementPress?: (element, renderItemProps) => void;
+  onListElementPressOut?: (element, renderItemProps) => void;
+  onListElementLongPress?: (element, renderItemProps) => void;
   focusableItemProps?: any;
   focused?: boolean;
   initialScrollIndex?: number;
@@ -91,6 +98,7 @@ function FocusableListComponent<ItemT>(props: Props<ItemT>, ref) {
     // eslint-disable-next-line unused-imports/no-unused-vars
     omitPropsPropagation = [],
     useScrollView = false,
+    onScrollToIndexFailed = noop,
   } = props;
 
   useCheckItemIdsForUnique({ componentId: props.id, items: data });
@@ -137,11 +145,11 @@ function FocusableListComponent<ItemT>(props: Props<ItemT>, ref) {
   );
 
   const onFocus = React.useCallback(
-    (element, renderArgs, direction) => {
+    (element, renderArgs, options, context) => {
       const { index } = renderArgs;
 
       updateFocusedIndex?.(index);
-      onListElementFocus?.(element, renderArgs, direction);
+      onListElementFocus?.(element, renderArgs, options, context);
     },
     [onListElementFocus, updateFocusedIndex]
   );
@@ -277,6 +285,7 @@ function FocusableListComponent<ItemT>(props: Props<ItemT>, ref) {
         "withStateMemory",
         "useSequentialLoading",
         "useScrollView",
+        "onScrollToIndexFailed",
         ...omitPropsPropagation,
       ],
       R.__
@@ -305,6 +314,7 @@ function FocusableListComponent<ItemT>(props: Props<ItemT>, ref) {
           {...getFlatListProps(props)}
           onEndReached={onEndReached}
           initialNumToRender={initialNumToRender}
+          onScrollToIndexFailed={onScrollToIndexFailed}
           renderItem={renderItem}
           focused={focused}
           data={data}
@@ -319,6 +329,7 @@ function FocusableListComponent<ItemT>(props: Props<ItemT>, ref) {
           renderItem={renderItem}
           onEndReached={onEndReached}
           initialNumToRender={initialNumToRender}
+          onScrollToIndexFailed={onScrollToIndexFailed}
         />
       )}
     </ChildrenFocusDeactivatorView>