@react-navigation/native-stack 6.2.0

package/lib/typescript/src/types.d.ts

@@ -0,0 +1,373 @@
+/// <reference types="react" />
+import type { DefaultNavigatorOptions, Descriptor, NavigationHelpers, NavigationProp, ParamListBase, Route, RouteProp, StackActionHelpers, StackNavigationState, StackRouterOptions } from '@react-navigation/native';
+import type { ImageSourcePropType, StyleProp, TextStyle, ViewStyle } from 'react-native';
+import type { ScreenProps, ScreenStackHeaderConfigProps, SearchBarProps } from 'react-native-screens';
+export declare type NativeStackNavigationEventMap = {
+    /**
+     * Event which fires when a transition animation starts.
+     */
+    transitionStart: {
+        data: {
+            closing: boolean;
+        };
+    };
+    /**
+     * Event which fires when a transition animation ends.
+     */
+    transitionEnd: {
+        data: {
+            closing: boolean;
+        };
+    };
+};
+export declare type NativeStackNavigationProp<ParamList extends ParamListBase, RouteName extends keyof ParamList = string> = NavigationProp<ParamList, RouteName, StackNavigationState<ParamList>, NativeStackNavigationOptions, NativeStackNavigationEventMap> & StackActionHelpers<ParamList>;
+export declare type NativeStackScreenProps<ParamList extends ParamListBase, RouteName extends keyof ParamList = string> = {
+    navigation: NativeStackNavigationProp<ParamList, RouteName>;
+    route: RouteProp<ParamList, RouteName>;
+};
+export declare type NativeStackNavigationHelpers = NavigationHelpers<ParamListBase, NativeStackNavigationEventMap>;
+export declare type NativeStackNavigationConfig = {};
+export declare type NativeStackHeaderProps = {
+    /**
+     * Options for the back button.
+     */
+    back?: {
+        /**
+         * Title of the previous screen.
+         */
+        title: string;
+    };
+    /**
+     * Options for the current screen.
+     */
+    options: NativeStackNavigationOptions;
+    /**
+     * Route object for the current screen.
+     */
+    route: Route<string>;
+    /**
+     * Navigation prop for the header.
+     */
+    navigation: NativeStackNavigationProp<ParamListBase>;
+};
+export declare type HeaderBackButtonProps = {
+    /**
+     * Tint color for the header.
+     */
+    tintColor?: string;
+    /**
+     * Label text for the button. Usually the title of the previous screen.
+     * By default, this is only shown on iOS.
+     */
+    label?: string;
+    /**
+     * Whether it's possible to navigate back in stack.
+     */
+    canGoBack: boolean;
+};
+export declare type NativeStackNavigationOptions = {
+    /**
+     * String that can be displayed in the header as a fallback for `headerTitle`.
+     */
+    title?: string;
+    /**
+     * Function that given `HeaderProps` returns a React Element to display as a header.
+     */
+    header?: (props: NativeStackHeaderProps) => React.ReactNode;
+    /**
+     * Whether the back button is visible in the header.
+     * You can use it to show a back button alongside `headerLeft` if you have specified it.
+     *
+     * This will have no effect on the first screen in the stack.
+     *
+     * Only supported on iOS.
+     *
+     * @platform ios
+     */
+    headerBackVisible?: boolean;
+    /**
+     * Title string used by the back button on iOS.
+     * Defaults to the previous scene's title, or "Back" if there's not enough space.
+     * Use `headerBackTitleVisible: false` to hide it.
+     *
+     * Only supported on iOS.
+     *
+     * @platform ios
+     */
+    headerBackTitle?: string;
+    /**
+     * Whether the back button title should be visible or not.
+     *
+     * Only supported on iOS.
+     *
+     * @platform ios
+     */
+    headerBackTitleVisible?: boolean;
+    /**
+     * Style object for header back title. Supported properties:
+     * - fontFamily
+     * - fontSize
+     *
+     * Only supported on iOS.
+     *
+     * @platform ios
+     */
+    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
+     * - A chevron on iOS
+     * - An arrow on Android
+     */
+    headerBackImageSource?: ImageSourcePropType;
+    /**
+     * Style of the header when a large title is shown.
+     * The large title is shown if `headerLargeTitle` is `true` and
+     * the edge of any scrollable content reaches the matching edge of the header.
+     *
+     * Supported properties:
+     * - backgroundColor
+     *
+     * Only supported on iOS.
+     *
+     * @platform ios
+     */
+    headerLargeStyle?: StyleProp<{
+        backgroundColor?: string;
+    }>;
+    /**
+     * Whether to enable header with large title which collapses to regular header on scroll.
+     *
+     * For large title to collapse on scroll, the content of the screen should be wrapped in a scrollable view such as `ScrollView` or `FlatList`.
+     * If the scrollable area doesn't fill the screen, the large title won't collapse on scroll.
+     *
+     * Only supported on iOS.
+     *
+     * @platform ios
+     */
+    headerLargeTitle?: boolean;
+    /**
+     * Whether drop shadow of header is visible when a large title is shown.
+     *
+     * Only supported on iOS.
+     *
+     * @platform ios
+     */
+    headerLargeTitleShadowVisible?: boolean;
+    /**
+     * Style object for large title in header. Supported properties:
+     * - fontFamily
+     * - fontSize
+     * - fontWeight
+     * - color
+     *
+     * Only supported on iOS.
+     *
+     * @platform ios
+     */
+    headerLargeTitleStyle?: StyleProp<{
+        fontFamily?: string;
+        fontSize?: number;
+        fontWeight?: string;
+        color?: string;
+    }>;
+    /**
+     * Whether to show the header. The header is shown by default.
+     * Setting this to `false` hides the header.
+     */
+    headerShown?: boolean;
+    /**
+     * Style object for header. Supported properties:
+     * - backgroundColor
+     */
+    headerStyle?: StyleProp<{
+        backgroundColor?: string;
+    }>;
+    /**
+     * Whether to hide the elevation shadow (Android) or the bottom border (iOS) on the header.
+     */
+    headerShadowVisible?: boolean;
+    /**
+     * Boolean indicating whether the navigation bar is translucent.
+     * Setting this to `true` makes the header absolutely positioned,
+     * and changes the background color to `transparent` unless specified in `headerStyle`.
+     */
+    headerTransparent?: boolean;
+    /**
+     * Blur effect for the translucent header.
+     * The `headerTransparent` option needs to be set to `true` for this to work.
+     *
+     * Only supported on iOS.
+     *
+     * @platform ios
+     */
+    headerBlurEffect?: ScreenStackHeaderConfigProps['blurEffect'];
+    /**
+     * Tint color for the header. Changes the color of back button and title.
+     */
+    headerTintColor?: string;
+    /**
+     * Function which returns a React Element to display on the left side of the header.
+     * This replaces the back button. See `headerBackVisible` to show the back button along side left element.
+     */
+    headerLeft?: (props: HeaderBackButtonProps) => React.ReactNode;
+    /**
+     * Function which returns a React Element to display on the right side of the header.
+     */
+    headerRight?: (props: {
+        tintColor?: string;
+    }) => React.ReactNode;
+    /**
+     * String or a function that returns a React Element to be used by the header.
+     * Defaults to screen `title` or route name.
+     *
+     * 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 | ((props: {
+        /**
+         * The title text of the header.
+         */
+        children: string;
+        /**
+         * Tint color for the header.
+         */
+        tintColor?: string;
+    }) => React.ReactNode);
+    /**
+     * How to align the the header title.
+     * Defaults to `left` on platforms other than iOS.
+     *
+     * Not supported on iOS. It's always `center` on iOS and cannot be changed.
+     */
+    headerTitleAlign?: 'left' | 'center';
+    /**
+     * Style object for header title. Supported properties:
+     * - fontFamily
+     * - fontSize
+     * - fontWeight
+     * - color
+     */
+    headerTitleStyle?: StyleProp<Pick<TextStyle, 'fontFamily' | 'fontSize' | 'fontWeight'> & {
+        color?: string;
+    }>;
+    /**
+     * Options to render a native search bar on iOS.
+     *
+     * @platform ios
+     */
+    headerSearchBarOptions?: SearchBarProps;
+    /**
+     * Boolean indicating whether to show the menu on longPress of iOS >= 14 back button. Defaults to `true`.
+     * Requires `react-native-screens` version >=3.3.0.
+     *
+     * Only supported on iOS.
+     *
+     * @platform ios
+     */
+    headerBackButtonMenuEnabled?: boolean;
+    /**
+     * Sets the status bar animation (similar to the `StatusBar` component).
+     * Requires setting `View controller-based status bar appearance -> YES` (or removing the config) in your `Info.plist` file.
+     *
+     * Only supported on iOS.
+     *
+     * @platform ios
+     */
+    statusBarAnimation?: ScreenProps['statusBarAnimation'];
+    /**
+     * Whether the status bar should be hidden on this screen.
+     * Requires setting `View controller-based status bar appearance -> YES` in your Info.plist file.
+     *
+     * Only supported on iOS.
+     *
+     * @platform ios
+     */
+    statusBarHidden?: boolean;
+    /**
+     * Sets the status bar color (similar to the `StatusBar` component).
+     * Requires setting `View controller-based status bar appearance -> YES` (or removing the config) in your `Info.plist` file.
+     *
+     * Only supported on iOS.
+     *
+     * @platform ios
+     */
+    statusBarStyle?: ScreenProps['statusBarStyle'];
+    /**
+     * Style object for the scene content.
+     */
+    contentStyle?: StyleProp<ViewStyle>;
+    /**
+     * Whether you can use gestures to dismiss this screen. Defaults to `true`.
+     *
+     * Only supported on iOS.
+     *
+     * @platform ios
+     */
+    gestureEnabled?: boolean;
+    /**
+     * The type of animation to use when this screen replaces another screen. Defaults to `pop`.
+     *
+     * Supported values:
+     * - "push": the new screen will perform push animation.
+     * - "pop": the new screen will perform pop animation.
+     *
+     * Only supported on iOS and Android.
+     */
+    animationTypeForReplace?: ScreenProps['replaceAnimation'];
+    /**
+     * How the screen should animate when pushed or popped.
+     *
+     * Supported values:
+     * - "default": use the platform default animation
+     * - "fade": fade screen in or out
+     * - "flip": flip the screen, requires stackPresentation: "modal" (iOS only)
+     * - "slide_from_right": slide in the new screen from right (Android only, uses default animation on iOS)
+     * - "slide_from_left": slide in the new screen from left (Android only, uses default animation on iOS)
+     * - "none": don't animate the screen
+     *
+     * Only supported on iOS and Android.
+     */
+    animation?: ScreenProps['stackAnimation'];
+    /**
+     * How should the screen be presented.
+     *
+     * Supported values:
+     * - "card": the new screen will be pushed onto a stack, which means the default animation will be slide from the side on iOS, the animation on Android will vary depending on the OS version and theme.
+     * - "modal": the new screen will be presented modally. this also allows for a nested stack to be rendered inside the screen.
+     * - "transparentModal": the new screen will be presented modally, but in addition, the previous screen will stay so that the content below can still be seen if the screen has translucent background.
+     * - "containedModal": will use "UIModalPresentationCurrentContext" modal style on iOS and will fallback to "modal" on Android.
+     * - "containedTransparentModal": will use "UIModalPresentationOverCurrentContext" modal style on iOS and will fallback to "transparentModal" on Android.
+     * - "fullScreenModal": will use "UIModalPresentationFullScreen" modal style on iOS and will fallback to "modal" on Android.
+     * - "formSheet": will use "UIModalPresentationFormSheet" modal style on iOS and will fallback to "modal" on Android.
+     *
+     * Only supported on iOS and Android.
+     */
+    presentation?: Exclude<ScreenProps['stackPresentation'], 'push'> | 'card';
+    /**
+     * The display orientation to use for the screen.
+     *
+     * Supported values:
+     * - "default" - resolves to "all" without "portrait_down" on iOS. On Android, this lets the system decide the best orientation.
+     * - "all": all orientations are permitted.
+     * - "portrait": portrait orientations are permitted.
+     * - "portrait_up": right-side portrait orientation is permitted.
+     * - "portrait_down": upside-down portrait orientation is permitted.
+     * - "landscape": landscape orientations are permitted.
+     * - "landscape_left": landscape-left orientation is permitted.
+     * - "landscape_right": landscape-right orientation is permitted.
+     *
+     * Only supported on iOS and Android.
+     */
+    orientation?: ScreenProps['screenOrientation'];
+};
+export declare type NativeStackNavigatorProps = DefaultNavigatorOptions<ParamListBase, StackNavigationState<ParamListBase>, NativeStackNavigationOptions, NativeStackNavigationEventMap> & StackRouterOptions & NativeStackNavigationConfig;
+export declare type NativeStackDescriptor = Descriptor<NativeStackNavigationOptions, NativeStackNavigationProp<ParamListBase>, RouteProp<ParamListBase>>;
+export declare type NativeStackDescriptorMap = {
+    [key: string]: NativeStackDescriptor;
+};

package/lib/typescript/src/views/DebugContainer.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { ViewProps } from 'react-native';
+import type { StackPresentationTypes } from 'react-native-screens';
+declare type ContainerProps = ViewProps & {
+    stackPresentation: StackPresentationTypes;
+    children: React.ReactNode;
+};
+export default function Container(props: ContainerProps): JSX.Element;
+export {};

package/lib/typescript/src/views/DebugContainer.native.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { ViewProps } from 'react-native';
+import type { StackPresentationTypes } from 'react-native-screens';
+declare type ContainerProps = ViewProps & {
+    stackPresentation: StackPresentationTypes;
+    children: React.ReactNode;
+};
+declare let Container: React.ComponentType<ContainerProps>;
+export default Container;

package/lib/typescript/src/views/FontProcessor.d.ts

@@ -0,0 +1 @@
+export declare function processFonts(_: (string | undefined)[]): (string | undefined)[];

package/lib/typescript/src/views/FontProcessor.native.d.ts

@@ -0,0 +1 @@
+export declare function processFonts(fontFamilies: (string | undefined)[]): (string | undefined)[];

package/lib/typescript/src/views/HeaderConfig.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { Route } from '@react-navigation/native';
+import type { NativeStackNavigationOptions } from '../types';
+declare type Props = NativeStackNavigationOptions & {
+    route: Route<string>;
+    canGoBack: boolean;
+};
+export default function HeaderConfig({ headerBackImageSource, headerBackButtonMenuEnabled, headerBackTitle, headerBackTitleStyle, headerBackTitleVisible, headerBackVisible, headerShadowVisible, headerLargeStyle, headerLargeTitle, headerLargeTitleShadowVisible, headerLargeTitleStyle, headerLeft, headerRight, headerShown, headerStyle, headerBlurEffect, headerTintColor, headerTitle, headerTitleAlign, headerTitleStyle, headerTransparent, headerSearchBarOptions, route, title, canGoBack, }: Props): JSX.Element;
+export {};

package/lib/typescript/src/views/NativeStackView.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import type { ParamListBase, StackNavigationState } from '@react-navigation/native';
+import type { NativeStackDescriptorMap, NativeStackNavigationHelpers } from '../types';
+declare type Props = {
+    state: StackNavigationState<ParamListBase>;
+    navigation: NativeStackNavigationHelpers;
+    descriptors: NativeStackDescriptorMap;
+};
+export default function NativeStackView({ state, descriptors }: Props): JSX.Element;
+export {};

package/lib/typescript/src/views/NativeStackView.native.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { ParamListBase, StackNavigationState } from '@react-navigation/native';
+import type { NativeStackDescriptorMap, NativeStackNavigationHelpers } from '../types';
+declare type Props = {
+    state: StackNavigationState<ParamListBase>;
+    navigation: NativeStackNavigationHelpers;
+    descriptors: NativeStackDescriptorMap;
+};
+export default function NativeStackView(props: Props): JSX.Element;
+export {};

package/package.json

@@ -0,0 +1,80 @@
+{
+  "name": "@react-navigation/native-stack",
+  "description": "Native stack navigator using react-native-screens",
+  "version": "6.2.0",
+  "keywords": [
+    "react-native-component",
+    "react-component",
+    "react-native",
+    "react-navigation",
+    "ios",
+    "android",
+    "native",
+    "stack"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/react-navigation/react-navigation.git",
+    "directory": "packages/native-stack"
+  },
+  "bugs": {
+    "url": "https://github.com/software-mansion/react-native-screens/issues"
+  },
+  "homepage": "https://github.com/software-mansion/react-native-screens#readme",
+  "main": "lib/commonjs/index.js",
+  "react-native": "src/index.tsx",
+  "source": "src/index.tsx",
+  "module": "lib/module/index.js",
+  "types": "lib/typescript/src/index.d.ts",
+  "files": [
+    "src",
+    "lib",
+    "!**/__tests__"
+  ],
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "prepare": "bob build",
+    "clean": "del lib"
+  },
+  "dependencies": {
+    "@react-navigation/elements": "^1.1.1",
+    "warn-once": "^0.1.0"
+  },
+  "devDependencies": {
+    "@react-navigation/native": "^6.0.3",
+    "@testing-library/react-native": "^7.2.0",
+    "@types/react": "^17.0.9",
+    "@types/react-native": "~0.64.9",
+    "react": "~16.13.1",
+    "react-native": "~0.63.4",
+    "react-native-builder-bob": "^0.18.1",
+    "react-native-screens": "^3.3.0",
+    "typescript": "^4.3.2"
+  },
+  "peerDependencies": {
+    "@react-navigation/native": "^6.0.0",
+    "react": "*",
+    "react-native": "*",
+    "react-native-safe-area-context": ">= 3.0.0",
+    "react-native-screens": ">= 3.0.0"
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      "commonjs",
+      "module",
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "gitHead": "38ac69f17ee314f96d3d4bcee02349fa4a02d422"
+}

package/src/index.tsx

@@ -0,0 +1,14 @@
+/**
+ * Navigators
+ */
+export { default as createNativeStackNavigator } from './navigators/createNativeStackNavigator';
+
+/**
+ * Types
+ */
+export type {
+  NativeStackHeaderProps,
+  NativeStackNavigationOptions,
+  NativeStackNavigationProp,
+  NativeStackScreenProps,
+} from './types';

package/src/navigators/createNativeStackNavigator.tsx

@@ -0,0 +1,81 @@
+import {
+  createNavigatorFactory,
+  EventArg,
+  ParamListBase,
+  StackActionHelpers,
+  StackActions,
+  StackNavigationState,
+  StackRouter,
+  StackRouterOptions,
+  useNavigationBuilder,
+} from '@react-navigation/native';
+import * as React from 'react';
+
+import type {
+  NativeStackNavigationEventMap,
+  NativeStackNavigationOptions,
+  NativeStackNavigatorProps,
+} from '../types';
+import NativeStackView from '../views/NativeStackView';
+
+function NativeStackNavigator({
+  initialRouteName,
+  children,
+  screenListeners,
+  screenOptions,
+  ...rest
+}: NativeStackNavigatorProps) {
+  const { state, descriptors, navigation } = useNavigationBuilder<
+    StackNavigationState<ParamListBase>,
+    StackRouterOptions,
+    StackActionHelpers<ParamListBase>,
+    NativeStackNavigationOptions,
+    NativeStackNavigationEventMap
+  >(StackRouter, {
+    initialRouteName,
+    children,
+    screenListeners,
+    screenOptions,
+  });
+
+  React.useEffect(
+    () =>
+      navigation?.addListener?.('tabPress', (e: any) => {
+        const isFocused = navigation.isFocused();
+
+        // Run the operation in the next frame so we're sure all listeners have been run
+        // This is necessary to know if preventDefault() has been called
+        requestAnimationFrame(() => {
+          if (
+            state.index > 0 &&
+            isFocused &&
+            !(e as EventArg<'tabPress', true>).defaultPrevented
+          ) {
+            // When user taps on already focused tab and we're inside the tab,
+            // reset the stack to replicate native behaviour
+            navigation.dispatch({
+              ...StackActions.popToTop(),
+              target: state.key,
+            });
+          }
+        });
+      }),
+    [navigation, state.index, state.key]
+  );
+
+  return (
+    <NativeStackView
+      {...rest}
+      state={state}
+      navigation={navigation}
+      descriptors={descriptors}
+    />
+  );
+}
+
+export default createNavigatorFactory<
+  StackNavigationState<ParamListBase>,
+  NativeStackNavigationOptions,
+  NativeStackNavigationEventMap,
+  typeof NativeStackNavigator
+>(NativeStackNavigator);