@rn-tools/navigation 2.2.6 → 3.0.1

package/src/stack.tsx

@@ -1,328 +1,99 @@
 import * as React from "react";
+import { RenderTreeNode, useRenderNode } from "@rn-tools/core";
 import {
-  BackHandler,
-  Platform,
-  StyleSheet,
-  View,
-  type ImageProps,
-  type ViewProps,
-  type ViewStyle,
-} from "react-native";
-import {
-  ScreenStackProps as RNScreenStackProps,
-  Screen as RNScreen,
-  ScreenProps as RNScreenProps,
-  ScreenStackHeaderConfig as RNScreenStackHeaderConfig,
-  ScreenStackHeaderLeftView as RNScreenStackHeaderLeftView,
-  ScreenStackHeaderRightView as RNScreenStackHeaderRightView,
-  ScreenStackHeaderCenterView as RNScreenStackHeaderCenterView,
-  ScreenStackHeaderConfigProps as RNScreenStackHeaderConfigProps,
-  ScreenStackHeaderBackButtonImage as RNScreenStackHeaderBackButtonImage,
-  type ScreenProps,
-} from "react-native-screens";
-import ScreenStackNativeComponent from "react-native-screens/src/fabric/ScreenStackNativeComponent";
-
-import {
-  ActiveContext,
-  DepthContext,
-  TabIdContext,
-  TabScreenIndexContext,
-} from "./contexts";
-import { DEFAULT_SLOT_NAME } from "./navigation-reducer";
-import { useNavigationDispatch, useNavigationState } from "./navigation-store";
-import type { StackItem } from "./types";
-import { generateStackId, useSafeAreaInsetsSafe } from "./utils";
-
-let StackIdContext = React.createContext<string>("");
-let ScreenIdContext = React.createContext<string>("");
-
-// Component returned from `react-native-screens` references `react-navigation` data structures in recent updates
-// This is a workaround to make it work with our custom navigation
-let RNScreenStack = React.memo(function RNScreenStack(
-  props: RNScreenStackProps
-) {
-  let { children, gestureDetectorBridge, ...rest } = props;
-  let ref = React.useRef(null);
-
-  React.useEffect(() => {
-    if (gestureDetectorBridge) {
-      gestureDetectorBridge.current.stackUseEffectCallback(ref);
-    }
-  });
-
-  return (
-    <ScreenStackNativeComponent {...rest} ref={ref}>
-      {children}
-    </ScreenStackNativeComponent>
-  );
-});
-
-export type StackRootProps = {
-  children: React.ReactNode;
-  id?: string;
+  useStackScreens,
+  useNavigation,
+  type PushScreenOptions,
+} from "./navigation-client";
+
+// TODO - replace with custom implementation
+import * as RNScreens from "react-native-screens";
+import { StyleSheet } from "react-native";
+
+export type StackHandle = {
+  pushScreen: (element: React.ReactElement, options?: PushScreenOptions) => void;
+  popScreen: () => void;
 };
 
-let useStackInternal = (stackId = "") => {
-  let stack: StackItem | undefined = useNavigationState(
-    (state) => state.stacks.lookup[stackId]
-  );
-  return stack;
-};
-
-function StackRoot({ children, id }: StackRootProps) {
-  let idRef = React.useRef(id || generateStackId());
-  let stack = useStackInternal(idRef.current);
-
-  let isActive = React.useContext(ActiveContext);
-  let parentDepth = React.useContext(DepthContext);
-  let parentStackId = React.useContext(StackIdContext);
-
-  let depth = parentDepth + 1;
-  let stackId = idRef.current;
-  let parentTabId = React.useContext(TabIdContext);
-  let tabIndex = React.useContext(TabScreenIndexContext);
-
-  let dispatch = useNavigationDispatch();
-
-  React.useLayoutEffect(() => {
-    if (!stack) {
-      dispatch({ type: "CREATE_STACK_INSTANCE", stackId: idRef.current });
-    }
-  }, [stack, dispatch]);
-
-  React.useEffect(() => {
-    if (stack != null) {
-      dispatch({
-        type: "REGISTER_STACK",
-        depth,
-        isActive,
-        stackId: stack.id,
-        parentStackId,
-        parentTabId,
-        tabIndex,
-      });
-    }
-  }, [stack, depth, isActive, parentStackId, parentTabId, tabIndex, dispatch]);
-
-  React.useEffect(() => {
-    return () => {
-      if (stackId != null) {
-        dispatch({ type: "UNREGISTER_STACK", stackId });
-      }
-    };
-  }, [stackId, dispatch]);
-
-  if (!stack) {
-    return null;
-  }
-
-  return (
-    <StackIdContext.Provider value={stack.id}>
-      <DepthContext.Provider value={depth}>
-        <ActiveContext.Provider value={isActive}>
-          {children}
-        </ActiveContext.Provider>
-      </DepthContext.Provider>
-    </StackIdContext.Provider>
-  );
-}
-
-export type StackScreensProps = RNScreenStackProps;
-
-function StackScreens({ style: styleProp, ...props }: StackScreensProps) {
-  let style = React.useMemo(
-    () => styleProp || StyleSheet.absoluteFill,
-    [styleProp]
-  );
-
-  return <RNScreenStack {...props} style={style} />;
-}
-
-let defaultScreenStyle: ViewStyle = {
-  ...StyleSheet.absoluteFillObject,
-  backgroundColor: "white",
+export type StackProps = {
+  id?: string;
+  active?: boolean;
+  rootScreen?: React.ReactElement;
+  children?: React.ReactNode;
 };
 
-export type StackScreenProps = RNScreenProps & {
-  header?: React.ReactElement<StackScreenHeaderProps>
-}
-
-let HeaderHeightContext = React.createContext<number>(0);
-
-let StackScreen = React.memo(function StackScreen({
-  children,
-  style: styleProp,
-  gestureEnabled = true,
-  onDismissed: onDismissedProp,
-  onHeaderHeightChange: onHeaderHeightChangeProp,
-  header,
-  ...props
-}: StackScreenProps) {
-  let stackId = React.useContext(StackIdContext);
-  let screenId = React.useContext(ScreenIdContext);
-  let stack = useStackInternal(stackId);
-
-  let dispatch = useNavigationDispatch();
-
-  let isActive = React.useContext(ActiveContext);
-
-  let onDismissed: RNScreenProps["onDismissed"] = React.useCallback(
-    (e) => {
-      dispatch({ type: "POP_SCREEN_BY_KEY", key: screenId });
-      onDismissedProp?.(e);
-    },
-    [onDismissedProp, dispatch, screenId]
-  );
-
-  React.useEffect(() => {
-    function backHandler() {
-      if (gestureEnabled && isActive && stack?.screens.length > 0) {
-        dispatch({ type: "POP_SCREEN_BY_KEY", key: screenId });
-        return true;
-      }
-
-      return false;
-    }
-
-    BackHandler.addEventListener("hardwareBackPress", backHandler);
-
-    return () => {
-      BackHandler.removeEventListener("hardwareBackPress", backHandler);
-    };
-  }, [gestureEnabled, stack, screenId, isActive, dispatch]);
-
-  let parentHeaderHeight = React.useContext(HeaderHeightContext);
-  let [headerHeight, setHeaderHeight] = React.useState(parentHeaderHeight);
-
-  let onHeaderHeightChange: ScreenProps["onHeaderHeightChange"] =
-    React.useCallback(
-      (e) => {
-        Platform.OS === "ios" &&
-          e.nativeEvent.headerHeight > 0 &&
-          setHeaderHeight(e.nativeEvent.headerHeight);
-        onHeaderHeightChangeProp?.(e);
-      },
-      [onHeaderHeightChangeProp]
-    );
-
-  let style = React.useMemo(
-    () => [
-      defaultScreenStyle,
-      { paddingTop: headerHeight || parentHeaderHeight },
-      styleProp,
-    ],
-    [styleProp, headerHeight, parentHeaderHeight]
-  );
-
+const StackRoot = React.memo(function StackRoot(props: StackProps) {
   return (
-    <HeaderHeightContext.Provider value={headerHeight}>
-      {/* @ts-expect-error - Ref typings in RNScreens */}
-      <RNScreen
-        {...props}
-        style={style}
-        activityState={isActive ? 2 : 0}
-        gestureEnabled={gestureEnabled}
-        onDismissed={onDismissed}
-        onHeaderHeightChange={onHeaderHeightChange}
-      >
-        {header}
-        {children}
-      </RNScreen>
-    </HeaderHeightContext.Provider>
+    <RenderTreeNode type="stack" id={props.id} active={props.active}>
+      <RNScreens.ScreenStack style={StyleSheet.absoluteFill}>
+        {props.rootScreen && <StackScreen>{props.rootScreen}</StackScreen>}
+        {props.children}
+      </RNScreens.ScreenStack>
+    </RenderTreeNode>
   );
 });
 
-let useStackScreens = (stackId = "", slotName: string) => {
-  return useNavigationState((state) => {
-    let stack = state.stacks.lookup[stackId];
-    return (
-      stack?.screens
-        .map((screenId) => state.screens.lookup[screenId])
-        .filter((s) => s && s.slotName === slotName) ?? []
-    );
-  });
+export type StackScreenProps = {
+  id?: string;
+  active?: boolean;
+  children: React.ReactNode;
 };
 
-let StackSlot = React.memo(function StackSlot({
-  slotName = DEFAULT_SLOT_NAME,
-}: {
-  slotName?: string;
-}) {
-  let stackId = React.useContext(StackIdContext);
-  let screens = useStackScreens(stackId, slotName);
-
+const StackScreen = React.memo(function StackScreen(props: StackScreenProps) {
   return (
-    <>
-      {screens.map((screen) => {
-        return (
-          <ScreenIdContext.Provider value={screen.id} key={screen.id}>
-            {screen.element}
-          </ScreenIdContext.Provider>
-        );
-      })}
-    </>
+    <RNScreens.Screen style={StyleSheet.absoluteFill}>
+      <RenderTreeNode type="screen" id={props.id} active={props.active}>
+        {props.children}
+      </RenderTreeNode>
+    </RNScreens.Screen>
   );
 });
 
-export type StackScreenHeaderProps = RNScreenStackHeaderConfigProps;
-
-let StackScreenHeader = React.memo(function StackScreenHeader({
-  ...props
-}: StackScreenHeaderProps) {
-  return <RNScreenStackHeaderConfig {...props} />;
-});
-
-let StackScreenHeaderLeft = React.memo(function StackScreenHeaderLeft({
-  ...props
-}: ViewProps) {
-  return <RNScreenStackHeaderLeftView {...props} />;
-});
-
-let StackScreenHeaderCenter = React.memo(function StackScreenHeaderCenter({
-  ...props
-}: ViewProps) {
-  return <RNScreenStackHeaderCenterView {...props} />;
-});
-
-let StackScreenHeaderRight = React.memo(function StackScreenHeaderRight({
-  ...props
-}: ViewProps) {
-  return <RNScreenStackHeaderRightView {...props} />;
-});
-
-let ScreenStackHeaderBackButtonImage = React.memo(
-  function ScreenStackHeaderBackButtonImage(props: ImageProps) {
-    return <RNScreenStackHeaderBackButtonImage {...props} />;
-  }
-);
-
-export type StackNavigatorProps = Omit<StackRootProps, "children"> & {
-  rootScreen: React.ReactElement<unknown>;
-};
+const StackSlot = React.memo(function StackSlot() {
+  const node = useRenderNode();
+  const stackKey = node?.id ?? null;
+  const screens = useStackScreens(stackKey);
 
-let StackNavigator = React.memo(function StackNavigator({
-  rootScreen,
-  ...rootProps
-}: StackNavigatorProps) {
   return (
-    <Stack.Root {...rootProps}>
-      <Stack.Screens>
-        <Stack.Screen>{rootScreen}</Stack.Screen>
-        <Stack.Slot />
-      </Stack.Screens>
-    </Stack.Root>
+    <React.Fragment>
+      {screens.map((screen, index, arr) => (
+        <StackScreen
+          id={screen.options?.id}
+          key={screen.options?.id ?? index}
+          active={index === arr.length - 1}
+        >
+          {screen.element}
+        </StackScreen>
+      ))}
+    </React.Fragment>
   );
 });
 
-export let Stack = {
-  Root: StackRoot,
-  Screens: StackScreens,
-  Screen: StackScreen,
-  Header: StackScreenHeader,
-  HeaderLeft: StackScreenHeaderLeft,
-  HeaderCenter: StackScreenHeaderCenter,
-  HeaderRight: StackScreenHeaderRight,
-  HeaderBackImage: ScreenStackHeaderBackButtonImage,
-  Slot: StackSlot,
-  Navigator: StackNavigator,
-};
+export const Stack = React.memo(
+  React.forwardRef<StackHandle, Omit<StackProps, "children">>(
+    function Stack(props, ref) {
+      const navigation = useNavigation();
+      const node = useRenderNode();
+      const stackId = props.id ?? node?.id ?? null;
+
+      React.useImperativeHandle(ref, () => ({
+        pushScreen(element: React.ReactElement, options?: PushScreenOptions) {
+          if (stackId) {
+            navigation.pushScreen(element, { ...options, stackId });
+          }
+        },
+        popScreen() {
+          if (stackId) {
+            navigation.popScreen({ stackId });
+          }
+        },
+      }), [stackId, navigation]);
+
+      return (
+        <StackRoot {...props}>
+          <StackSlot />
+        </StackRoot>
+      );
+    },
+  ),
+);

package/src/tabs.test.tsx

@@ -0,0 +1,288 @@
+import * as React from "react";
+import { describe, expect, it } from "vitest";
+import { act, render, waitFor, fireEvent } from "@testing-library/react";
+import { RenderNodeProbe } from "@rn-tools/core/mocks/render-node-probe";
+
+import {
+  createNavigation,
+  type NavigationStateInput,
+} from "./navigation-client";
+import { Navigation } from "./navigation";
+import { Tabs, type TabScreenOptions, type TabsHandle } from "./tabs";
+import { Stack } from "./stack";
+
+function makeScreens(count: number): TabScreenOptions[] {
+  return Array.from({ length: count }, (_, i) => ({
+    id: `tab-${i}`,
+    screen: (
+      <RenderNodeProbe
+        render={(data) => (
+          <span>{`tab-${i}:${data.type}:${String(data.active)}`}</span>
+        )}
+      />
+    ),
+    tab: ({ isActive, onPress }) => (
+      <span data-testid={`tab-btn-${i}`} onClick={onPress}>
+        {`tab-btn-${i}:${String(isActive)}`}
+      </span>
+    ),
+  }));
+}
+
+function renderWithProviders(
+  node: React.ReactNode,
+  initialState?: NavigationStateInput,
+) {
+  const navigation = createNavigation(initialState);
+  const renderer = render(
+    <Navigation navigation={navigation}>{node}</Navigation>,
+  );
+  return { store: navigation.store, navigation, renderer };
+}
+
+describe("Tabs", () => {
+  it("renders each screen inside a screen render tree node", () => {
+    const screens = makeScreens(2);
+    const { renderer } = renderWithProviders(
+      <Tabs id="my-tabs" screens={screens} />,
+    );
+
+    expect(renderer.getByText("tab-0:tab-screen:true")).toBeTruthy();
+    expect(renderer.getByText("tab-1:tab-screen:false")).toBeTruthy();
+  });
+
+  it("defaults active tab index to 0", () => {
+    const screens = makeScreens(3);
+    const { renderer } = renderWithProviders(
+      <Tabs id="my-tabs" screens={screens} />,
+    );
+
+    expect(renderer.getByText("tab-0:tab-screen:true")).toBeTruthy();
+    expect(renderer.getByText("tab-1:tab-screen:false")).toBeTruthy();
+    expect(renderer.getByText("tab-2:tab-screen:false")).toBeTruthy();
+  });
+
+  it("setActiveTab changes which screen is active", async () => {
+    const screens = makeScreens(3);
+    const { navigation, renderer } = renderWithProviders(
+      <Tabs id="my-tabs" screens={screens} />,
+    );
+
+    act(() => {
+      navigation.setActiveTab(2);
+    });
+
+    await waitFor(() => {
+      expect(renderer.getByText("tab-0:tab-screen:false")).toBeTruthy();
+      expect(renderer.getByText("tab-1:tab-screen:false")).toBeTruthy();
+      expect(renderer.getByText("tab-2:tab-screen:true")).toBeTruthy();
+    });
+  });
+
+  it("respects the active flag from the tabs container", () => {
+    const screens = makeScreens(1);
+    const { renderer } = renderWithProviders(
+      <Tabs id="my-tabs" active={false} screens={screens} />,
+    );
+
+    expect(renderer.getByText("tab-0:tab-screen:false")).toBeTruthy();
+  });
+
+  it("ref.setActiveIndex changes the active tab", async () => {
+    const screens = makeScreens(3);
+    const ref = React.createRef<TabsHandle>();
+    const { renderer } = renderWithProviders(
+      <Tabs ref={ref} id="my-tabs" screens={screens} />,
+    );
+
+    expect(renderer.getByText("tab-0:tab-screen:true")).toBeTruthy();
+
+    act(() => {
+      ref.current!.setActiveIndex(2);
+    });
+
+    await waitFor(() => {
+      expect(renderer.getByText("tab-0:tab-screen:false")).toBeTruthy();
+      expect(renderer.getByText("tab-1:tab-screen:false")).toBeTruthy();
+      expect(renderer.getByText("tab-2:tab-screen:true")).toBeTruthy();
+    });
+  });
+
+  it("supports preloaded activeIndex from the navigation state", () => {
+    const screens = makeScreens(3);
+    const { renderer } = renderWithProviders(
+      <Tabs id="my-tabs" screens={screens} />,
+      { tabs: { "my-tabs": { activeIndex: 1 } } },
+    );
+
+    expect(renderer.getByText("tab-0:tab-screen:false")).toBeTruthy();
+    expect(renderer.getByText("tab-1:tab-screen:true")).toBeTruthy();
+    expect(renderer.getByText("tab-2:tab-screen:false")).toBeTruthy();
+  });
+});
+
+describe("TabBar", () => {
+  it("renders tab items with correct isActive state", () => {
+    const screens = makeScreens(3);
+    const { renderer } = renderWithProviders(
+      <Tabs id="my-tabs" screens={screens} />,
+    );
+
+    expect(renderer.getByText("tab-btn-0:true")).toBeTruthy();
+    expect(renderer.getByText("tab-btn-1:false")).toBeTruthy();
+    expect(renderer.getByText("tab-btn-2:false")).toBeTruthy();
+  });
+
+  it("onPress switches the active tab", async () => {
+    const screens = makeScreens(3);
+    const { renderer } = renderWithProviders(
+      <Tabs id="my-tabs" screens={screens} />,
+    );
+
+    fireEvent.click(renderer.getByTestId("tab-btn-2"));
+
+    await waitFor(() => {
+      expect(renderer.getByText("tab-btn-0:false")).toBeTruthy();
+      expect(renderer.getByText("tab-btn-2:true")).toBeTruthy();
+      expect(renderer.getByText("tab-2:tab-screen:true")).toBeTruthy();
+      expect(renderer.getByText("tab-0:tab-screen:false")).toBeTruthy();
+    });
+  });
+
+  it("renders tabbar at bottom by default", () => {
+    const screens = makeScreens(1);
+    const { renderer } = renderWithProviders(
+      <Tabs id="my-tabs" screens={screens} />,
+    );
+
+    // Screen content should appear before the tab bar in the DOM
+    const screenNode = renderer.getByText("tab-0:tab-screen:true");
+    const tabNode = renderer.getByText("tab-btn-0:true");
+    const order = screenNode.compareDocumentPosition(tabNode);
+    // DOCUMENT_POSITION_FOLLOWING = 4
+    expect(order & 4).toBe(4);
+  });
+
+  it("renders tabbar at top when tabbarPosition is top", () => {
+    const screens = makeScreens(1);
+    const { renderer } = renderWithProviders(
+      <Tabs id="my-tabs" screens={screens} tabbarPosition="top" />,
+    );
+
+    // Tab bar should appear before screen content in the DOM
+    const tabNode = renderer.getByText("tab-btn-0:true");
+    const screenNode = renderer.getByText("tab-0:tab-screen:true");
+    const order = tabNode.compareDocumentPosition(screenNode);
+    // DOCUMENT_POSITION_FOLLOWING = 4
+    expect(order & 4).toBe(4);
+  });
+});
+
+describe("Nested Stack + Tabs", () => {
+  it("pushScreen targets the stack inside the active tab", async () => {
+    const navigation = createNavigation();
+
+    const screens: TabScreenOptions[] = [
+      {
+        id: "tab-a",
+        screen: <Stack id="stack-a" rootScreen={<span>stack-a-root</span>} />,
+        tab: () => <span>tab-a</span>,
+      },
+      {
+        id: "tab-b",
+        screen: <Stack id="stack-b" rootScreen={<span>stack-b-root</span>} />,
+        tab: () => <span>tab-b</span>,
+      },
+    ];
+
+    const result = render(
+      <Navigation navigation={navigation}>
+        <Tabs id="my-tabs" screens={screens} />
+      </Navigation>,
+    );
+
+    await waitFor(() => {
+      expect(result.getByText("stack-a-root")).toBeTruthy();
+    });
+
+    // Tab 0 (stack-a) is active — pushScreen should target stack-a
+    act(() => {
+      navigation.pushScreen(<span>pushed-to-a</span>);
+    });
+
+    const stateAfterFirst = navigation.store.getState();
+    expect(stateAfterFirst.stacks.get("stack-a")).toHaveLength(1);
+    expect(stateAfterFirst.stacks.has("stack-b")).toBe(false);
+  });
+
+  it("switching tabs redirects pushScreen to the newly active stack", async () => {
+    const navigation = createNavigation();
+
+    const screens: TabScreenOptions[] = [
+      {
+        id: "tab-a",
+        screen: <Stack id="stack-a" rootScreen={<span>stack-a-root</span>} />,
+        tab: () => <span>tab-a</span>,
+      },
+      {
+        id: "tab-b",
+        screen: <Stack id="stack-b" rootScreen={<span>stack-b-root</span>} />,
+        tab: () => <span>tab-b</span>,
+      },
+    ];
+
+    render(
+      <Navigation navigation={navigation}>
+        <Tabs id="my-tabs" screens={screens} />
+      </Navigation>,
+    );
+
+    // Switch to tab 1 (stack-b)
+    act(() => {
+      navigation.setActiveTab(1);
+    });
+
+    act(() => {
+      navigation.pushScreen(<span>pushed-to-b</span>);
+    });
+
+    const state = navigation.store.getState();
+    expect(state.stacks.get("stack-b")).toHaveLength(1);
+    expect(state.stacks.has("stack-a")).toBe(false);
+  });
+
+  it("setActiveTab resolves the correct tabs when a stack wraps tabs", async () => {
+    const navigation = createNavigation();
+
+    const tabScreens: TabScreenOptions[] = [
+      {
+        id: "tab-a",
+        screen: <span>tab-a-content</span>,
+        tab: () => <span>tab-a</span>,
+      },
+      {
+        id: "tab-b",
+        screen: <span>tab-b-content</span>,
+        tab: () => <span>tab-b</span>,
+      },
+    ];
+
+    const result = render(
+      <Navigation navigation={navigation}>
+        <Stack id="outer-stack" rootScreen={<Tabs id="inner-tabs" screens={tabScreens} />} />
+      </Navigation>,
+    );
+
+    await waitFor(() => {
+      expect(result.getByText("tab-a-content")).toBeTruthy();
+    });
+
+    // setActiveTab with no explicit tabsId should resolve inner-tabs
+    act(() => {
+      navigation.setActiveTab(1);
+    });
+
+    const state = navigation.store.getState();
+    expect(state.tabs.get("inner-tabs")).toEqual({ activeIndex: 1 });
+  });
+});