@applicaster/zapp-react-native-ui-components 15.0.0-alpha.4254682703 → 15.0.0-alpha.4374322811

package/Components/BaseFocusable/index.ios.ts

@@ -22,6 +22,7 @@ type Props = {
   onFocus?: FocusManager.FocusEventCB;
   onBlur?: FocusManager.FocusEventCB;
   selected?: boolean;
+  skipFocusManagerRegistration?: boolean;
 };
 
 export class BaseFocusable<
@@ -61,10 +62,14 @@ export class BaseFocusable<
   }
 
   componentDidMount() {
-    const { id } = this.props;
+    const { id, skipFocusManagerRegistration } = this.props;
     const component = this;
     this.node = this.ref.current;
 
+    if (skipFocusManagerRegistration) {
+      return;
+    }
+
     focusManager.register({
       id,
       component: component,
@@ -118,7 +123,12 @@ export class BaseFocusable<
 
   componentWillUnmount() {
     this._isMounted = false;
-    const { id } = this.props;
+    const { id, skipFocusManagerRegistration } = this.props;
+
+    if (skipFocusManagerRegistration) {
+      return;
+    }
+
     focusManager.unregister(id, { group: this.isGroup || false });
   }
 

package/Components/Cell/Cell.tsx

@@ -208,14 +208,14 @@ export class CellComponent extends React.Component<Props, State> {
       this.accessibilityManager.readText({
         text: " ",
       });
-    } else {
+    } else if (this.state.cellFocused) {
       this.accessibilityManager.readText({
         text: `${positionLabel}`,
       });
     }
   }
 
-  componentDidUpdate(prevProps: Readonly<Props>) {
+  componentDidUpdate(prevProps: Readonly<Props>, prevState: Readonly<State>) {
     if (prevProps.item !== this.props.item) {
       this.setState({
         hasFocusableInside: this.props.CellRenderer.hasFocusableInside?.(
@@ -224,7 +224,12 @@ export class CellComponent extends React.Component<Props, State> {
       });
     }
 
-    this.handleAccessibilityFocus(this.props.index, this.props.dataLength);
+    if (
+      prevState.cellFocused !== this.state.cellFocused ||
+      this.state.hasFocusableInside
+    ) {
+      this.handleAccessibilityFocus(this.props.index, this.props.dataLength);
+    }
   }
 
   render() {

package/Components/Cell/FocusableWrapper.tsx

@@ -10,6 +10,7 @@ type Props = {
   children: (focused: boolean) => React.ReactNode;
   onFocus: (arg1: any, index?: number) => void;
   onBlur: Callback;
+  skipFocusManagerRegistration?: boolean;
 };
 
 export const FocusableWrapper = ({
@@ -20,6 +21,7 @@ export const FocusableWrapper = ({
   applyWrapper,
   onFocus,
   onBlur,
+  skipFocusManagerRegistration,
 }: Props) => {
   if (applyWrapper) {
     return (
@@ -34,6 +36,7 @@ export const FocusableWrapper = ({
         // @ts-ignore
         offsetUpdater={noop}
         isFocusable
+        skipFocusManagerRegistration={skipFocusManagerRegistration}
       >
         {(focused) => children(focused)}
       </Focusable>

package/Components/Cell/TvOSCellComponent.tsx

@@ -40,6 +40,7 @@ type Props = {
     component_type: string;
     styles?: {
       component_margin_top?: number;
+      component_padding_top?: number;
     };
   };
   selected: boolean;
@@ -79,6 +80,7 @@ type Props = {
   componentsMapOffset: number;
   applyFocusableWrapper: boolean;
   hasFocusableInside: boolean;
+  skipFocusManagerRegistration?: boolean;
 };
 
 type State = {
@@ -205,19 +207,25 @@ class TvOSCell extends React.Component<Props, State> {
     ) {
       const { headerOffset } = getHeaderOffset();
 
-      const extraAnchorPointYOffset =
-        screenLayout?.extraAnchorPointYOffset || 0;
+      const extraAnchorPointYOffset = toNumberWithDefaultZero(
+        screenLayout?.extraAnchorPointYOffset
+      );
 
       const componentMarginTop = toNumberWithDefaultZero(
         component?.styles?.component_margin_top
       );
 
+      const componentPaddingTop = toNumberWithDefaultZero(
+        component?.styles?.component_padding_top
+      );
+
       const totalOffset =
         headerOffset +
-        (componentAnchorPointY || 0) +
+        toNumberWithDefaultZero(componentAnchorPointY) +
         extraAnchorPointYOffset -
-        (componentsMapOffset || 0) +
-        componentMarginTop;
+        toNumberWithDefaultZero(componentsMapOffset) +
+        componentMarginTop +
+        componentPaddingTop;
 
       mainOffsetUpdater?.(
         { tag: this.target },
@@ -259,6 +267,7 @@ class TvOSCell extends React.Component<Props, State> {
       behavior,
       applyFocusableWrapper,
       hasFocusableInside,
+      skipFocusManagerRegistration,
     } = this.props;
 
     const { id } = item;
@@ -284,6 +293,7 @@ class TvOSCell extends React.Component<Props, State> {
             onFocus={handleFocus}
             onBlur={onBlur || this.onBlur}
             applyWrapper={applyFocusableWrapper}
+            skipFocusManagerRegistration={skipFocusManagerRegistration}
           >
             {(focused) => (
               <CellWithFocusable
@@ -298,6 +308,7 @@ class TvOSCell extends React.Component<Props, State> {
                 focused={focused || this.props.focused}
                 behavior={behavior}
                 isFocusable={isFocusable}
+                skipFocusManagerRegistration={skipFocusManagerRegistration}
               />
             )}
           </FocusableWrapper>
@@ -320,6 +331,7 @@ class TvOSCell extends React.Component<Props, State> {
           offsetUpdater={offsetUpdater}
           style={baseCellStyles}
           isFocusable={isFocusable}
+          skipFocusManagerRegistration={skipFocusManagerRegistration}
         >
           {(focused) => (
             <FocusableCell

package/Components/Focusable/Focusable.tsx

@@ -8,6 +8,8 @@ import { withFocusableContext } from "../../Contexts/FocusableGroupContext/withF
 import { StyleSheet, ViewStyle } from "react-native";
 import { AccessibilityManager } from "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager";
 
+import { isSearchInputId } from "@applicaster/zapp-react-native-utils/searchUtils";
+
 type Props = {
   initialFocus?: boolean;
   id: string;
@@ -106,7 +108,7 @@ class Focusable extends BaseFocusable<Props> {
   onMouseEnter() {
     const { id } = this.props;
 
-    if (id !== "search_input_group_id") {
+    if (!isSearchInputId(id)) {
       this.mouse = true;
       this.props?.handleFocus?.({ mouse: true });
 
@@ -120,7 +122,7 @@ class Focusable extends BaseFocusable<Props> {
   onMouseLeave() {
     const { id } = this.props;
 
-    if (id !== "search_input_group_id") {
+    if (!isSearchInputId(id)) {
       this.mouse = false;
       this.blur(null);
     }

package/Components/Focusable/FocusableTvOS.tsx

@@ -10,8 +10,12 @@ import {
   forceFocusableFocus,
 } from "@applicaster/zapp-react-native-utils/appUtils/focusManager/index.ios";
 import { findNodeHandle, ViewStyle } from "react-native";
+import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
 
-function noop() {}
+import {
+  emitFocused,
+  emitNativeRegistered,
+} from "@applicaster/zapp-react-native-utils/appUtils/focusManagerAux/utils/utils.ios";
 
 type Props = {
   id: string;
@@ -39,6 +43,7 @@ type Props = {
   hasReceivedFocus: () => void;
   offsetUpdater: (arg1: string, arg2: number) => number;
   style: ViewStyle;
+  skipFocusManagerRegistration?: boolean;
 };
 
 export class Focusable extends BaseFocusable<Props> {
@@ -53,6 +58,7 @@ export class Focusable extends BaseFocusable<Props> {
     this.nextFocusableReactTags = {};
     this.preferredFocus = this.preferredFocus.bind(this);
     this.measureView = this.measureView.bind(this);
+    this.onRegistered = this.onRegistered.bind(this);
   }
 
   /**
@@ -84,6 +90,9 @@ export class Focusable extends BaseFocusable<Props> {
       });
     }
 
+    const id: string = nativeEvent.itemID;
+    emitFocused(id);
+
     onFocus(nativeEvent);
   }
 
@@ -169,6 +178,13 @@ export class Focusable extends BaseFocusable<Props> {
     });
   }
 
+  onRegistered({ nativeEvent }) {
+    const groupId = nativeEvent?.groupId;
+    const id = nativeEvent?.itemId;
+
+    emitNativeRegistered({ id, groupId, isGroup: false });
+  }
+
   render() {
     const {
       children,
@@ -203,6 +219,7 @@ export class Focusable extends BaseFocusable<Props> {
         focusable={isFocusable}
         {...this.nextFocusableReactTags}
         {...otherProps}
+        onRegistered={this.onRegistered}
       >
         {typeof children === "function" ? children(focused) : children}
       </FocusableItemNative>

package/Components/Focusable/__tests__/__snapshots__/FocusableTvOS.test.tsx.snap

@@ -5,6 +5,7 @@ exports[`FocusableTvOS should render correctly 1`] = `
   groupId={null}
   itemId={null}
   onLayout={[Function]}
+  onRegistered={[Function]}
   onViewBlur={[Function]}
   onViewFocus={[Function]}
   onViewPress={[Function]}

package/Components/FocusableGroup/FocusableTvOS.tsx

@@ -2,6 +2,10 @@ import * as React from "react";
 import { FocusableGroupNative } from "@applicaster/zapp-react-native-ui-components/Components/NativeFocusables";
 import { BaseFocusable } from "@applicaster/zapp-react-native-ui-components/Components/BaseFocusable";
 import { createLogger } from "@applicaster/zapp-react-native-utils/logger";
+import { LayoutContext } from "@applicaster/zapp-react-native-tvos-app/Context/LayoutContext";
+import { useRoute } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useRoute";
+import { isScreenPlayable } from "@applicaster/zapp-react-native-utils/navigationUtils/itemTypes";
+import { emitNativeRegistered } from "@applicaster/zapp-react-native-utils/appUtils/focusManagerAux/utils/utils.ios";
 
 const { log_verbose } = createLogger({
   subsystem: "General",
@@ -33,7 +37,16 @@ type Props = {
   screenData: { screenId: string; parentScreenId: string };
 };
 
-export class FocusableGroup extends BaseFocusable<Props> {
+class FocusableGroupComponent extends BaseFocusable<Props> {
+  public readonly isGroup: boolean = true;
+
+  onRegistered = ({ nativeEvent }) => {
+    const groupId = nativeEvent?.groupId;
+    const id = nativeEvent?.itemId;
+
+    emitNativeRegistered({ id, groupId, isGroup: true });
+  };
+
   render() {
     const {
       children,
@@ -66,9 +79,27 @@ export class FocusableGroup extends BaseFocusable<Props> {
         onGroupBlur={onGroupBlur}
         style={style}
         {...otherProps}
+        onRegistered={this.onRegistered}
       >
         {children}
       </FocusableGroupNative>
     );
   }
 }
+
+export const withFocusDisabled = (Component) => {
+  return function WithFocusDisabled(props) {
+    // @ts-ignore
+    const { screenFocusBlocked } = React.useContext(LayoutContext.ReactContext);
+
+    const { pathname } = useRoute();
+
+    const isPlayerPresented = isScreenPlayable(pathname);
+
+    const blockScreenFocus = isPlayerPresented === false && screenFocusBlocked;
+
+    return <Component {...props} isFocusDisabled={blockScreenFocus} />;
+  };
+};
+
+export const FocusableGroup = withFocusDisabled(FocusableGroupComponent);

package/Components/GeneralContentScreen/utils/useCurationAPI.ts

@@ -1,4 +1,4 @@
-import { all, equals, path, prop, isEmpty, pluck, values } from "ramda";
+import { all, equals, isEmpty, path, pluck, prop, values } from "ramda";
 
 import { useEffect, useMemo } from "react";
 
@@ -24,6 +24,7 @@ import {
 
 import { produce } from "immer";
 import { useLoadPipesDataDispatch } from "@applicaster/zapp-react-native-utils/reactHooks";
+
 // types reference
 
 declare interface CurationEntry {
@@ -35,6 +36,7 @@ type Feeds = Record<string, ZappPipesData>;
 
 type LayoutPresets = PresetsMapping["presets_mappings"];
 
+const TABS_SCREEN_TYPE = "tabs_screen";
 const SMART_COMPONENT_TYPE = "quick-brick-smart-component";
 const SOURCE_PATH = ["data", "source"];
 const MAPPING_PATH = ["data", "mapping"];
@@ -53,7 +55,10 @@ export const getTransformedPreset = (
   const presetComponent = layoutPresets?.[preset?.preset_name];
 
   if (!presetComponent) {
-    logger.log_error("Preset missing or wrong data format", { entry: preset });
+    logger.log_error(
+      `Preset "${preset?.preset_name}" missing or wrong data format`,
+      { entry: preset }
+    );
 
     return;
   }
@@ -131,10 +136,16 @@ export const useCurationAPI = (
   );
 
   const { pathname } = useRoute();
-  const [entryContext] = ZappPipesEntryContext.useZappPipesContext(pathname);
   const [searchContext] = ZappPipesSearchContext.useZappPipesContext();
   const [screenContext] = ZappPipesScreenContext.useZappPipesContext();
 
+  const isNestedScreen = screenContext?.type === TABS_SCREEN_TYPE;
+
+  const [entryContext] = ZappPipesEntryContext.useZappPipesContext(
+    pathname,
+    isNestedScreen
+  );
+
   const urlsMap = useMemo<{ [key: string]: string }>(() => {
     const map = {};
 

package/Components/HandlePlayable/HandlePlayable.tsx

@@ -1,9 +1,14 @@
 import * as React from "react";
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+import {
+  useAppData,
+  useContentTypes,
+  usePlugins,
+} from "@applicaster/zapp-react-native-redux/hooks";
 import {
   useDimensions,
   useIsTablet as isTablet,
   useNavigation,
+  useRivers,
 } from "@applicaster/zapp-react-native-utils/reactHooks";
 
 import { BufferAnimation } from "../PlayerContainer/BufferAnimation";
@@ -39,12 +44,10 @@ export function HandlePlayable({
   mode,
   groupId,
 }: Props): React.ReactElement | null {
-  const { plugins, contentTypes, rivers, appData } = usePickFromState([
-    "plugins",
-    "contentTypes",
-    "rivers",
-    "appData",
-  ]);
+  const plugins = usePlugins();
+  const contentTypes = useContentTypes();
+  const rivers = useRivers();
+  const appData = useAppData();
 
   const { closeVideoModal } = useNavigation();
 

package/Components/Layout/TV/LayoutBackground.tsx

@@ -1,7 +1,10 @@
 import React from "react";
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import { getBackgroundImageUrl } from "../utils";
 import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
+import {
+  selectRemoteConfigurations,
+  useAppSelector,
+} from "@applicaster/zapp-react-native-redux";
 
 export const LayoutBackground = ({
   Background,
@@ -12,7 +15,7 @@ export const LayoutBackground = ({
 }) => {
   const theme = useTheme();
 
-  const { remoteConfigurations } = usePickFromState(["remoteConfigurations"]);
+  const remoteConfigurations = useAppSelector(selectRemoteConfigurations);
 
   const backgroundColor = theme.app_background_color;
   const backgroundImageUrl = getBackgroundImageUrl(remoteConfigurations);

package/Components/Layout/TV/ScreenContainer.tsx

@@ -18,7 +18,7 @@ import {
   routeIsPlayerScreen,
 } from "@applicaster/zapp-react-native-utils/navigationUtils";
 import { isApplePlatform } from "@applicaster/zapp-react-native-utils/reactUtils";
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+import { usePlugins } from "@applicaster/zapp-react-native-redux/hooks";
 import { NavBarContainer } from "./NavBarContainer";
 
 type ComponentsExtraProps = {
@@ -111,11 +111,7 @@ export const ScreenContainer = React.memo(function ScreenContainer({
   const { activeRiver } = navigator;
   const { title, visible } = useNavbarState();
 
-  const { plugins = [] } = usePickFromState([
-    "appState",
-    "remoteConfigurations",
-    "plugins",
-  ]);
+  const plugins = usePlugins();
 
   const navigationProps = getNavigationProps({
     navigator,

package/Components/Layout/TV/index.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+import { useAppSelector } from "@applicaster/zapp-react-native-redux/hooks";
 import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
 
 import { LayoutContainer } from "./LayoutContainer";
@@ -10,6 +10,7 @@ import { PathnameContext } from "../../../Contexts/PathnameContext";
 import { ScreenDataContext } from "../../../Contexts/ScreenDataContext";
 import { ScreenContextProvider } from "../../../Contexts/ScreenContext";
 import { LayoutBackground } from "./LayoutBackground";
+import { selectAppReady } from "@applicaster/zapp-react-native-redux";
 
 type Components = {
   NavBar: React.ComponentType<any>;
@@ -29,9 +30,7 @@ type Props = {
 const Layout = ({ Components, ComponentsExtraProps, children }: Props) => {
   const navigator = useNavigation();
 
-  const { appState: { appReady = false } = {} } = usePickFromState([
-    "appState",
-  ]);
+  const appReady = useAppSelector(selectAppReady);
 
   if (!appReady) {
     return null;

package/Components/Layout/TV/index.web.tsx

@@ -1,11 +1,11 @@
 import * as React from "react";
-import { pathOr } from "ramda";
 
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+import { useAppSelector } from "@applicaster/zapp-react-native-redux/hooks";
 
 import { ScreenLayoutContextProvider } from "./ScreenLayoutContextProvider";
 import { StackNavigator } from "../../Navigator";
 import { LayoutBackground } from "./LayoutBackground";
+import { selectAppReady } from "@applicaster/zapp-react-native-redux";
 
 type Components = {
   NavBar: React.ComponentType<any>;
@@ -17,8 +17,7 @@ type Props = {
 };
 
 const Layout = ({ Components }: Props) => {
-  const { appState } = usePickFromState(["appState"]);
-  const appReady = pathOr(false, ["appReady"], appState);
+  const appReady = useAppSelector(selectAppReady);
 
   if (!appReady) {
     return null;

package/Components/LinkHandler/LinkHandler.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import * as R from "ramda";
 
 import { findPluginByIdentifier } from "@applicaster/zapp-react-native-utils/pluginUtils";
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+import { usePlugins } from "@applicaster/zapp-react-native-redux/hooks";
 import {
   inflateString,
   objectToReadableString,
@@ -40,7 +40,7 @@ export async function inflateUrl(url) {
 
 export function LinkHandler(props: Props) {
   const screenData = props?.screenData;
-  const { plugins } = usePickFromState(["rivers", "plugins"]);
+  const plugins = usePlugins();
 
   const ScreenPlugin = findPluginByIdentifier(
     WEBVIEW_SCREEN_IDENTIFIER,

package/Components/MasterCell/DefaultComponents/BorderContainerView/__tests__/index.test.tsx

@@ -1,8 +1,8 @@
+import * as React from "react";
 import {
   BorderContainerView,
   getBorderPadding, // Export for testing (using a double underscore prefix is a common convention)
 } from "../index";
-import * as React from "react";
 import { render } from "@testing-library/react-native";
 import { toNumberWithDefaultZero } from "@applicaster/zapp-react-native-utils/numberUtils";
 import { View } from "react-native";
@@ -11,6 +11,15 @@ jest.mock("@applicaster/zapp-react-native-utils/numberUtils", () => ({
   toNumberWithDefaultZero: jest.fn((value) => Number(value) || 0),
 }));
 
+jest.mock(
+  "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager/hooks",
+  () => ({
+    useAccessibilityManager: jest.fn(() => ({
+      addHeading: jest.fn(),
+    })),
+  })
+);
+
 describe("BorderContainerView", () => {
   describe("getBorderPadding", () => {
     it("returns 0 for inside", () => {
@@ -42,6 +51,8 @@ describe("BorderContainerView", () => {
     };
 
     const borderPosition = null;
+    const mockEntry = { id: "test-entry" } as ZappEntry;
+    const mockHasFocusableInside = jest.fn(() => false);
 
     const { queryByTestId } = render(
       <BorderContainerView
@@ -52,6 +63,10 @@ describe("BorderContainerView", () => {
         borderPaddingRight={toNumberWithDefaultZero(padding.paddingRight)}
         borderPaddingBottom={toNumberWithDefaultZero(padding.paddingBottom)}
         borderPaddingLeft={toNumberWithDefaultZero(padding.paddingLeft)}
+        hasFocusableInside={mockHasFocusableInside}
+        entry={mockEntry}
+        state="focused"
+        hasTextLabels={false}
       >
         <View testID="child" />
       </BorderContainerView>

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

@@ -1,10 +1,16 @@
-import { toNumberWithDefaultZero } from "@applicaster/zapp-react-native-utils/numberUtils";
-import * as React from "react";
+import React, { useMemo, useContext, useEffect } from "react";
 import { ImageStyle, StyleSheet, View, ViewStyle } from "react-native";
+import { useAccessibilityManager } from "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager/hooks";
+import { toNumberWithDefaultZero } from "@applicaster/zapp-react-native-utils/numberUtils";
+import { MeasurementPortalContext } from "../../../MeasurmentsPortal/MeasurementsPortal";
 
 type BorderPosition = "inside" | "outside" | "center";
 
 interface Props {
+  hasFocusableInside: (entry: ZappEntry) => boolean;
+  entry: ZappEntry;
+  state: CellState;
+  hasTextLabels: boolean;
   style: ImageStyle | ViewStyle;
   borderPosition: BorderPosition;
   borderPaddingTop: number;
@@ -118,8 +124,30 @@ export const BorderContainerView = (props: Props) => {
     borderPaddingLeft,
     style,
     children,
+    hasFocusableInside,
+    entry,
+    state,
+    hasTextLabels,
   } = props;
 
+  const accessibilityManager = useAccessibilityManager();
+  const isMeasurement = useContext(MeasurementPortalContext);
+
+  const isImageOnlyCell = useMemo(
+    () =>
+      state === "focused" &&
+      !hasTextLabels &&
+      !isMeasurement?.measuringInProgress &&
+      !hasFocusableInside(entry),
+    [entry, hasTextLabels, state, isMeasurement?.measuringInProgress]
+  );
+
+  useEffect(() => {
+    if (isImageOnlyCell && entry?.title) {
+      accessibilityManager.addHeading(String(entry.title));
+    }
+  }, [isImageOnlyCell, entry?.title]);
+
   const padding =
     borderPosition === "outside"
       ? {

package/Components/MasterCell/DefaultComponents/Image/Image.android.tsx

@@ -32,6 +32,7 @@ export default function Image({
   placeholderImage,
   entry,
   withDimensions,
+  source: sourceProp,
   ...otherProps
 }: Props) {
   const [showDefault, setShowDefault] = React.useState(false);
@@ -48,7 +49,10 @@ export default function Image({
     entry,
     showDefault,
     placeholderImage: placeholderImage || "",
-    otherProps,
+    otherProps: {
+      source: sourceProp,
+      state: otherProps.state,
+    },
   });
 
   const onError = React.useCallback(() => {

package/Components/MasterCell/DefaultComponents/Image/Image.ios.tsx

@@ -1,8 +1,8 @@
 import * as React from "react";
 import { Image as RnImage, ImageStyle } from "react-native";
-import { equals, omit } from "ramda";
 
 import { useImageSource } from "./hooks";
+import { equals } from "@applicaster/zapp-react-native-utils/utils";
 
 type Source = {
   uri: string;
@@ -25,11 +25,19 @@ function Image({
   placeholderImage,
   entry,
   withDimensions,
+  source: sourceProp,
   ...otherProps
 }: Props) {
   const [error, setErrorState] = React.useState(null);
 
-  const source = useImageSource({ uri, entry, otherProps });
+  const source = useImageSource({
+    uri,
+    entry,
+    otherProps: {
+      source: sourceProp,
+      state: otherProps.state,
+    },
+  });
 
   React.useEffect(() => {
     // reset error state on URI change as the error is referencing previous uri
@@ -49,7 +57,7 @@ function Image({
       onError={React.useCallback(() => setErrorState(true), [])}
       // as we have defaults as "" for placeholder image, we need to pass undefined to source to not throw warnings
       source={_source?.uri ? _source : undefined}
-      {...omit(["source"], otherProps)}
+      {...otherProps}
     />
   );
 }