chore: minor tweaks

packages/drawer/src/views/legacy/Drawer.tsx

@@ -523,7 +523,7 @@ export default class DrawerView extends React.Component<DrawerProps> {
         : multiply(this.drawerWidth, -1);
 
     // FIXME: Currently hitSlop is broken when on Android when drawer is on right
-    // https://github.com/kmagiera/react-native-gesture-handler/issues/569
+    // https://github.com/software-mansion/react-native-gesture-handler/issues/569
     const hitSlop = isRight
       ? // Extend hitSlop to the side of the screen when drawer is closed
         // This lets the user drag the drawer from the side of the screen

packages/drawer/src/views/modern/Drawer.tsx

@@ -133,7 +133,7 @@ export default function Drawer({
   };
 
   // FIXME: Currently hitSlop is broken when on Android when drawer is on right
-  // https://github.com/kmagiera/react-native-gesture-handler/issues/569
+  // https://github.com/software-mansion/react-native-gesture-handler/issues/569
   const hitSlop = isRight
     ? // Extend hitSlop to the side of the screen when drawer is closed
       // This lets the user drag the drawer from the side of the screen

packages/elements/src/types.tsx

@@ -11,7 +11,7 @@ export type Layout = { width: number; height: number };
 export type HeaderOptions = {
   /**
    * String or a function that returns a React Element to be used by the header.
-   * Defaults to scene `title`.
+   * Defaults to screen `title` or route name.
    *
    * It receives `allowFontScaling`, `tintColor`, `style` and `children` in the options object as an argument.
    * The title string is passed in `children`.

packages/native-stack/README.md

@@ -1,5 +1,5 @@
 # `@react-navigation/native-stack`
 
-Stack navigator for React Native using native primitives for navigation. Uses [`react-native-screens`](https://github.com/kmagiera/react-native-screens) under the hood.
+Stack navigator for React Native using native primitives for navigation. Uses [`react-native-screens`](https://github.com/software-mansion/react-native-screens) under the hood.
 
 Installation instructions and documentation can be found on the [React Navigation website](https://reactnavigation.org/docs/native-stack-navigator.html).

packages/native-stack/src/types.tsx

@@ -94,10 +94,10 @@ export type NativeStackNavigationOptions = {
    *
    * @platform ios
    */
-  headerBackTitleStyle?: {
+  headerBackTitleStyle?: StyleProp<{
     fontFamily?: string;
     fontSize?: number;
-  };
+  }>;
   /**
    * Image to display in the header as the icon in the back button.
    * Defaults to back icon image for the platform
@@ -197,10 +197,12 @@ export type NativeStackNavigationOptions = {
   headerRight?: (props: { tintColor?: string }) => React.ReactNode;
   /**
    * String or a function that returns a React Element to be used by the header.
-   * Defaults to scene `title`.
+   * Defaults to screen `title` or route name.
    *
-   * It receives `tintColor` and`children` in the options object as an argument.
+   * When a function is passed, it receives `tintColor` and`children` in the options object as an argument.
    * The title string is passed in `children`.
+   *
+   * Note that if you render a custom element by passing a function, animations for the title won't work.
    */
   headerTitle?:
     | string
@@ -227,16 +229,6 @@ export type NativeStackNavigationOptions = {
     fontWeight?: string;
     color?: string;
   }>;
-  /**
-   * Whether there should be additional top inset to account for translucent status bar.
-   * If you don't have a translucent status bar, you can disable this by passing `false`
-   *
-   * Only supported on Android. Insets are always applied on iOS because the
-   * header cannot be opaque.
-   *
-   * @platform android
-   */
-  headerTopInsetEnabled?: boolean;
   /**
    * Options to render a native search bar on iOS.
    *
@@ -245,7 +237,7 @@ export type NativeStackNavigationOptions = {
   headerSearchBar?: SearchBarProps;
   /**
    * Sets the status bar animation (similar to the `StatusBar` component).
-   * Requires setting `View controller-based status bar appearance -> YES` in your Info.plist file.
+   * Requires setting `View controller-based status bar appearance -> YES` (or removing the config) in your `Info.plist` file.
    *
    * Only supported on iOS.
    *
@@ -263,7 +255,7 @@ export type NativeStackNavigationOptions = {
   statusBarHidden?: boolean;
   /**
    * Sets the status bar color (similar to the `StatusBar` component).
-   * Requires setting `View controller-based status bar appearance -> YES` in your Info.plist file.
+   * Requires setting `View controller-based status bar appearance -> YES` (or removing the config) in your `Info.plist` file.
    *
    * Only supported on iOS.
    *

packages/native-stack/src/views/HeaderConfig.tsx

@@ -11,6 +11,7 @@ import {
 } from 'react-native-screens';
 import { Route, useTheme } from '@react-navigation/native';
 import { HeaderTitle } from '@react-navigation/elements';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import type { NativeStackNavigationOptions } from '../types';
 import { processFonts } from './FontProcessor';
 
@@ -37,7 +38,6 @@ export default function HeaderConfig({
   headerTintColor,
   headerTitle,
   headerTitleStyle,
-  headerTopInsetEnabled = true,
   headerTranslucent,
   route,
   orientation,
@@ -47,6 +47,7 @@ export default function HeaderConfig({
   statusBarStyle,
   title,
 }: Props): JSX.Element {
+  const insets = useSafeAreaInsets();
   const { colors } = useTheme();
   const tintColor =
     headerTintColor != null
@@ -131,7 +132,7 @@ export default function HeaderConfig({
       titleFontFamily={titleFontFamily}
       titleFontSize={headerTitleStyleFlattened.fontSize}
       titleFontWeight={headerTitleStyleFlattened.fontWeight}
-      topInsetEnabled={headerTopInsetEnabled}
+      topInsetEnabled={insets.top !== 0}
       translucent={
         // This defaults to `true`, so we can't pass `undefined`
         headerTranslucent === true

packages/native-stack/src/views/NativeStackView.tsx

@@ -15,7 +15,6 @@ import {
   ScreenStack,
   StackPresentationTypes,
 } from 'react-native-screens';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import warnOnce from 'warn-once';
 import HeaderConfig from './HeaderConfig';
 import type {
@@ -117,8 +116,6 @@ type Props = {
 };
 
 function NativeStackViewInner({ state, navigation, descriptors }: Props) {
-  const insets = useSafeAreaInsets();
-
   return (
     <ScreenStack style={styles.container}>
       {state.routes.map((route, index) => {
@@ -197,9 +194,6 @@ function NativeStackViewInner({ state, navigation, descriptors }: Props) {
               {...options}
               route={route}
               headerShown={isHeaderInPush}
-              headerTopInsetEnabled={
-                options.headerTopInsetEnabled ?? insets.top !== 0
-              }
             />
             <MaybeNestedStack
               options={options}

packages/stack/src/types.tsx

@@ -129,7 +129,7 @@ export type StackHeaderOptions = HeaderOptions & {
   headerBackTestID?: string;
   /**
    * Title string used by the back button on iOS.
-   * Defaults to the previous scene's title, or "Back" if there's not enough space.
+   * Defaults to the previous screen's title, or "Back" if there's not enough space.
    * Use `headerBackTitleVisible: false` to hide it.
    */
   headerBackTitle?: string;