@rn-tools/navigation 2.2.6 → 2.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rn-tools/navigation",
-  "version": "2.2.6",
+  "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>
   );
 }
 

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} />;
@@ -144,8 +144,8 @@ let defaultScreenStyle: ViewStyle = {
 };
 
 export type StackScreenProps = RNScreenProps & {
-  header?: React.ReactElement<StackScreenHeaderProps>
-}
+  header?: React.ReactElement<StackScreenHeaderProps>;
+};
 
 let HeaderHeightContext = React.createContext<number>(0);
 
@@ -171,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(() => {
@@ -185,10 +185,6 @@ let StackScreen = React.memo(function StackScreen({
     }
 
     BackHandler.addEventListener("hardwareBackPress", backHandler);
-
-    return () => {
-      BackHandler.removeEventListener("hardwareBackPress", backHandler);
-    };
   }, [gestureEnabled, stack, screenId, isActive, dispatch]);
 
   let parentHeaderHeight = React.useContext(HeaderHeightContext);
@@ -202,7 +198,7 @@ let StackScreen = React.memo(function StackScreen({
           setHeaderHeight(e.nativeEvent.headerHeight);
         onHeaderHeightChangeProp?.(e);
       },
-      [onHeaderHeightChangeProp]
+      [onHeaderHeightChangeProp],
     );
 
   let style = React.useMemo(
@@ -211,16 +207,14 @@ let StackScreen = React.memo(function StackScreen({
       { paddingTop: headerHeight || parentHeaderHeight },
       styleProp,
     ],
-    [styleProp, headerHeight, parentHeaderHeight]
+    [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}
@@ -293,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;