@applicaster/zapp-react-native-ui-components 15.1.0-rc.9 → 16.0.0-alpha.1740103407

package/Components/PlayerContainer/__tests__/PlayerContainer.test.tsx

@@ -0,0 +1,284 @@
+import * as React from "react";
+import { render } from "@testing-library/react-native";
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/appUtils/playerManager",
+  () => ({
+    playerManager: {
+      invokeHandler: jest.fn(),
+      getPluginConfiguration: jest.fn(() => ({})),
+      isRegistered: jest.fn(() => true),
+      on: jest.fn().mockReturnThis(),
+      removeHandler: jest.fn().mockReturnThis(),
+      getActivePlayer: jest.fn(() => null),
+      closeNativePlayer: jest.fn(),
+    },
+  })
+);
+
+jest.mock("@applicaster/zapp-react-native-utils/reactUtils", () => ({
+  isTV: jest.fn(() => false),
+  isAndroidTVPlatform: jest.fn(() => false),
+  isTvOSPlatform: jest.fn(() => false),
+  platformSelect: jest.fn(({ native }) => native),
+}));
+
+jest.mock("@applicaster/zapp-react-native-utils/playerUtils", () => ({
+  isAudioItem: jest.fn(() => false),
+  isInlineTV: jest.fn(() => false),
+}));
+
+jest.mock(
+  "@applicaster/zapp-react-native-tvos-ui-components/Components/TVEventHandlerComponent",
+  () => ({
+    TVEventHandlerComponent: ({ children }) => children,
+  })
+);
+
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/utils", () => ({
+  usePrevious: jest.fn(),
+}));
+
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks", () => {
+  const navigator = {
+    closeVideoModal: jest.fn(),
+    minimiseVideoModal: jest.fn(),
+    maximiseVideoModal: jest.fn(),
+    fullscreenVideoModal: jest.fn(),
+    isVideoModalDocked: jest.fn(() => false),
+    goBack: jest.fn(),
+    replaceTop: jest.fn(),
+    push: jest.fn(),
+    setPlayNextOverlay: jest.fn(),
+    currentRoute: "/playable/entry-1",
+  };
+
+  const backHandlerRef: { current: (() => boolean) | null } = {
+    current: null,
+  };
+
+  return {
+    useBackHandler: jest.fn((cb) => {
+      backHandlerRef.current = cb;
+    }),
+    useNavigation: jest.fn(() => navigator),
+    __navigator: navigator,
+    __backHandlerRef: backHandlerRef,
+  };
+});
+
+jest.mock("@applicaster/zapp-react-native-bridge/QuickBrick", () => ({
+  QUICK_BRICK_EVENTS: {
+    IDLE_TIMER_DISABLED: "IDLE_TIMER_DISABLED",
+    MOVE_APP_TO_BACKGROUND: "MOVE_APP_TO_BACKGROUND",
+  },
+  sendQuickBrickEvent: jest.fn(),
+}));
+
+jest.mock("../ProgramInfo", () => ({
+  ProgramInfo: () => null,
+}));
+
+jest.mock("../../AudioPlayer", () => ({
+  AudioPlayer: () => null,
+}));
+
+jest.mock("../logger", () => ({
+  log_debug: jest.fn(),
+  log_info: jest.fn(),
+  log_warning: jest.fn(),
+  playerContainerLogger: { error: jest.fn() },
+}));
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayer",
+  () => {
+    const player = {
+      addListener: jest.fn(),
+      removeListener: jest.fn(),
+      isPaused: jest.fn(() => false),
+      isAd: jest.fn(() => false),
+      seekTo: jest.fn(),
+      getPluginConfiguration: jest.fn(() => ({})),
+      getOverlayObservable: jest.fn(() => ({ getPlayNextEntry: () => null })),
+    };
+
+    return {
+      usePlayer: jest.fn(() => player),
+      __player: player,
+    };
+  }
+);
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayNextOverlay",
+  () => ({
+    usePlayNextOverlay: jest.fn(() => null),
+  })
+);
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/appUtils/playerManager/playerNativeCommand",
+  () => ({
+    PlayerNativeCommandTypes: { clearPlayerData: "clearPlayerData" },
+    PlayerNativeSendCommand: jest.fn(),
+  })
+);
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext",
+  () => ({
+    useSetNavbarState: jest.fn(() => ({ setVisible: jest.fn() })),
+  })
+);
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/reactHooks/screen/useTargetScreenData",
+  () => ({
+    useTargetScreenData: jest.fn(() => ({ id: "screen-id", styles: {} })),
+  })
+);
+
+jest.mock("../PlayerContainerContext", () => {
+  const ReactActual = require("react");
+
+  return {
+    PlayerContainerContext: ReactActual.createContext({
+      isLanguageOverlayVisible: false,
+      bottomFocusableId: "bottom",
+      showComponentsContainer: false,
+      refs: null,
+    }),
+    PlayerContainerContextProvider: ({ children }) => children,
+  };
+});
+
+jest.mock(
+  "@applicaster/zapp-react-native-ui-components/Components/FocusableGroup",
+  () => ({
+    FocusableGroup: ({ children }) => children,
+  })
+);
+
+jest.mock("../WappersView/PlayerFocusableWrapperView", () => ({
+  PlayerFocusableWrapperView: ({ children }) => children,
+}));
+
+jest.mock("../WappersView/ComponentFocusableWrapperView", () => ({
+  ComponentFocusableWrapperView: () => null,
+}));
+
+jest.mock("../index", () => ({
+  FocusableGroupMainContainerId: "player-container-general",
+}));
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/navigationUtils/itemTypeMatchers",
+  () => ({
+    isPlayable: jest.fn(() => true),
+  })
+);
+
+jest.mock("../../GeneralContentScreen", () => ({
+  GeneralContentScreen: () => null,
+}));
+
+jest.mock("@applicaster/zapp-react-native-redux", () => ({
+  useAppData: jest.fn(() => ({ isTabletPortrait: false })),
+}));
+
+import { PlayerContainer, VideoModalMode } from "../PlayerContainer";
+
+const { __navigator: mockNavigator, __backHandlerRef: mockBackHandlerRef } =
+  jest.requireMock("@applicaster/zapp-react-native-utils/reactHooks");
+
+const { playerManager: mockPlayerManager } = jest.requireMock(
+  "@applicaster/zapp-react-native-utils/appUtils/playerManager"
+);
+
+const { __player: mockPlayer } = jest.requireMock(
+  "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayer"
+);
+
+const Player = React.forwardRef(() => null);
+
+const item = {
+  id: "entry-1",
+  title: "Test entry",
+  summary: "",
+  content: { src: "https://example.com/video.m3u8" },
+  extensions: {},
+} as any;
+
+const renderPlayerContainer = (props = {}) =>
+  render(
+    <PlayerContainer
+      Player={Player}
+      item={item}
+      style={{}}
+      loadPipesData={jest.fn()}
+      isModal={true}
+      mode={VideoModalMode.MAXIMIZED}
+      {...props}
+    />
+  );
+
+const pressHardwareBack = () => {
+  if (!mockBackHandlerRef.current) {
+    throw new Error("back handler was not registered via useBackHandler");
+  }
+
+  return mockBackHandlerRef.current();
+};
+
+describe("PlayerContainer hardware back handling", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockBackHandlerRef.current = null;
+    mockPlayer.getPluginConfiguration.mockReturnValue({});
+    mockPlayer.isPaused.mockReturnValue(false);
+    mockPlayer.isAd.mockReturnValue(false);
+
+    mockPlayer.getOverlayObservable.mockReturnValue({
+      getPlayNextEntry: () => null,
+    });
+
+    mockPlayerManager.getPluginConfiguration.mockReturnValue({});
+    mockPlayerManager.on.mockReturnThis();
+    mockPlayerManager.removeHandler.mockReturnThis();
+  });
+
+  it("minimises the video modal on back press when mini player is enabled", () => {
+    renderPlayerContainer();
+
+    const handled = pressHardwareBack();
+
+    expect(mockNavigator.minimiseVideoModal).toHaveBeenCalled();
+    expect(mockNavigator.closeVideoModal).not.toHaveBeenCalled();
+    expect(handled).toBe(true);
+  });
+
+  it("closes the video modal on back press when mini player is disabled", () => {
+    mockPlayer.getPluginConfiguration.mockReturnValue({
+      disable_mini_player_when_inline: true,
+    });
+
+    renderPlayerContainer();
+
+    const handled = pressHardwareBack();
+
+    expect(mockNavigator.closeVideoModal).toHaveBeenCalled();
+    expect(mockNavigator.minimiseVideoModal).not.toHaveBeenCalled();
+    expect(handled).toBe(true);
+  });
+
+  it("does not handle back press when the player is already minimised", () => {
+    renderPlayerContainer({ mode: VideoModalMode.MINIMIZED });
+
+    const handled = pressHardwareBack();
+
+    expect(handled).toBe(false);
+    expect(mockNavigator.minimiseVideoModal).not.toHaveBeenCalled();
+    expect(mockNavigator.closeVideoModal).not.toHaveBeenCalled();
+  });
+});

package/Components/River/ComponentsMap/ComponentsMap.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import * as R from "ramda";
-import { FlatList, StyleSheet, View } from "react-native";
+import { FlatList, ScrollView, ScrollViewProps, View } from "react-native";
 import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 import { RiverItem } from "../RiverItem";
 import { RiverFooter } from "../RiverFooter";
@@ -36,20 +36,16 @@ type Props = {
   groupId?: string;
   isScreenWrappedInContainer?: boolean;
   riverComponents: ZappUIComponent[];
-  scrollViewExtraProps?: {};
+  scrollViewExtraProps?: Partial<ScrollViewProps>;
   riverId?: string;
-  getStaticComponentFeed: any;
-  pullToRefreshPipesV1RefreshingStateUpdater: () => boolean;
-  refreshingPipesV1?: boolean;
+  getStaticComponentFeed: (args: {
+    component: ZappUIComponent;
+    index: number;
+  }) => ZappFeed | Promise<ZappFeed>;
   stickyHeaderIndices?: number[];
+  useScrollView?: boolean;
 };
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-});
-
 const getNearestValue = (value, optionA, optionB) =>
   Math.abs(value - optionA) < Math.abs(value - optionB) ? optionA : optionB;
 
@@ -65,16 +61,15 @@ function ComponentsMapComponent(props: Props) {
     groupId,
     riverId,
     getStaticComponentFeed,
-    // Method added to keep pipes v1 logic up to date with the pullToRefresh state.
-    // TODO: Remove when pipes v1 is deprecated.
-    pullToRefreshPipesV1RefreshingStateUpdater,
-    refreshingPipesV1,
     stickyHeaderIndices,
+    useScrollView,
   } = props;
 
   const flatListRef = React.useRef<FlatList | null>(null);
+  const scrollViewRef = React.useRef<ScrollView | null>(null);
   const flatListWrapperRef = React.useRef<View | null>(null);
   const hasUserScrolledRef = React.useRef(false);
+  const scrollEndReachedRef = React.useRef(false);
   const screenConfig = useScreenConfiguration(riverId);
   const screenData = useScreenData(riverId);
   const pullToRefreshEnabled = screenData?.rules?.pull_to_refresh_enabled;
@@ -93,7 +88,7 @@ function ComponentsMapComponent(props: Props) {
 
   const onLoadDone = React.useCallback(() => {
     logTimestamp(riverId?.toString());
-  }, [logTimestamp]);
+  }, [logTimestamp, riverId]);
 
   const { loadingState, onLoadFinished, onLoadFailed, shouldShowLoadingError } =
     useLoadingState(riverComponents.length, onLoadDone);
@@ -122,7 +117,17 @@ function ComponentsMapComponent(props: Props) {
         </ScreenLoadingMeasurementsListItemWrapper>
       );
     },
-    [feed, getStaticComponentFeed, onLoadFailed, onLoadFinished]
+    [
+      feed,
+      getStaticComponentFeed,
+      groupId,
+      isScreenWrappedInContainer,
+      loadingState,
+      onLoadFailed,
+      onLoadFinished,
+      riverComponents.length,
+      riverId,
+    ]
   );
 
   const screenStyle = React.useMemo(
@@ -144,7 +149,13 @@ function ComponentsMapComponent(props: Props) {
         R.prop("screen_padding_right")(theme)
       ),
     }),
-    [riverId]
+    [
+      screenConfig.paddingTop,
+      screenConfig.paddingBottom,
+      screenConfig.paddingLeft,
+      screenConfig.paddingRight,
+      theme,
+    ]
   );
 
   const handleOnLayout = React.useCallback(
@@ -163,16 +174,8 @@ function ComponentsMapComponent(props: Props) {
   usePipesCacheReset(riverId, riverComponents);
 
   const refreshControl = React.useMemo(
-    () =>
-      pullToRefreshEnabled ? (
-        <RefreshControl
-          pullToRefreshPipesV1RefreshingStateUpdater={
-            pullToRefreshPipesV1RefreshingStateUpdater
-          }
-          refreshingPipesV1={refreshingPipesV1}
-        />
-      ) : null,
-    []
+    () => (pullToRefreshEnabled ? <RefreshControl /> : null),
+    [pullToRefreshEnabled]
   );
 
   const navBarStore = useScreenContextV2()._navBarStore;
@@ -187,55 +190,50 @@ function ComponentsMapComponent(props: Props) {
     canMomentum.current = true;
   }, []);
 
-  /* onMomentumScrollEnd: Handling snap to expanded/collapsed state ( for navbar ) */
-  const _onMomentumScrollEnd = React.useCallback(({ nativeEvent }) => {
-    if (!canMomentum.current) return;
-    canMomentum.current = false;
+  /* Snap the navbar to its expanded/collapsed state based on current offset. */
+  const snapToHeaderState = React.useCallback(
+    (rawOffsetY: number) => {
+      const { height: headerHeight, scrollState } = navBarStore.getState();
 
-    const { height: headerHeight, scrollState } = navBarStore.getState();
+      // Already fully expanded or fully collapsed — nothing to snap.
+      if (scrollState === 0 || scrollState === -headerHeight) return;
+      if (!flatListRef.current) return;
 
-    const offsetY = Math.max(0, nativeEvent.contentOffset.y);
+      const offsetY = Math.max(0, rawOffsetY);
 
-    if (
-      !(scrollState === 0 || scrollState === -headerHeight) &&
-      flatListRef.current
-    ) {
-      const offset =
+      const snapsToCollapsed =
         getNearestValue(Math.round(scrollState), -headerHeight, 0) ===
-        -headerHeight
-          ? Math.round(offsetY + scrollState + headerHeight)
-          : Math.round(offsetY + scrollState);
-
-      flatListRef.current.scrollToOffset({
-        animated: true,
-        offset,
-      });
-    }
-  }, []);
+        -headerHeight;
 
-  /* onScrollEnd: Handling snap to expanded/collapsed state ( for navbar ) */
-  const _onScrollEndDrag = React.useCallback(({ nativeEvent }) => {
-    const { height: headerHeight, scrollState } = navBarStore.getState();
+      const offset = snapsToCollapsed
+        ? Math.round(offsetY + scrollState + headerHeight)
+        : Math.round(offsetY + scrollState);
 
-    const offsetY = Math.max(0, nativeEvent.contentOffset.y);
+      flatListRef.current.scrollToOffset({ animated: true, offset });
+    },
+    [navBarStore]
+  );
 
-    if (
-      !(scrollState === 0 || scrollState === -headerHeight) &&
-      flatListRef.current &&
-      nativeEvent.velocity.y === 0
-    ) {
-      const offset =
-        getNearestValue(Math.round(scrollState), -headerHeight, 0) ===
-        -headerHeight
-          ? Math.round(offsetY + scrollState + headerHeight)
-          : Math.round(offsetY + scrollState);
-
-      flatListRef.current.scrollToOffset({
-        animated: true,
-        offset,
-      });
-    }
-  }, []);
+  /* onMomentumScrollEnd: Handling snap to expanded/collapsed state ( for navbar ) */
+  const _onMomentumScrollEnd = React.useCallback(
+    ({ nativeEvent }) => {
+      if (!canMomentum.current) return;
+      canMomentum.current = false;
+      snapToHeaderState(nativeEvent.contentOffset.y);
+    },
+    [snapToHeaderState]
+  );
+
+  /* onScrollEndDrag: Handling snap to expanded/collapsed state ( for navbar ) */
+  const _onScrollEndDrag = React.useCallback(
+    ({ nativeEvent }) => {
+      // Only snap on drag-end if there's no momentum to follow;
+      // otherwise _onMomentumScrollEnd handles it.
+      if (nativeEvent.velocity?.y !== 0) return;
+      snapToHeaderState(nativeEvent.contentOffset.y);
+    },
+    [snapToHeaderState]
+  );
 
   const onScroll = React.useCallback((event) => {
     hasUserScrolledRef.current = true;
@@ -259,8 +257,42 @@ function ComponentsMapComponent(props: Props) {
     }
   }, []);
 
+  const onScrollWithEndReached = React.useCallback(
+    (event) => {
+      onScroll(event);
+
+      if (!hasUserScrolledRef.current) return;
+      if (isScreenWrappedInContainer) return;
+
+      const {
+        nativeEvent: {
+          contentOffset: { y },
+          layoutMeasurement: { height },
+          contentSize: { height: contentHeight },
+        },
+      } = event;
+
+      const distanceFromEnd = contentHeight - y - height;
+
+      if (distanceFromEnd <= height * 0.5) {
+        if (!scrollEndReachedRef.current) {
+          scrollEndReachedRef.current = true;
+          emitScrollEndReached();
+        }
+      } else {
+        scrollEndReachedRef.current = false;
+      }
+    },
+    [onScroll, isScreenWrappedInContainer]
+  );
+
   const contentContainerStyle = React.useMemo(
-    () => (isScreenWrappedInContainer ? {} : screenStyle),
+    () =>
+      isScreenWrappedInContainer
+        ? {
+            flexGrow: 1,
+          }
+        : screenStyle,
     [isScreenWrappedInContainer, screenStyle]
   );
 
@@ -271,60 +303,98 @@ function ComponentsMapComponent(props: Props) {
   // TODO: support both "isScreenWrappedInContainer" and hasScreenPicker().
   // The Screen Picker in Mobile is completly different than the TV
   // so the various offsets / margins in TV do not apply here.
+  // Fix for WebView rerender crashes on Android API 28+
+  // https://github.com/react-native-webview/react-native-webview/issues/1915#issuecomment-964035468
+  const sharedScrollProps = {
+    overScrollMode: isAndroid ? ("never" as const) : ("auto" as const),
+    scrollIndicatorInsets,
+    onLayout: handleOnLayout,
+    contentContainerStyle,
+    refreshControl,
+    onScrollBeginDrag,
+    onMomentumScrollEnd: _onMomentumScrollEnd,
+    onScrollEndDrag: _onScrollEndDrag,
+    scrollEventThrottle: 16,
+    ...scrollViewExtraProps,
+  };
+
+  const listContent = useScrollView ? (
+    <ScrollView
+      testID="components-map-scroll-view"
+      // ViewportTracker clones this child and calls its `ref` as a function
+      // (childrenRef.current.ref(node)), so a callback ref is required here
+      // — an object ref would throw "ref is not a function".
+      ref={(ref) => {
+        scrollViewRef.current = ref;
+      }}
+      onScroll={onScrollWithEndReached}
+      {...sharedScrollProps}
+    >
+      {riverComponents.map((item, index) => (
+        <React.Fragment key={keyExtractor(item)}>
+          {renderRiverItem({ item, index })}
+        </React.Fragment>
+      ))}
+      <RiverFooter
+        flatListHeight={flatListHeight}
+        loadingState={loadingState}
+      />
+    </ScrollView>
+  ) : (
+    <FlatList
+      testID="components-map-flat-list"
+      // ViewportTracker clones this child and calls its `ref` as a function
+      // (childrenRef.current.ref(node)), so a callback ref is required here
+      // — an object ref would throw "ref is not a function".
+      ref={(ref) => {
+        flatListRef.current = ref;
+      }}
+      extraData={feed}
+      stickyHeaderIndices={stickyHeaderIndices}
+      removeClippedSubviews={isAndroid}
+      initialNumToRender={3}
+      maxToRenderPerBatch={10}
+      windowSize={12}
+      keyExtractor={keyExtractor}
+      renderItem={renderRiverItem}
+      data={riverComponents}
+      ListFooterComponent={
+        <RiverFooter
+          flatListHeight={flatListHeight}
+          loadingState={loadingState}
+        />
+      }
+      onScroll={onScroll}
+      onEndReached={
+        /* TODO: end-reached detection is inconsistent between the two paths:
+        the ScrollView branch uses manual pixel-offset math (onScrollWithEndReached)
+        with a scrollEndReachedRef debounce, while this FlatList relies on the
+        native onEndReached. Consider unifying the threshold/debounce behavior. */
+        /* When wrapped in a parent ScrollView (e.g. tabs),
+        this FlatList doesn't scroll so onEndReached can fire repeatedly;
+        skip it here and let the parent ScrollView emit scroll-end instead. */
+        isScreenWrappedInContainer
+          ? undefined
+          : () => {
+              if (!hasUserScrolledRef.current) return;
+              emitScrollEndReached();
+            }
+      }
+      {...sharedScrollProps}
+    />
+  );
+
   return (
-    <View style={styles.container} ref={flatListWrapperRef}>
+    // Wrapper View exists only to expose a ref (via ComponentsMapRefContext)
+    // for measuring the list's position/height; it intentionally has no style.
+    <View 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}
-                /* When wrapped in a parent ScrollView (e.g. tabs),
-                this FlatList doesn't scroll so onEndReached can fire repeatedly;
-                skip it here and let the parent ScrollView emit scroll-end instead. */
-                onEndReached={
-                  isScreenWrappedInContainer
-                    ? undefined
-                    : () => {
-                        if (!hasUserScrolledRef.current) return;
-                        emitScrollEndReached();
-                      }
-                }
-              />
-            </ViewportTracker>
+            <ViewportTracker>{listContent}</ViewportTracker>
           </ScreenLoadingMeasurements>
         </ComponentsMapRefContext.Provider>
       </ComponentsMapHeightContext.Provider>

package/Components/River/ComponentsMap/hooks/__tests__/useLoadingState.test.ts

@@ -1,4 +1,4 @@
-import { renderHook, act } from "@testing-library/react-hooks";
+import { renderHook, act } from "@testing-library/react-native";
 import { BehaviorSubject } from "rxjs";
 import { useLoadingState } from "../useLoadingState";