@rn-tools/navigation 2.0.0 → 2.1.0

package/README.md

@@ -1,6 +1,23 @@
 # @rn-tools/navigation
 
-A set of useful navigation components for React Native. Built with `react-native-screens`. Designed with flexibility in mind.
+A set of useful navigation components for React Native. Built with `react-native-screens` and designed with flexibility in mind.
+
+## Table of Contents
+
+- [Installation](#installation)
+- [Basic Usage](#basic-usage)
+  - [Stack Navigator](#stack-navigator)
+  - [Tab Navigator](#tab-navigator)
+  - [Rendering a stack inside of a tabbed screen](#rendering-a-stack-inside-of-a-tabbed-screen)
+  - [Targeting a specific stack](#targeting-a-specific-stack)
+  - [Pushing a screen once](#pushing-a-screen-once)
+  - [Targeting specific tabs](#targeting-specific-tabs)
+  - [Rendering a header](#rendering-a-header)
+- [Components](#components)
+  - [Stack](#stack)
+  - [Tabs](#tabs)
+- [Guides](#guides)
+  - [Authentication](#authentication)
 
 ## Installation
 
@@ -8,13 +25,23 @@ 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. The [Guides](#guides) section covers how to use lower-level `Stack` and `Tabs` components in a variety of navigation patterns.
+For basic usage, the exported `Stack.Navigator` and `Tabs.Navigator` will get you up and running quickly.
+
+The [Guides](#guides) section covers how to use lower-level `Stack` and `Tabs` components in a variety of navigation patterns.
+
+`Stack` and `Tabs` are composable components that can be safely nested within each other without any additional configuration or setup.
 
 ### Stack Navigator
 
-The `Stack.Navigator` component manages stacks of screens. Under the hood this is using `react-native-screens` to handle pushing and popping natively.
+The `Stack.Navigator` component manages screens. Under the hood this is using `react-native-screens` to handle pushing and popping natively.
 
 Screens are pushed and popped by the exported navigation methods:
 
@@ -22,6 +49,8 @@ Screens are pushed and popped by the exported navigation methods:
 
 - `navigation.popScreen(numberOfScreens: number) => void`
 
+In the majority of cases, these methods will determine the right stack without you needing to specify. But you can target a specific stacks as well if you need to! This is covered in the [Targeting a specific stack](#targeting-a-specific-stack) section.
+
 ```tsx
 import { Stack, navigation } from "@rn-tools/navigation";
 import * as React from "react";
@@ -33,15 +62,17 @@ export function BasicStack() {
 
 function MyScreen({
   title,
-  showPopButton = false,
+  children,
 }: {
   title: string;
-  showPopButton?: boolean;
+  children?: React.ReactNode;
 }) {
   function pushScreen() {
     navigation.pushScreen(
       <Stack.Screen>
-        <MyScreen title="Pushed screen" showPopButton />
+        <MyScreen title="Pushed screen">
+          <Button title="Pop screen" onPress={popScreen} />
+        </MyScreen>
       </Stack.Screen>
     );
   }
@@ -54,13 +85,13 @@ function MyScreen({
     <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
       <Text>{title}</Text>
       <Button title="Push screen" onPress={pushScreen} />
-      {showPopButton && <Button title="Pop screen" onPress={popScreen} />}
+      {children}
     </View>
   );
 }
 ```
 
-**Note**: The components passed to `navigation.pushScreen` need to be wrapped in a `Stack.Screen` component. Create a wrapper to simplify your usage if you'd like:
+**Note**: The components passed to `navigation.pushScreen` need to be wrapped in a `Stack.Screen`. Create a wrapper to simplify your usage if you'd like:
 
 ```tsx
 function myPushScreen(
@@ -73,39 +104,31 @@ function myPushScreen(
 
 ### Tab Navigator
 
-The `Tabs.Navigator` component also uses `react-native-screens` to handle the tab switching natively. The active tab can be changed via the `navigation.setTabIndex` method, however the build in tabbar already handles switching between screens.
+The `Tabs.Navigator` component also uses `react-native-screens` to handle switching between tabs natively.
+
+The active tab can be changed via the `navigation.setTabIndex` method, however the built in tabbar handles switching between screens out of the box.
 
 ```tsx
-import {
-  Stack,
-  Tabs,
-  navigation,
-  Stack,
-  defaultTabbarStyle,
-} from "@rn-tools/navigation";
+import { Tabs, navigation, Stack } from "@rn-tools/navigation";
 import * as React from "react";
 import { View, Text, Button } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+// It's recommended to wrap your App in a SafeAreaProvider once
+import { SafeAreaProvider } from "react-native-safe-area-context";
 
 export function BasicTabs() {
-  return <Stack.Navigator rootScreen={<MyTabs />} />;
+  return (
+    <SafeAreaProvider>
+      <Stack.Navigator rootScreen={<MyTabs />} />
+    </SafeAreaProvider>
+  );
 }
 
 function MyTabs() {
-  // This hook requires you to wrap your app in a SafeAreaProvider component - see the `react-native-safe-area-context` package
-  let insets = useSafeAreaInsets();
-
-  let tabbarStyle = React.useMemo(() => {
-    return {
-      ...defaultTabbarStyle,
-      bottom: insets.bottom,
-    };
-  }, [insets.bottom]);
-
   return (
     <Tabs.Navigator
       tabbarPosition="bottom"
-      tabbarStyle={tabbarStyle}
+      tabbarStyle={{ backgroundColor: "blue" }}
       screens={[
         {
           key: "1",
@@ -147,17 +170,19 @@ function MyTab({
 
 function MyScreen({
   title,
-  showPopButton = false,
+  children,
   bg,
 }: {
   title: string;
-  showPopButton?: boolean;
+  children?: React.ReactNode;
   bg?: string;
 }) {
   function pushScreen() {
     navigation.pushScreen(
       <Stack.Screen>
-        <MyScreen title="Pushed screen" showPopButton />
+        <MyScreen title="Pushed screen" bg={bg}>
+          <Button title="Pop screen" onPress={popScreen} />
+        </MyScreen>
       </Stack.Screen>
     );
   }
@@ -177,7 +202,7 @@ function MyScreen({
     >
       <Text>{title}</Text>
       <Button title="Push screen" onPress={pushScreen} />
-      {showPopButton && <Button title="Pop screen" onPress={popScreen} />}
+      {children}
     </View>
   );
 }
@@ -187,8 +212,6 @@ function MyScreen({
 
 Each tab can have its own stack by nesting the `Stack.Navigator` component.
 
-- `navigation.pushScreen` will still work relative by pushing to the relative parent stack of the screen. See the next section for how to push a screen onto a specific stack.
-
 ```tsx
 function MyTabs() {
   return (
@@ -272,9 +295,70 @@ function switchMainTabsToTab(tabIndex: number) {
 }
 ```
 
+### Rendering a header
+
+Use the `Stack.Header` component to render a native header in a 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)
+
+**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";
+import { Button, View, TextInput } from "react-native";
+
+export function HeaderExample() {
+  return (
+    <View>
+      <Button
+        title="Push screen with header"
+        onPress={() => navigation.pushScreen(<MyScreenWithHeader />)}
+      />
+    </View>
+  );
+}
+
+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}
+      />
+
+      <View
+        style={{
+          flex: 1,
+          alignItems: "center",
+          paddingVertical: 48,
+        }}
+      >
+        <TextInput
+          style={{ fontSize: 26, fontWeight: "semibold" }}
+          value={title}
+          onChangeText={setTitle}
+          placeholder="Enter header text"
+        />
+      </View>
+    </Stack.Screen>
+  );
+}
+```
+
 ## Components
 
-The `Navigator` components in the previous examples are convenience wrappers around other lower level `Stack` and `Tabs` components. This section will briefly cover each of the underlying components so that you can build your own wrappers if needed
+The `Navigator` components in the previous examples are fairly straightforward wrappers around other lower level `Stack` and `Tabs` components. 
+
+If you need to customize behaviour, design a component API you prefer to use, or just enjoy writing your own components, you can use these implementations as a reference to build your own.
 
 ### Stack
 
@@ -311,30 +395,47 @@ export function StackNavigator({
   - Reference for props that can be passed: [Screen Props](https://github.com/software-mansion/react-native-screens/blob/main/guides/GUIDE_FOR_LIBRARY_AUTHORS.md#screen)
 - `Stack.Slot` - A slot for screens to be pushed into.
   - This component is used to render screens that are pushed using `navigation.pushScreen` - don't forget to render this somewhere in `Stack.Screens`!
+- `Stack.Header` - A header for a screen.
+  - **Must be rendered as the first child of a `Stack.Screen` component.**
+  - This is a `react-native-screens` StackHeader component under the hood.
+  - Reference for props that can be passed: [Header Props](https://github.com/software-mansion/react-native-screens/blob/main/guides/GUIDE_FOR_LIBRARY_AUTHORS.md#screenstackheaderconfig)
 
 ## Tabs
 
 This is the implementation of the exported `Tabs.Navigator` component:
 
 ```tsx
-type TabsNavigatorProps = Omit<TabsRootProps, "children"> & {
-  screens: Tabs.NavigatorScreenOptions[];
+export type TabNavigatorProps = Omit<TabsRootProps, "children"> & {
+  screens: TabNavigatorScreenOptions[];
   tabbarPosition?: "top" | "bottom";
   tabbarStyle?: ViewProps["style"];
 };
 
-type TabsNavigatorScreenOptions = {
+export type TabNavigatorScreenOptions = {
   key: string;
-  screen: React.ReactElement<ScreenProps>;
+  screen: React.ReactElement<unknown>;
   tab: (props: { isActive: boolean; onPress: () => void }) => React.ReactNode;
 };
 
-export function Tabs.Navigator({
+let TabNavigator = React.memo(function TabNavigator({
   screens,
   tabbarPosition = "bottom",
-  tabbarStyle,
+  tabbarStyle: tabbarStyleProp,
   ...rootProps
-}: TabsNavigatorProps) {
+}: TabNavigatorProps) {
+  let insets = useSafeAreaInsetsSafe();
+
+  let tabbarStyle = React.useMemo(() => {
+    return [
+      defaultTabbarStyle,
+      {
+        paddingBottom: tabbarPosition === "bottom" ? insets.bottom : 0,
+        paddingTop: tabbarPosition === "top" ? insets.top : 0,
+      },
+      tabbarStyleProp,
+    ];
+  }, [tabbarPosition, tabbarStyleProp, insets]);
+
   return (
     <Tabs.Root {...rootProps}>
       {tabbarPosition === "top" && (
@@ -360,7 +461,8 @@ export function Tabs.Navigator({
       )}
     </Tabs.Root>
   );
-}
+});
+
 ```
 
 - `Tabs.Root` - The root component for a tabs navigator.
@@ -373,6 +475,8 @@ export function Tabs.Navigator({
 - `Tabs.Tab` - A tab in a tabs navigator
   - This is a Pressable component that switches the active screen
 
+
+
 ## Guides
 
 ### Authentication
@@ -418,5 +522,3 @@ let useUser = () => {
   return user;
 };
 ```
-
-**Note:** Screens that are pushed using `pushScreen` are rendered in the `Slot` component

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rn-tools/navigation",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "main": "./src/index.ts",
   "license": "MIT",
   "files": [
@@ -30,6 +30,7 @@
   "peerDependencies": {
     "react": "*",
     "react-native": "*",
+    "react-native-safe-area-context": "*",
     "react-native-screens": "*"
   },
   "dependencies": {

package/src/contexts.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import * as React from "react";
 
 export let StackIdContext = React.createContext<string>("");
 export let ScreenIdContext = React.createContext<string>("");

package/src/navigation-reducer.ts

@@ -365,12 +365,13 @@ export function reducer(
       }
 
       let nextState: NavigationState = Object.assign({}, state);
+      let currentIndex = tab.activeIndex;
       nextState.tabs.lookup[tabId] = Object.assign(
         {},
         {
           ...nextState.tabs.lookup[tabId],
           activeIndex: index,
-          history: tab.history.filter((i) => i !== index).concat(index),
+          history: tab.history.filter((i) => i !== index).concat(currentIndex),
         }
       );
 
@@ -441,11 +442,16 @@ export function reducer(
       let { tabId } = action;
       let nextState: NavigationState = Object.assign({}, state);
 
-      let tab = nextState.tabs.lookup[tabId];
-      let last = tab.history.pop();
-      if (last != null) {
-        tab.activeIndex = last;
-      }
+      let tab  = nextState.tabs.lookup[tabId];
+
+      let lastActiveIndex = tab.history[tab.history.length - 1];
+
+      nextState.tabs.lookup = Object.assign({}, nextState.tabs.lookup, {
+        [tabId]: Object.assign({}, nextState.tabs.lookup[tabId], {
+          activeIndex: lastActiveIndex,
+          history: tab.history.filter((i) => i !== lastActiveIndex),
+        }),
+      });
 
       return nextState;
     }

package/src/navigation-store.ts

@@ -17,20 +17,18 @@ export function createNavigationStore() {
 
   let reducer = (state: NavigationState, action: NavigationAction) => {
     let nextState = navigationReducer(state, action, { renderCharts });
+    if (nextState.debugModeEnabled) {
+      console.debug(
+        `[@rntoolkit/navigation] action: ${action.type}`,
+        state,
+        nextState
+      );
+    }
     return { ...nextState };
   };
 
   let store = createStore(devtools(redux(reducer, initialState)));
 
-  store.subscribe((state) => {
-    if (state.debugModeEnabled) {
-      console.debug("[@rntoolkit/navigation] state updated: ", {
-        state,
-        renderCharts,
-      });
-    }
-  });
-
   return {
     store: store,
     dispatch: store.dispatch,
@@ -53,3 +51,8 @@ export function useNavigationDispatch() {
   let dispatch = React.useContext(NavigationDispatchContext);
   return dispatch;
 }
+
+export function useGetNavigationStore() {
+  let context = React.useContext(NavigationStateContext);
+  return context.getState
+}

package/src/navigation.tsx

@@ -12,6 +12,7 @@ import type { PushScreenOptions } from "./types";
 
 /**
  * Ideas:
+ *  - pull in safe area provider and use as default props to tabs
  *  - lifecycles / screen tracking
  *  - testing - internal and jest plugin
  */

package/src/stack.tsx

@@ -1,5 +1,14 @@
 import * as React from "react";
-import { BackHandler, StyleSheet, type ViewStyle } from "react-native";
+import {
+  BackHandler,
+  PixelRatio,
+  Platform,
+  StyleSheet,
+  useWindowDimensions,
+  View,
+  type LayoutRectangle,
+  type ViewStyle,
+} from "react-native";
 import {
   ScreenStackProps as RNScreenStackProps,
   Screen as RNScreen,
@@ -18,16 +27,18 @@ import {
 import { DEFAULT_SLOT_NAME } from "./navigation-reducer";
 import { useNavigationDispatch, useNavigationState } from "./navigation-store";
 import type { StackItem } from "./types";
-import { generateStackId } from "./utils";
+import { generateStackId, useSafeAreaInsetsSafe } from "./utils";
 
 let StackIdContext = React.createContext<string>("");
 let ScreenIdContext = React.createContext<string>("");
 
-const RNScreenStack = React.memo(function RNScreenStack(
+// 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
 ) {
-  const { children, gestureDetectorBridge, ...rest } = props;
-  const ref = React.useRef(null);
+  let { children, gestureDetectorBridge, ...rest } = props;
+  let ref = React.useRef(null);
 
   React.useEffect(() => {
     if (gestureDetectorBridge) {
@@ -112,18 +123,13 @@ function StackRoot({ children, id }: StackRootProps) {
   );
 }
 
-function StackScreens({
-  style: styleProp,
-  ...props
-}: RNScreenStackProps) {
+function StackScreens({ style: styleProp, ...props }: RNScreenStackProps) {
   let style = React.useMemo(
     () => styleProp || StyleSheet.absoluteFill,
     [styleProp]
   );
 
-  return (
-    <RNScreenStack {...props} style={style} />
-  );
+  return <RNScreenStack {...props} style={style} />;
 }
 
 let defaultScreenStyle: ViewStyle = {
@@ -180,7 +186,7 @@ let StackScreen = React.memo(function StackScreen({
     <RNScreen
       {...props}
       style={style}
-      // activityState={isActive ? 2 : 0}
+      activityState={isActive ? 2 : 0}
       gestureEnabled={gestureEnabled}
       onDismissed={onDismissed}
     >
@@ -224,7 +230,23 @@ let StackSlot = React.memo(function StackSlot({
 let StackScreenHeader = React.memo(function StackScreenHeader({
   ...props
 }: RNScreenStackHeaderConfigProps) {
-  return <RNScreenStackHeaderConfig {...props} />;
+  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>
+  );
 });
 
 type StackNavigatorProps = Omit<StackRootProps, "children"> & {
@@ -253,3 +275,47 @@ 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

@@ -21,8 +21,12 @@ import {
   TabIdContext,
   TabScreenIndexContext,
 } from "./contexts";
-import { useNavigationDispatch, useNavigationState } from "./navigation-store";
-import { generateTabId } from "./utils";
+import {
+  useGetNavigationStore,
+  useNavigationDispatch,
+  useNavigationState,
+} from "./navigation-store";
+import { generateTabId, useSafeAreaInsetsSafe } from "./utils";
 
 type TabsRootProps = {
   children: React.ReactNode;
@@ -121,6 +125,7 @@ let TabsScreen = React.memo(function TabsScreen({
 
   let tabId = React.useContext(TabIdContext);
   let tabs = useTabsInternal(tabId);
+  let getNavigationStore = useGetNavigationStore();
   let index = React.useContext(TabScreenIndexContext);
 
   let parentIsActive = React.useContext(ActiveContext);
@@ -129,6 +134,9 @@ let TabsScreen = React.memo(function TabsScreen({
 
   React.useEffect(() => {
     function backHandler() {
+      // Use getter to register the handler once on mount
+      // Prevents it from overriding child screen handlers
+      let tabs = getNavigationStore().tabs.lookup[tabId];
       if (tabs && tabs.history.length > 0) {
         dispatch({ type: "TAB_BACK", tabId });
         return true;
@@ -142,7 +150,7 @@ let TabsScreen = React.memo(function TabsScreen({
     return () => {
       BackHandler.removeEventListener("hardwareBackPress", backHandler);
     };
-  }, [tabId, dispatch, tabs]);
+  }, [tabId, dispatch, getNavigationStore]);
 
   let style = React.useMemo(
     () => styleProp || StyleSheet.absoluteFill,
@@ -242,12 +250,37 @@ let TabsTab = React.memo(function TabsTab({
 });
 
 
+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;
+};
+
 let TabNavigator = React.memo(function TabNavigator({
   screens,
   tabbarPosition = "bottom",
-  tabbarStyle,
+  tabbarStyle: tabbarStyleProp,
   ...rootProps
 }: TabNavigatorProps) {
+  let insets = useSafeAreaInsetsSafe();
+
+  let tabbarStyle = React.useMemo(() => {
+    return [
+      defaultTabbarStyle,
+      {
+        paddingBottom: tabbarPosition === "bottom" ? insets.bottom : 0,
+        paddingTop: tabbarPosition === "top" ? insets.top : 0,
+      },
+      tabbarStyleProp,
+    ];
+  }, [tabbarPosition, tabbarStyleProp, insets]);
+
   return (
     <Tabs.Root {...rootProps}>
       {tabbarPosition === "top" && (
@@ -283,15 +316,3 @@ export let Tabs = {
   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/utils.ts

@@ -1,3 +1,6 @@
+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");
 export let generateTabId = createIdGenerator("tab");
@@ -12,3 +15,27 @@ function createIdGenerator(name: string) {
 
 export let serializeTabIndexKey = (tabId: string, index: number) =>
   `${tabId}-${index}`;
+
+
+
+
+let baseInsets: EdgeInsets = {
+  top: Platform.OS === "ios" ? 59 : 49,
+  bottom: Platform.OS === "ios" ? 34 : 0,
+  right: 0,
+  left: 0,
+};
+
+export function useSafeAreaInsetsSafe() {
+  let insets = baseInsets;
+
+  try {
+    // Linter thinks this is conditional but it seems fine
+    // eslint-disable-next-line
+    insets = useSafeAreaInsets();
+  } catch (error) {
+    console.log("useSafeAreaInsets is not available");
+  }
+
+  return insets;
+}