From 0c1a061a04aac555c0b5de58b5c04213edafcbc3 Mon Sep 17 00:00:00 2001 From: Satyajit Sahoo Date: Mon, 24 May 2021 21:24:57 +0200 Subject: [PATCH] chore: minor tweaks --- packages/drawer/src/views/legacy/Drawer.tsx | 2 +- packages/drawer/src/views/modern/Drawer.tsx | 2 +- packages/elements/src/types.tsx | 2 +- packages/native-stack/README.md | 2 +- packages/native-stack/src/types.tsx | 24 +++++++------------ .../native-stack/src/views/HeaderConfig.tsx | 5 ++-- .../src/views/NativeStackView.tsx | 6 ----- packages/stack/src/types.tsx | 2 +- 8 files changed, 16 insertions(+), 29 deletions(-) diff --git a/packages/drawer/src/views/legacy/Drawer.tsx b/packages/drawer/src/views/legacy/Drawer.tsx index fa1a9b49..604a30eb 100644 --- a/packages/drawer/src/views/legacy/Drawer.tsx +++ b/packages/drawer/src/views/legacy/Drawer.tsx @@ -523,7 +523,7 @@ export default class DrawerView extends React.Component { : 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 diff --git a/packages/drawer/src/views/modern/Drawer.tsx b/packages/drawer/src/views/modern/Drawer.tsx index fb025933..7ecd3080 100644 --- a/packages/drawer/src/views/modern/Drawer.tsx +++ b/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 diff --git a/packages/elements/src/types.tsx b/packages/elements/src/types.tsx index 8909f5db..a923678d 100644 --- a/packages/elements/src/types.tsx +++ b/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`. diff --git a/packages/native-stack/README.md b/packages/native-stack/README.md index 8e5fa429..68301a5b 100644 --- a/packages/native-stack/README.md +++ b/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). diff --git a/packages/native-stack/src/types.tsx b/packages/native-stack/src/types.tsx index 12cfab73..b0532773 100644 --- a/packages/native-stack/src/types.tsx +++ b/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. * diff --git a/packages/native-stack/src/views/HeaderConfig.tsx b/packages/native-stack/src/views/HeaderConfig.tsx index 601e8a9c..0c3b6f3e 100644 --- a/packages/native-stack/src/views/HeaderConfig.tsx +++ b/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 diff --git a/packages/native-stack/src/views/NativeStackView.tsx b/packages/native-stack/src/views/NativeStackView.tsx index 953548e8..b2afd243 100644 --- a/packages/native-stack/src/views/NativeStackView.tsx +++ b/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 ( {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 - } />