@rn-tools/navigation 2.2.4 → 2.2.6

package/README.md

@@ -13,6 +13,7 @@ A set of useful navigation components for React Native. Built with `react-native
   - [Pushing a screen once](#pushing-a-screen-once)
   - [Targeting specific tabs](#targeting-specific-tabs)
   - [Rendering a header](#rendering-a-header)
+  - [Configuring screen props](#configuring-screen-props)
 - [Components](#components)
   - [Stack](#stack)
   - [Tabs](#tabs)
@@ -20,6 +21,7 @@ A set of useful navigation components for React Native. Built with `react-native
   - [Authentication](#authentication)
   - [Deep Links](#deep-links)
   - [Preventing going back](#preventing-going-back)
+  - [Testing](#testing)
 
 ## Installation
 
@@ -299,16 +301,12 @@ function switchMainTabsToTab(tabIndex: number) {
 
 ### Rendering a header
 
-Use the `Stack.Header` component to render a native header in a screen.
+Use the `Stack.Header` component to render a native header in a screen by passing it as a prop to `Stack.Screen`.
 
 Under the hood this is using `react-native-screens` header - [here is a reference for the available props](https://github.com/software-mansion/react-native-screens/blob/main/guides/GUIDE_FOR_LIBRARY_AUTHORS.md#screenstackheaderconfig)
 
 You can provide custom left, center, and right views in the header by using the `Stack.HeaderLeft`, `Stack.HeaderCenter`, and `Stack.HeaderRight` view container components as children of `Stack.Header`.
 
-**Note:** Wrap your App in a `SafeAreaProvider` to ensure your screen components are rendered correctly with the header
-
-**Note:**: The header component **has to be the first child** of a `Stack.Screen` component.
-
 ```tsx
 import { navigation, Stack } from "@rn-tools/navigation";
 import * as React from "react";
@@ -329,20 +327,20 @@ function MyScreenWithHeader() {
   let [title, setTitle] = React.useState("");
 
   return (
-    <Stack.Screen>
-      {/* Header must be the first child */}
-      <Stack.Header
-        title={title}
-        // Some potentially useful props - see the reference posted above for all available props
-        backTitle="Custom back title"
-        backTitleFontSize={16}
-        hideBackButton={false}
-      >
-        <Stack.HeaderRight>
-          <Text>Custom right text!</Text>
-        </Stack.HeaderRight>
-      </Stack.Header>
-
+    <Stack.Screen
+      header={
+        <Stack.Header
+          title={title}
+          backTitle="Custom back title"
+          backTitleFontSize={16}
+          hideBackButton={false}
+        >
+          <Stack.HeaderRight>
+            <Text>Custom right text!</Text>
+          </Stack.HeaderRight>
+        </Stack.Header>
+      }
+    >
       <View
         style={{
           flex: 1,
@@ -362,6 +360,27 @@ function MyScreenWithHeader() {
 }
 ```
 
+### Configuring screen props
+
+The `Stack.Screen` component is a wrapper around the `Screen` component from `react-native-screens`. [Screen props reference](https://github.com/software-mansion/react-native-screens/blob/main/src/types.tsx#L101)
+
+Some notable props are `stackPresentation`, `stackAnimation`, and `gestureEnabled`, however there are many more available.
+
+```tsx
+function pushNativeModalScreen() {
+  navigation.pushScreen(
+    <Stack.Screen
+      stackPresentation="modal"
+      stackAnimation="slide_from_bottom"
+      gestureEnabled={true}
+    >
+      {/* If you want to push more screens inside of the modal, wrap it with a Stack */}
+      <Stack.Navigator rootScreen={<MyScreen title="Modal screen" />} />
+    </Stack.Screen>
+  );
+}
+```
+
 ## Components
 
 The `Navigator` components in the previous examples are fairly straightforward wrappers around other lower level `Stack` and `Tabs` components.
@@ -550,7 +569,7 @@ export default function DeepLinksExample() {
   // let { path } = Linking.parse(url)
 
   // But it's easier to test hardcoded strings for the sake of this example
-  let path = "/testing/home/item/2";
+  let path = "/home/item/2";
 
   return (
     <Stack.Navigator
@@ -559,23 +578,7 @@ export default function DeepLinksExample() {
           path={path}
           handlers={[
             {
-              path: "/testing/home/item1/:itemId",
-              handler: (params: { itemId: string }) => {
-                let itemId = params.itemId;
-
-                // Go to home tab
-                navigation.setTabIndex(0);
-
-                // Push the screen we want
-                navigation.pushScreen(
-                  <Stack.Screen>
-                    <MyScreen title={`Item: ${itemId}`} />
-                  </Stack.Screen>
-                );
-              },
-            },
-            {
-              path: "/testing/home/item/:itemId",
+              path: "/home/item/:itemId",
               handler: (params: { itemId: string }) => {
                 let itemId = params.itemId;
 
@@ -688,7 +691,6 @@ function MyScreen({
     </View>
   );
 }
-
 ```
 
 ### Preventing going back
@@ -745,17 +747,19 @@ function MyScreen() {
       preventNativeDismiss={!canGoBack}
       nativeBackButtonDismissalEnabled={!canGoBack}
       gestureEnabled={canGoBack}
+      header={
+        <Stack.Header title="Prevent going back">
+          <Stack.HeaderLeft>
+            <TouchableOpacity
+              onPress={onPressBackButton}
+              style={{ opacity: canGoBack ? 1 : 0.4 }}
+            >
+              <Text>Back</Text>
+            </TouchableOpacity>
+          </Stack.HeaderLeft>
+        </Stack.Header>
+      }
     >
-      <Stack.Header title="Prevent going back">
-        <Stack.HeaderLeft>
-          <TouchableOpacity
-            onPress={onPressBackButton}
-            style={{ opacity: canGoBack ? 1 : 0.4 }}
-          >
-            <Text>Back</Text>
-          </TouchableOpacity>
-        </Stack.HeaderLeft>
-      </Stack.Header>
       <View style={{ paddingVertical: 48, paddingHorizontal: 16, gap: 16 }}>
         <Text style={{ fontSize: 22, fontWeight: "medium" }}>
           Enter some text and try to go back
@@ -772,3 +776,13 @@ function MyScreen() {
   );
 }
 ```
+
+### Testing
+
+Recommended:
+
+- Check out the getting started portion of [React Native Testing Library](https://callstack.github.io/react-native-testing-library/docs/start/quick-start)
+
+- Set up [Jest Expo](https://docs.expo.dev/develop/unit-testing/)
+
+- Reset the navigation state between each test by calling `navigation.reset()`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rn-tools/navigation",
-  "version": "2.2.4",
+  "version": "2.2.6",
   "main": "./src/index.ts",
   "license": "MIT",
   "files": [
@@ -13,9 +13,11 @@
   },
   "devDependencies": {
     "@rn-tools/eslint-config": "*",
+    "@testing-library/react-native": "^12.5.1",
     "@types/jest": "^27.0.3",
     "@types/react": "~18.2.79",
     "@types/react-native": "^0.72.8",
+    "@types/react-test-renderer": "^18",
     "@typescript-eslint/eslint-plugin": "^6.8.0",
     "@typescript-eslint/parser": "^6.8.0",
     "babel-preset-expo": "~11.0.0",
@@ -25,6 +27,7 @@
     "jest-expo": "^51.0.2",
     "lint-staged": "^15.2.0",
     "prettier": "^3.2.1",
+    "react-test-renderer": "18.2.0",
     "typescript": "~5.3.3"
   },
   "peerDependencies": {

package/src/__tests__/navigation-reducer.test.tsx

@@ -218,8 +218,6 @@ describe("reducer", () => {
     };
 
     let newState = reducer(initialStateWithStack, action, context);
-    console.log(newState);
-
     expect(newState.screens.ids).not.toContain("screen1");
     expect(newState.stacks.lookup.stack1.screens).not.toContain("screen1");
     expect(newState.screens.ids).toContain("screen2");

package/src/__tests__/stack.test.tsx

@@ -0,0 +1,48 @@
+import { fireEvent, render } from "@testing-library/react-native";
+import { Button, Text } from "react-native";
+
+import { navigation } from "../navigation";
+import { Stack } from "../stack";
+
+describe("<Stack />", () => {
+  beforeEach(() => {
+    navigation.reset();
+  });
+
+  test("render", () => {
+    let { getByText } = render(
+      <Stack.Navigator
+        rootScreen={
+          <>
+            <Text>Stack works!</Text>
+          </>
+        }
+      />
+    );
+    let element = getByText("Stack works!");
+    expect(element).toBeTruthy();
+  });
+
+  test("pushing a screen works", () => {
+    let { getByText, queryByText } = render(
+      <Stack.Navigator
+        rootScreen={
+          <Button
+            title="Push"
+            onPress={() =>
+              navigation.pushScreen(
+                <Stack.Screen>
+                  <Text>Pushed screen!</Text>
+                </Stack.Screen>
+              )
+            }
+          />
+        }
+      />
+    );
+
+    expect(queryByText("Pushed screen")).toBe(null);
+    fireEvent.press(getByText("Push"));
+    getByText("Pushed screen!");
+  });
+});

package/src/navigation.tsx

@@ -13,8 +13,6 @@ import type { PushScreenOptions } from "./types";
 /**
  * Ideas:
  *  - lifecycles / screen tracking
- *  - testing guide
- *  - routing example -> fragments to ids
  */
 
 export function createNavigation() {
@@ -66,6 +64,15 @@ function getNavigationFns({ store, dispatch, renderCharts }: NavigationStore) {
       0
     );
     let tabIds = renderCharts.tabsByDepth[maxDepth];
+
+    if (!tabIds || tabIds?.length === 0) {
+      if (store.getState().debugModeEnabled) {
+        console.warn("No focused tabs found");
+      }
+
+      return;
+    }
+
     let topTabId = tabIds[tabIds.length - 1];
     return topTabId;
   }

package/src/stack.tsx

@@ -1,13 +1,10 @@
 import * as React from "react";
 import {
   BackHandler,
-  PixelRatio,
   Platform,
   StyleSheet,
-  useWindowDimensions,
   View,
   type ImageProps,
-  type LayoutRectangle,
   type ViewProps,
   type ViewStyle,
 } from "react-native";
@@ -21,6 +18,7 @@ import {
   ScreenStackHeaderCenterView as RNScreenStackHeaderCenterView,
   ScreenStackHeaderConfigProps as RNScreenStackHeaderConfigProps,
   ScreenStackHeaderBackButtonImage as RNScreenStackHeaderBackButtonImage,
+  type ScreenProps,
 } from "react-native-screens";
 import ScreenStackNativeComponent from "react-native-screens/src/fabric/ScreenStackNativeComponent";
 
@@ -59,7 +57,7 @@ let RNScreenStack = React.memo(function RNScreenStack(
   );
 });
 
-type StackRootProps = {
+export type StackRootProps = {
   children: React.ReactNode;
   id?: string;
 };
@@ -129,7 +127,9 @@ function StackRoot({ children, id }: StackRootProps) {
   );
 }
 
-function StackScreens({ style: styleProp, ...props }: RNScreenStackProps) {
+export type StackScreensProps = RNScreenStackProps;
+
+function StackScreens({ style: styleProp, ...props }: StackScreensProps) {
   let style = React.useMemo(
     () => styleProp || StyleSheet.absoluteFill,
     [styleProp]
@@ -143,13 +143,19 @@ let defaultScreenStyle: ViewStyle = {
   backgroundColor: "white",
 };
 
-export type StackScreenProps = RNScreenProps;
+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);
@@ -185,19 +191,44 @@ let StackScreen = React.memo(function StackScreen({
     };
   }, [gestureEnabled, stack, screenId, isActive, dispatch]);
 
-  let style = React.useMemo(() => styleProp || defaultScreenStyle, [styleProp]);
+  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]
+  );
 
   return (
-    // @ts-expect-error - Ref typings in RNScreens
-    <RNScreen
-      {...props}
-      style={style}
-      activityState={isActive ? 2 : 0}
-      gestureEnabled={gestureEnabled}
-      onDismissed={onDismissed}
-    >
-      {children}
-    </RNScreen>
+    <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>
   );
 });
 
@@ -233,26 +264,12 @@ let StackSlot = React.memo(function StackSlot({
   );
 });
 
+export type StackScreenHeaderProps = RNScreenStackHeaderConfigProps;
+
 let StackScreenHeader = React.memo(function StackScreenHeader({
   ...props
-}: RNScreenStackHeaderConfigProps) {
-  let layout = useWindowDimensions();
-  let insets = useSafeAreaInsetsSafe();
-
-  let headerHeight = React.useMemo(() => {
-    if (Platform.OS === "android") {
-      return 0;
-    }
-
-    return getDefaultHeaderHeight(layout, false, insets.top);
-  }, [layout, insets]);
-
-  return (
-    <React.Fragment>
-      <RNScreenStackHeaderConfig {...props} />
-      <View style={{ height: headerHeight }} />
-    </React.Fragment>
-  );
+}: StackScreenHeaderProps) {
+  return <RNScreenStackHeaderConfig {...props} />;
 });
 
 let StackScreenHeaderLeft = React.memo(function StackScreenHeaderLeft({
@@ -279,7 +296,7 @@ let ScreenStackHeaderBackButtonImage = React.memo(
   }
 );
 
-type StackNavigatorProps = Omit<StackRootProps, "children"> & {
+export type StackNavigatorProps = Omit<StackRootProps, "children"> & {
   rootScreen: React.ReactElement<unknown>;
 };
 
@@ -309,47 +326,3 @@ export let Stack = {
   Slot: StackSlot,
   Navigator: StackNavigator,
 };
-
-// `onLayout` event does not return a value for the native header component
-// This function is copied from react-navigation to get the default header heights
-// Ref: https://github.com/react-navigation/react-navigation/blob/main/packages/elements/src/Header/getDefaultHeaderHeight.tsx#L5
-function getDefaultHeaderHeight(
-  layout: Pick<LayoutRectangle, "width" | "height">,
-  // TODO - handle modal headers and substacks
-  modalPresentation: boolean,
-  topInset: number
-): number {
-  let headerHeight;
-
-  // On models with Dynamic Island the status bar height is smaller than the safe area top inset.
-  let hasDynamicIsland = Platform.OS === "ios" && topInset > 50;
-  let statusBarHeight = hasDynamicIsland
-    ? topInset - (5 + 1 / PixelRatio.get())
-    : topInset;
-
-  let isLandscape = layout.width > layout.height;
-
-  if (Platform.OS === "ios") {
-    if (Platform.isPad || Platform.isTV) {
-      if (modalPresentation) {
-        headerHeight = 56;
-      } else {
-        headerHeight = 50;
-      }
-    } else {
-      if (isLandscape) {
-        headerHeight = 32;
-      } else {
-        if (modalPresentation) {
-          headerHeight = 56;
-        } else {
-          headerHeight = 44;
-        }
-      }
-    }
-  } else {
-    headerHeight = 64;
-  }
-
-  return headerHeight + statusBarHeight;
-}

package/src/tabs.tsx

@@ -28,7 +28,7 @@ import {
 } from "./navigation-store";
 import { generateTabId, useSafeAreaInsetsSafe } from "./utils";
 
-type TabsRootProps = {
+export type TabsRootProps = {
   children: React.ReactNode;
   id?: string;
 };
@@ -44,13 +44,7 @@ let useTabsInternal = (tabId = "") =>
     return tab;
   });
 
-let TabsRoot = React.memo(function TabsRoot({
-  children,
-  id,
-}: {
-  children: React.ReactNode;
-  id?: string;
-}) {
+let TabsRoot = React.memo(function TabsRoot({ children, id }: TabsRootProps) {
   let tabIdRef = React.useRef(id || generateTabId());
   let tabId = tabIdRef.current;
   let tabs = useTabsInternal(tabId);
@@ -99,10 +93,9 @@ let defaultScreenContainerStyle = {
   flex: 1,
 };
 
-function TabsScreens({
-  children,
-  ...props
-}: { children: React.ReactNode } & RNScreenContainerProps) {
+export type TabsScreensProps = RNScreenContainerProps;
+
+function TabsScreens({ children, ...props }: TabsScreensProps) {
   return (
     <RNScreenContainer style={defaultScreenContainerStyle} {...props}>
       {React.Children.map(children, (child, index) => {
@@ -116,11 +109,13 @@ function TabsScreens({
   );
 }
 
+export type TabsScreenProps = RNScreenProps;
+
 let TabsScreen = React.memo(function TabsScreen({
   children,
   style: styleProp,
   ...props
-}: { children: React.ReactNode } & RNScreenProps) {
+}: TabsScreenProps) {
   let dispatch = useNavigationDispatch();
 
   let tabId = React.useContext(TabIdContext);
@@ -177,6 +172,7 @@ export let defaultTabbarStyle: ViewStyle = {
   backgroundColor: "white",
 };
 
+
 let TabsTabbar = React.memo(function TabsTabbar({
   children,
   style: styleProp,