@rn-tools/navigation 2.0.0

package/src/stack.tsx

@@ -0,0 +1,255 @@
+import * as React from "react";
+import { BackHandler, StyleSheet, type ViewStyle } from "react-native";
+import {
+  ScreenStackProps as RNScreenStackProps,
+  Screen as RNScreen,
+  ScreenProps as RNScreenProps,
+  ScreenStackHeaderConfig as RNScreenStackHeaderConfig,
+  ScreenStackHeaderConfigProps as RNScreenStackHeaderConfigProps,
+} 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 } from "./utils";
+
+let StackIdContext = React.createContext<string>("");
+let ScreenIdContext = React.createContext<string>("");
+
+const RNScreenStack = React.memo(function RNScreenStack(
+  props: RNScreenStackProps
+) {
+  const { children, gestureDetectorBridge, ...rest } = props;
+  const ref = React.useRef(null);
+
+  React.useEffect(() => {
+    if (gestureDetectorBridge) {
+      gestureDetectorBridge.current.stackUseEffectCallback(ref);
+    }
+  });
+
+  return (
+    <ScreenStackNativeComponent {...rest} ref={ref}>
+      {children}
+    </ScreenStackNativeComponent>
+  );
+});
+
+type StackRootProps = {
+  children: React.ReactNode;
+  id?: string;
+};
+
+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>
+  );
+}
+
+function StackScreens({
+  style: styleProp,
+  ...props
+}: RNScreenStackProps) {
+  let style = React.useMemo(
+    () => styleProp || StyleSheet.absoluteFill,
+    [styleProp]
+  );
+
+  return (
+    <RNScreenStack {...props} style={style} />
+  );
+}
+
+let defaultScreenStyle: ViewStyle = {
+  ...StyleSheet.absoluteFillObject,
+  backgroundColor: "white",
+};
+
+export type StackScreenProps = RNScreenProps;
+
+let StackScreen = React.memo(function StackScreen({
+  children,
+  style: styleProp,
+  gestureEnabled = true,
+  onDismissed: onDismissedProp,
+  ...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 style = React.useMemo(() => styleProp || defaultScreenStyle, [styleProp]);
+
+  return (
+    // @ts-expect-error - Ref typings in RNScreens
+    <RNScreen
+      {...props}
+      style={style}
+      // activityState={isActive ? 2 : 0}
+      gestureEnabled={gestureEnabled}
+      onDismissed={onDismissed}
+    >
+      {children}
+    </RNScreen>
+  );
+});
+
+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) ?? []
+    );
+  });
+};
+
+let StackSlot = React.memo(function StackSlot({
+  slotName = DEFAULT_SLOT_NAME,
+}: {
+  slotName?: string;
+}) {
+  let stackId = React.useContext(StackIdContext);
+  let screens = useStackScreens(stackId, slotName);
+
+  return (
+    <>
+      {screens.map((screen) => {
+        return (
+          <ScreenIdContext.Provider value={screen.id} key={screen.id}>
+            {screen.element}
+          </ScreenIdContext.Provider>
+        );
+      })}
+    </>
+  );
+});
+
+let StackScreenHeader = React.memo(function StackScreenHeader({
+  ...props
+}: RNScreenStackHeaderConfigProps) {
+  return <RNScreenStackHeaderConfig {...props} />;
+});
+
+type StackNavigatorProps = Omit<StackRootProps, "children"> & {
+  rootScreen: React.ReactElement<unknown>;
+};
+
+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>
+  );
+});
+
+export let Stack = {
+  Root: StackRoot,
+  Screens: StackScreens,
+  Screen: StackScreen,
+  Header: StackScreenHeader,
+  Slot: StackSlot,
+  Navigator: StackNavigator,
+};

package/src/tabs.tsx

@@ -0,0 +1,297 @@
+import * as React from "react";
+import {
+  BackHandler,
+  Pressable,
+  StyleSheet,
+  View,
+  type PressableProps,
+  type ViewProps,
+  type ViewStyle,
+} from "react-native";
+import {
+  Screen as RNScreen,
+  ScreenProps as RNScreenProps,
+  ScreenContainer as RNScreenContainer,
+  ScreenContainerProps as RNScreenContainerProps,
+} from "react-native-screens";
+
+import {
+  ActiveContext,
+  DepthContext,
+  TabIdContext,
+  TabScreenIndexContext,
+} from "./contexts";
+import { useNavigationDispatch, useNavigationState } from "./navigation-store";
+import { generateTabId } from "./utils";
+
+type TabsRootProps = {
+  children: React.ReactNode;
+  id?: string;
+};
+
+let useTabsInternal = (tabId = "") =>
+  useNavigationState((state) => {
+    let tab = state.tabs.lookup[tabId];
+
+    if (!tab) {
+      return null;
+    }
+
+    return tab;
+  });
+
+let TabsRoot = React.memo(function TabsRoot({
+  children,
+  id,
+}: {
+  children: React.ReactNode;
+  id?: string;
+}) {
+  let tabIdRef = React.useRef(id || generateTabId());
+  let tabId = tabIdRef.current;
+  let tabs = useTabsInternal(tabId);
+  let dispatch = useNavigationDispatch();
+
+  React.useEffect(() => {
+    if (!tabs) {
+      dispatch({ type: "CREATE_TAB_INSTANCE", tabId: tabId });
+    }
+  }, [tabs, tabId, dispatch]);
+
+  let depth = React.useContext(DepthContext);
+  let isActive = React.useContext(ActiveContext);
+  let parentTabId = React.useContext(TabIdContext);
+
+  React.useEffect(() => {
+    if (tabs != null) {
+      dispatch({
+        type: "REGISTER_TAB",
+        depth,
+        isActive,
+        tabId: tabs.id,
+        parentTabId,
+      });
+    }
+  }, [tabs, depth, isActive, parentTabId, dispatch]);
+
+  React.useEffect(() => {
+    return () => {
+      if (tabId != null) {
+        dispatch({ type: "UNREGISTER_TAB", tabId });
+      }
+    };
+  }, [tabId, dispatch]);
+
+  if (!tabs) {
+    return null;
+  }
+
+  return (
+    <TabIdContext.Provider value={tabs.id}>{children}</TabIdContext.Provider>
+  );
+});
+
+let defaultScreenContainerStyle = {
+  flex: 1,
+};
+
+function TabsScreens({
+  children,
+  ...props
+}: { children: React.ReactNode } & RNScreenContainerProps) {
+  return (
+    <RNScreenContainer style={defaultScreenContainerStyle} {...props}>
+      {React.Children.map(children, (child, index) => {
+        return (
+          <TabScreenIndexContext.Provider value={index}>
+            {child}
+          </TabScreenIndexContext.Provider>
+        );
+      })}
+    </RNScreenContainer>
+  );
+}
+
+let TabsScreen = React.memo(function TabsScreen({
+  children,
+  style: styleProp,
+  ...props
+}: { children: React.ReactNode } & RNScreenProps) {
+  let dispatch = useNavigationDispatch();
+
+  let tabId = React.useContext(TabIdContext);
+  let tabs = useTabsInternal(tabId);
+  let index = React.useContext(TabScreenIndexContext);
+
+  let parentIsActive = React.useContext(ActiveContext);
+  let activeIndex = tabs?.activeIndex;
+  let isActive = index === activeIndex;
+
+  React.useEffect(() => {
+    function backHandler() {
+      if (tabs && tabs.history.length > 0) {
+        dispatch({ type: "TAB_BACK", tabId });
+        return true;
+      }
+
+      return false;
+    }
+
+    BackHandler.addEventListener("hardwareBackPress", backHandler);
+
+    return () => {
+      BackHandler.removeEventListener("hardwareBackPress", backHandler);
+    };
+  }, [tabId, dispatch, tabs]);
+
+  let style = React.useMemo(
+    () => styleProp || StyleSheet.absoluteFill,
+    [styleProp]
+  );
+
+  return (
+    // @ts-expect-error - Ref typings in RNScreens
+    <RNScreen
+      active={isActive ? 1 : 0}
+      activityState={isActive ? 2 : 0}
+      style={style}
+      {...props}
+    >
+      <ActiveContext.Provider value={parentIsActive && isActive}>
+        {children}
+      </ActiveContext.Provider>
+    </RNScreen>
+  );
+});
+
+export let defaultTabbarStyle: ViewStyle = {
+  flexDirection: "row",
+  backgroundColor: "white",
+};
+
+let TabsTabbar = React.memo(function TabsTabbar({
+  children,
+  style: styleProp,
+  ...props
+}: { children: React.ReactNode } & ViewProps) {
+  let style = React.useMemo(() => styleProp || defaultTabbarStyle, [styleProp]);
+
+  return (
+    <View style={style} {...props}>
+      {React.Children.map(children, (child, index) => {
+        return (
+          <TabScreenIndexContext.Provider value={index}>
+            {child}
+          </TabScreenIndexContext.Provider>
+        );
+      })}
+    </View>
+  );
+});
+
+type TabbarTabProps = {
+  activeStyle?: PressableProps["style"];
+  inactiveStyle?: PressableProps["style"];
+  style?: PressableProps["style"];
+  children:
+    | React.ReactNode
+    | ((props: { isActive: boolean; onPress: () => void }) => React.ReactNode);
+} & Omit<PressableProps, "children">;
+
+let defaultTabStyle: ViewStyle = {
+  flex: 1,
+};
+
+let TabsTab = React.memo(function TabsTab({
+  children,
+  ...props
+}: TabbarTabProps) {
+  let dispatch = useNavigationDispatch();
+
+  let tabId = React.useContext(TabIdContext);
+  let index = React.useContext(TabScreenIndexContext);
+  let tabs = useTabsInternal(tabId);
+
+  let activeIndex = tabs?.activeIndex;
+  let isActive = index === activeIndex;
+
+  let onPress: () => void = React.useCallback(() => {
+    dispatch({ type: "SET_TAB_INDEX", tabId, index });
+  }, [tabId, index, dispatch]);
+
+  let style = React.useMemo(() => {
+    let baseStyle = props.style || defaultTabStyle;
+    let activeStyle = isActive ? props.activeStyle : props.inactiveStyle;
+    return [baseStyle, activeStyle];
+  }, [isActive, props.activeStyle, props.inactiveStyle, props.style]);
+
+  let renderChildren = React.useMemo(() => {
+    if (typeof children === "function") {
+      return children({ isActive, onPress });
+    }
+
+    return children;
+  }, [isActive, onPress, children]);
+
+  return (
+    // @ts-expect-error - cleanup typings
+    <Pressable onPress={onPress} style={style} {...props}>
+      {renderChildren}
+    </Pressable>
+  );
+});
+
+
+let TabNavigator = React.memo(function TabNavigator({
+  screens,
+  tabbarPosition = "bottom",
+  tabbarStyle,
+  ...rootProps
+}: TabNavigatorProps) {
+  return (
+    <Tabs.Root {...rootProps}>
+      {tabbarPosition === "top" && (
+        <Tabs.Tabbar style={tabbarStyle}>
+          {screens.map((screen) => {
+            return <Tabs.Tab key={screen.key}>{screen.tab}</Tabs.Tab>;
+          })}
+        </Tabs.Tabbar>
+      )}
+
+      <Tabs.Screens>
+        {screens.map((screen) => {
+          return <Tabs.Screen key={screen.key}>{screen.screen}</Tabs.Screen>;
+        })}
+      </Tabs.Screens>
+
+      {tabbarPosition === "bottom" && (
+        <Tabs.Tabbar style={tabbarStyle}>
+          {screens.map((screen) => {
+            return <Tabs.Tab key={screen.key}>{screen.tab}</Tabs.Tab>;
+          })}
+        </Tabs.Tabbar>
+      )}
+    </Tabs.Root>
+  );
+});
+
+export let Tabs = {
+  Root: TabsRoot,
+  Screens: TabsScreens,
+  Screen: TabsScreen,
+  Tabbar: TabsTabbar,
+  Tab: TabsTab,
+  Navigator: TabNavigator,
+};
+
+export type TabNavigatorProps = Omit<TabsRootProps, "children"> & {
+  screens: TabNavigatorScreenOptions[];
+  tabbarPosition?: "top" | "bottom";
+  tabbarStyle?: ViewProps["style"];
+};
+
+export type TabNavigatorScreenOptions = {
+  key: string;
+  screen: React.ReactElement<unknown>;
+  tab: (props: { isActive: boolean; onPress: () => void }) => React.ReactNode;
+};

package/src/types.ts

@@ -0,0 +1,48 @@
+export type PushScreenOptions = {
+  stackId?: string;
+  slotName?: string;
+  screenId?: string;
+};
+
+export type StackItem = {
+  id: string;
+  defaultSlotName?: string;
+  screens: string[];
+};
+
+export type ScreenItem = {
+  id: string;
+  stackId: string;
+  element: React.ReactElement<unknown>;
+  slotName?: string;
+};
+
+export type TabItem = {
+  id: string;
+  activeIndex: number;
+  history: number[];
+};
+
+export type NavigationState = {
+  stacks: {
+    lookup: Record<string, StackItem>;
+    ids: string[];
+  };
+  tabs: {
+    lookup: Record<string, TabItem>;
+    ids: string[];
+  };
+  screens: {
+    lookup: Record<string, ScreenItem>;
+    ids: string[];
+  };
+  debugModeEnabled: boolean;
+};
+
+export type RenderCharts = {
+  stacksByDepth: Record<string, string[]>;
+  tabsByDepth: Record<string, string[]>;
+  tabParentsById: Record<string, string>;
+  stackParentsById: Record<string, string>;
+  stacksByTabIndex: Record<string, string[]>;
+};

package/src/utils.ts

@@ -0,0 +1,14 @@
+export let generateStackId = createIdGenerator("stack");
+export let generateScreenId = createIdGenerator("screen");
+export let generateTabId = createIdGenerator("tab");
+
+function createIdGenerator(name: string) {
+  let counter = 0;
+
+  return function generateId() {
+    return name + "-" + counter++;
+  };
+}
+
+export let serializeTabIndexKey = (tabId: string, index: number) =>
+  `${tabId}-${index}`;