@rn-tools/navigation 2.2.3 → 2.2.5

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
 
@@ -362,6 +364,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.
@@ -544,13 +567,13 @@ import * as Linking from "expo-linking";
 import * as React from "react";
 import { View, Text, TouchableOpacity } from "react-native";
 
-export function DeepLinksExample() {
+export default function DeepLinksExample() {
   // You'll likely want to use Expo's Linking API to get the current URL and path
   // let url = Linking.useURL()
   // let { path } = Linking.parse(url)
 
   // But it's easier to test hardcoded strings for the sake of this example
-  let path = "/testing/home/item/1";
+  let path = "/home/item/2";
 
   return (
     <Stack.Navigator
@@ -559,23 +582,7 @@ export 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;
 
@@ -665,7 +672,14 @@ function MyScreen({
 }) {
   return (
     <View style={{ flex: 1, backgroundColor: bg }}>
-      <View className="flex-1 items-center justify-center gap-4">
+      <View
+        style={{
+          flex: 1,
+          justifyContent: "center",
+          alignItems: "center",
+          gap: 4,
+        }}
+      >
         <Text style={{ fontSize: 26, fontWeight: "semibold" }}>{title}</Text>
 
         {!isRoot && (
@@ -681,7 +695,6 @@ function MyScreen({
     </View>
   );
 }
-
 ```
 
 ### Preventing going back
@@ -765,3 +778,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.3",
+  "version": "2.2.5",
   "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]
@@ -145,11 +145,14 @@ let defaultScreenStyle: ViewStyle = {
 
 export type StackScreenProps = RNScreenProps;
 
+let HeaderHeightContext = React.createContext<number>(0);
+
 let StackScreen = React.memo(function StackScreen({
   children,
   style: styleProp,
   gestureEnabled = true,
   onDismissed: onDismissedProp,
+  onHeaderHeightChange: onHeaderHeightChangeProp,
   ...props
 }: StackScreenProps) {
   let stackId = React.useContext(StackIdContext);
@@ -187,17 +190,31 @@ let StackScreen = React.memo(function StackScreen({
 
   let style = React.useMemo(() => styleProp || defaultScreenStyle, [styleProp]);
 
+  let [headerHeight, setHeaderHeight] = React.useState(0);
+
+  let onHeaderHeightChange: ScreenProps["onHeaderHeightChange"] =
+    React.useCallback(
+      (e) => {
+        Platform.OS === "ios" && setHeaderHeight(e.nativeEvent.headerHeight);
+        onHeaderHeightChangeProp?.(e);
+      },
+      [onHeaderHeightChangeProp]
+    );
+
   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}
+      >
+        {children}
+      </RNScreen>
+    </HeaderHeightContext.Provider>
   );
 });
 
@@ -233,24 +250,23 @@ 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;
-    }
+}: StackScreenHeaderProps) {
+  let headerHeight = React.useContext(HeaderHeightContext);
 
-    return getDefaultHeaderHeight(layout, false, insets.top);
-  }, [layout, insets]);
+  let placeholderStyle = React.useMemo<ViewStyle>(() => {
+    return {
+      height: headerHeight,
+    };
+  }, [headerHeight]);
 
   return (
     <React.Fragment>
       <RNScreenStackHeaderConfig {...props} />
-      <View style={{ height: headerHeight }} />
+      <View style={placeholderStyle} />
     </React.Fragment>
   );
 });
@@ -279,7 +295,7 @@ let ScreenStackHeaderBackButtonImage = React.memo(
   }
 );
 
-type StackNavigatorProps = Omit<StackRootProps, "children"> & {
+export type StackNavigatorProps = Omit<StackRootProps, "children"> & {
   rootScreen: React.ReactElement<unknown>;
 };
 
@@ -309,47 +325,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,

package/src/utils.ts

@@ -34,7 +34,7 @@ export function useSafeAreaInsetsSafe() {
     // eslint-disable-next-line
     insets = useSafeAreaInsets();
   } catch (error) {
-    console.log("useSafeAreaInsets is not available");
+    console.warn("`react-native-safe-area-context` missing - Please install and wrap your app in a SafeAreaProvider" );
   }
 
   return insets;