@rn-tools/navigation 2.2.5 → 2.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rn-tools/navigation",
-  "version": "2.2.5",
+  "version": "2.3.0",
   "main": "./src/index.ts",
   "license": "MIT",
   "files": [
@@ -22,7 +22,7 @@
     "@typescript-eslint/parser": "^6.8.0",
     "babel-preset-expo": "~11.0.0",
     "eslint": "^8.56.0",
-    "expo": "^51.0.8",
+    "expo": "~52.0.0",
     "jest": "^29.7.0",
     "jest-expo": "^51.0.2",
     "lint-staged": "^15.2.0",
@@ -33,7 +33,6 @@
   "peerDependencies": {
     "react": "*",
     "react-native": "*",
-    "react-native-safe-area-context": "*",
     "react-native-screens": "*"
   },
   "dependencies": {

package/{README.md → readme.md}

@@ -29,12 +29,6 @@ A set of useful navigation components for React Native. Built with `react-native
 yarn expo install @rn-tools/navigation react-native-screens
 ```
 
-**Note:** It's recommended that you install and wrap your app in a `SafeAreaProvider` to ensure components are rendered correctly based on the device's insets:
-
-```bash
-yarn expo install react-native-safe-area-context
-```
-
 ## Basic Usage
 
 For basic usage, the exported `Stack.Navigator` and `Tabs.Navigator` will get you up and running quickly.
@@ -117,14 +111,10 @@ import { Tabs, navigation, Stack } from "@rn-tools/navigation";
 import * as React from "react";
 import { View, Text, Button } from "react-native";
 
-// It's recommended to wrap your App in a SafeAreaProvider once
-import { SafeAreaProvider } from "react-native-safe-area-context";
 
 export function BasicTabs() {
   return (
-    <SafeAreaProvider>
       <Stack.Navigator rootScreen={<MyTabs />} />
-    </SafeAreaProvider>
   );
 }
 
@@ -301,16 +291,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";
@@ -331,20 +317,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,
@@ -751,17 +737,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

package/src/stack.tsx

@@ -31,7 +31,7 @@ import {
 import { DEFAULT_SLOT_NAME } from "./navigation-reducer";
 import { useNavigationDispatch, useNavigationState } from "./navigation-store";
 import type { StackItem } from "./types";
-import { generateStackId, useSafeAreaInsetsSafe } from "./utils";
+import { generateStackId } from "./utils";
 
 let StackIdContext = React.createContext<string>("");
 let ScreenIdContext = React.createContext<string>("");
@@ -39,7 +39,7 @@ 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
+  props: RNScreenStackProps,
 ) {
   let { children, gestureDetectorBridge, ...rest } = props;
   let ref = React.useRef(null);
@@ -64,7 +64,7 @@ export type StackRootProps = {
 
 let useStackInternal = (stackId = "") => {
   let stack: StackItem | undefined = useNavigationState(
-    (state) => state.stacks.lookup[stackId]
+    (state) => state.stacks.lookup[stackId],
   );
   return stack;
 };
@@ -132,7 +132,7 @@ export type StackScreensProps = RNScreenStackProps;
 function StackScreens({ style: styleProp, ...props }: StackScreensProps) {
   let style = React.useMemo(
     () => styleProp || StyleSheet.absoluteFill,
-    [styleProp]
+    [styleProp],
   );
 
   return <RNScreenStack {...props} style={style} />;
@@ -143,7 +143,9 @@ let defaultScreenStyle: ViewStyle = {
   backgroundColor: "white",
 };
 
-export type StackScreenProps = RNScreenProps;
+export type StackScreenProps = RNScreenProps & {
+  header?: React.ReactElement<StackScreenHeaderProps>;
+};
 
 let HeaderHeightContext = React.createContext<number>(0);
 
@@ -153,6 +155,7 @@ let StackScreen = React.memo(function StackScreen({
   gestureEnabled = true,
   onDismissed: onDismissedProp,
   onHeaderHeightChange: onHeaderHeightChangeProp,
+  header,
   ...props
 }: StackScreenProps) {
   let stackId = React.useContext(StackIdContext);
@@ -168,7 +171,7 @@ let StackScreen = React.memo(function StackScreen({
       dispatch({ type: "POP_SCREEN_BY_KEY", key: screenId });
       onDismissedProp?.(e);
     },
-    [onDismissedProp, dispatch, screenId]
+    [onDismissedProp, dispatch, screenId],
   );
 
   React.useEffect(() => {
@@ -182,36 +185,41 @@ let StackScreen = React.memo(function StackScreen({
     }
 
     BackHandler.addEventListener("hardwareBackPress", backHandler);
-
-    return () => {
-      BackHandler.removeEventListener("hardwareBackPress", backHandler);
-    };
   }, [gestureEnabled, stack, screenId, isActive, dispatch]);
 
-  let style = React.useMemo(() => styleProp || defaultScreenStyle, [styleProp]);
-
-  let [headerHeight, setHeaderHeight] = React.useState(0);
+  let parentHeaderHeight = React.useContext(HeaderHeightContext);
+  let [headerHeight, setHeaderHeight] = React.useState(parentHeaderHeight);
 
   let onHeaderHeightChange: ScreenProps["onHeaderHeightChange"] =
     React.useCallback(
       (e) => {
-        Platform.OS === "ios" && setHeaderHeight(e.nativeEvent.headerHeight);
+        Platform.OS === "ios" &&
+          e.nativeEvent.headerHeight > 0 &&
+          setHeaderHeight(e.nativeEvent.headerHeight);
         onHeaderHeightChangeProp?.(e);
       },
-      [onHeaderHeightChangeProp]
+      [onHeaderHeightChangeProp],
     );
 
+  let style = React.useMemo(
+    () => [
+      defaultScreenStyle,
+      { paddingTop: headerHeight || parentHeaderHeight },
+      styleProp,
+    ],
+    [styleProp, headerHeight, parentHeaderHeight],
+  );
+
   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>
@@ -255,20 +263,7 @@ export type StackScreenHeaderProps = RNScreenStackHeaderConfigProps;
 let StackScreenHeader = React.memo(function StackScreenHeader({
   ...props
 }: StackScreenHeaderProps) {
-  let headerHeight = React.useContext(HeaderHeightContext);
-
-  let placeholderStyle = React.useMemo<ViewStyle>(() => {
-    return {
-      height: headerHeight,
-    };
-  }, [headerHeight]);
-
-  return (
-    <React.Fragment>
-      <RNScreenStackHeaderConfig {...props} />
-      <View style={placeholderStyle} />
-    </React.Fragment>
-  );
+  return <RNScreenStackHeaderConfig {...props} />;
 });
 
 let StackScreenHeaderLeft = React.memo(function StackScreenHeaderLeft({
@@ -292,7 +287,7 @@ let StackScreenHeaderRight = React.memo(function StackScreenHeaderRight({
 let ScreenStackHeaderBackButtonImage = React.memo(
   function ScreenStackHeaderBackButtonImage(props: ImageProps) {
     return <RNScreenStackHeaderBackButtonImage {...props} />;
-  }
+  },
 );
 
 export type StackNavigatorProps = Omit<StackRootProps, "children"> & {

package/src/tabs.tsx

@@ -141,10 +141,6 @@ let TabsScreen = React.memo(function TabsScreen({
     }
 
     BackHandler.addEventListener("hardwareBackPress", backHandler);
-
-    return () => {
-      BackHandler.removeEventListener("hardwareBackPress", backHandler);
-    };
   }, [tabId, dispatch, getNavigationStore]);
 
   let style = React.useMemo(
@@ -153,7 +149,6 @@ let TabsScreen = React.memo(function TabsScreen({
   );
 
   return (
-    // @ts-expect-error - Ref typings in RNScreens
     <RNScreen
       active={isActive ? 1 : 0}
       activityState={isActive ? 2 : 0}

package/src/utils.ts

@@ -1,5 +1,4 @@
 import { Platform } from 'react-native';
-import { useSafeAreaInsets, type EdgeInsets } from 'react-native-safe-area-context'
 
 export let generateStackId = createIdGenerator("stack");
 export let generateScreenId = createIdGenerator("screen");
@@ -19,7 +18,7 @@ export let serializeTabIndexKey = (tabId: string, index: number) =>
 
 
 
-let baseInsets: EdgeInsets = {
+let baseInsets = {
   top: Platform.OS === "ios" ? 59 : 49,
   bottom: Platform.OS === "ios" ? 34 : 0,
   right: 0,
@@ -32,9 +31,9 @@ export function useSafeAreaInsetsSafe() {
   try {
     // Linter thinks this is conditional but it seems fine
     // eslint-disable-next-line
-    insets = useSafeAreaInsets();
+    insets = baseInsets;
   } catch (error) {
-    console.warn("`react-native-safe-area-context` missing - Please install and wrap your app in a SafeAreaProvider" );
+    console.warn("`react-native-safe-area-context` missing - Please install and wrap your app in a SafeAreaProvider");
   }
 
   return insets;