@react-navigation/native

  • Version 7.0.14
  • Published
  • 421 kB
  • 5 dependencies
  • MIT license

Install

npm i @react-navigation/native
yarn add @react-navigation/native
pnpm add @react-navigation/native

Overview

React Native integration for React Navigation

Index

Variables

variable DarkTheme

const DarkTheme: NativeTheme;

    variable DefaultTheme

    const DefaultTheme: NativeTheme;

      variable LinkingContext

      const LinkingContext: React.Context<{ options?: LinkingOptions<ParamListBase> }>;

        variable LocaleDirContext

        const LocaleDirContext: React.Context<LocaleDirection>;

          variable ServerContainer

          const ServerContainer: React.ForwardRefExoticComponent<any>;
          • Container component for server rendering.

            Parameter

            props.location Location object to base the initial URL for SSR.

            Parameter

            props.children Child elements to render the content.

            Parameter

            props.ref Ref object which contains helper methods.

          variable UNSTABLE_UnhandledLinkingContext

          const UNSTABLE_UnhandledLinkingContext: React.Context<{
          lastUnhandledLink: string | undefined;
          setLastUnhandledLink: (lastUnhandledUrl: string | undefined) => void;
          }>;

            Functions

            function createStaticNavigation

            createStaticNavigation: (
            tree: StaticNavigation<any, any, any>
            ) => React.ForwardRefExoticComponent<any>;
            • Create a navigation component from a static navigation config. The returned component is a wrapper around NavigationContainer.

              Parameter tree

              Static navigation config.

              Returns

              Navigation component to use in your app.

            Link: <ParamList extends ReactNavigation.RootParamList>({
            screen,
            params,
            action,
            href,
            style,
            ...rest
            }: Props<ParamList>) => React.CElement<TextProps, Text>;
            • Component to render link to another screen using a path. Uses an anchor tag on the web.

              Parameter

              props.screen Name of the screen to navigate to (e.g. 'Feeds').

              Parameter

              props.params Params to pass to the screen to navigate to (e.g. { sort: 'hot' }).

              Parameter

              props.href Optional absolute path to use for the href (e.g. /feeds/hot).

              Parameter

              props.action Optional action to use for in-page navigation. By default, the path is parsed to an action based on linking config.

              Parameter

              props.children Child elements to render the content.

            NavigationContainer: <RootParamList extends {} = ReactNavigation.RootParamList>(
            props: any
            ) => React.ReactElement;

              function useLinkBuilder

              useLinkBuilder: () => {
              buildHref: (name: string, params?: object) => string | undefined;
              buildAction: (
              href: string
              ) =>
              | {
              type: 'NAVIGATE';
              payload: {
              name: string;
              params?: import('@react-navigation/core').NavigatorScreenParams<
              Readonly<{
              key: string;
              index: number;
              routeNames: string[];
              history?: unknown[];
              routes: import('@react-navigation/routers').NavigationRoute<
              ParamListBase,
              string
              >[];
              type: string;
              stale: false;
              }>
              >;
              path?: string;
              };
              }
              | CommonActions.Action;
              };
              • Helpers to build href or action based on the linking options.

                Returns

                buildHref to build an href for screen and buildAction to build an action from an href.

              function useLinkProps

              useLinkProps: <ParamList extends ReactNavigation.RootParamList>({
              screen,
              params,
              href,
              action,
              }: LinkProps<ParamList>) => {
              href: string | undefined;
              accessibilityRole: 'link';
              onPress: (
              e?: React.MouseEvent<HTMLAnchorElement, MouseEvent> | GestureResponderEvent
              ) => void;
              };
              • Hook to get props for an anchor tag so it can work with in page navigation.

                Parameter

                props.screen Name of the screen to navigate to (e.g. 'Feeds').

                Parameter

                props.params Params to pass to the screen to navigate to (e.g. { sort: 'hot' }).

                Parameter

                props.href Optional absolute path to use for the href (e.g. /feeds/hot).

                Parameter

                props.action Optional action to use for in-page navigation. By default, the path is parsed to an action based on linking config.

              function useLinkTo

              useLinkTo: () => (href: string) => void;
              • Helper to navigate to a screen using a href based on the linking options.

                Returns

                function that receives the href to navigate to.

              function useLocale

              useLocale: () => { direction: import('./types').LocaleDirection };
              • Hook to access the text direction specified in the NavigationContainer.

              function useScrollToTop

              useScrollToTop: (ref: React.RefObject<ScrollableWrapper>) => void;

                Type Aliases

                type DocumentTitleOptions

                type DocumentTitleOptions = {
                enabled?: boolean;
                formatter?: (
                options: Record<string, any> | undefined,
                route: Route<string> | undefined
                ) => string;
                };

                  type LinkingOptions

                  type LinkingOptions<ParamList extends {}> = {
                  /**
                  * Whether deep link handling should be enabled.
                  * Defaults to true.
                  */
                  enabled?: boolean;
                  /**
                  * The prefixes are stripped from the URL before parsing them.
                  * Usually they are the `scheme` + `host` (e.g. `myapp://chat?user=jane`)
                  *
                  * This is not supported on Web.
                  *
                  * @example
                  * ```js
                  * {
                  * prefixes: [
                  * "myapp://", // App-specific scheme
                  * "https://example.com", // Prefix for universal links
                  * "https://*.example.com" // Prefix which matches any subdomain
                  * ]
                  * }
                  * ```
                  */
                  prefixes: string[];
                  /**
                  * Optional function which takes an incoming URL returns a boolean
                  * indicating whether React Navigation should handle it.
                  *
                  * This can be used to disable deep linking for specific URLs.
                  * e.g. URLs used for authentication, and not for deep linking to screens.
                  *
                  * This is not supported on Web.
                  *
                  * @example
                  * ```js
                  * {
                  * // Filter out URLs used by expo-auth-session
                  * filter: (url) => !url.includes('+expo-auth-session')
                  * }
                  * ```
                  */
                  filter?: (url: string) => boolean;
                  /**
                  * Config to fine-tune how to parse the path.
                  *
                  * @example
                  * ```js
                  * {
                  * Chat: {
                  * path: 'chat/:author/:id',
                  * parse: { id: Number }
                  * }
                  * }
                  * ```
                  */
                  config?: {
                  /**
                  * Path string to match against for the whole navigation tree.
                  * It's not possible to specify params here since this doesn't belong to a screen.
                  * This is useful when the whole app is under a specific path.
                  * e.g. all of the screens are under `/admin` in `https://example.com/admin`
                  */
                  path?: string;
                  /**
                  * Path configuration for child screens.
                  */
                  screens: PathConfigMap<ParamList>;
                  /**
                  * Name of the initial route to use for the root navigator.
                  */
                  initialRouteName?: keyof ParamList;
                  };
                  /**
                  * Custom function to get the initial URL used for linking.
                  * Uses `Linking.getInitialURL()` by default.
                  *
                  * This is not supported on Web.
                  *
                  * @example
                  * ```js
                  * {
                  * getInitialURL () => Linking.getInitialURL(),
                  * }
                  * ```
                  */
                  getInitialURL?: () =>
                  | string
                  | null
                  | undefined
                  | Promise<string | null | undefined>;
                  /**
                  * Custom function to get subscribe to URL updates.
                  * Uses `Linking.addEventListener('url', callback)` by default.
                  *
                  * This is not supported on Web.
                  *
                  * @example
                  * ```js
                  * {
                  * subscribe: (listener) => {
                  * const onReceiveURL = ({ url }) => listener(url);
                  *
                  * Linking.addEventListener('url', onReceiveURL);
                  *
                  * return () => Linking.removeEventListener('url', onReceiveURL);
                  * }
                  * }
                  * ```
                  */
                  subscribe?: (listener: (url: string) => void) => undefined | void | (() => void);
                  /**
                  * Custom function to parse the URL to a valid navigation state (advanced).
                  */
                  getStateFromPath?: typeof getStateFromPathDefault;
                  /**
                  * Custom function to convert the state object to a valid URL (advanced).
                  * Only applicable on Web.
                  */
                  getPathFromState?: typeof getPathFromStateDefault;
                  /**
                  * Custom function to convert the state object to a valid action (advanced).
                  */
                  getActionFromState?: typeof getActionFromStateDefault;
                  };

                    type LinkProps

                    type LinkProps<
                    ParamList extends ReactNavigation.RootParamList,
                    RouteName extends keyof ParamList = keyof ParamList
                    > =
                    | ({
                    href?: string;
                    action?: NavigationAction;
                    } & {
                    [Screen in keyof ParamList]: undefined extends ParamList[Screen]
                    ? {
                    screen: Screen;
                    params?: ParamList[Screen];
                    }
                    : {
                    screen: Screen;
                    params: ParamList[Screen];
                    };
                    }[RouteName])
                    | {
                    href?: string;
                    action: NavigationAction;
                    screen?: undefined;
                    params?: undefined;
                    };

                      type LocaleDirection

                      type LocaleDirection = 'ltr' | 'rtl';

                        type ServerContainerRef

                        type ServerContainerRef = {
                        getCurrentOptions(): Record<string, any> | undefined;
                        };

                          type Theme

                          type Theme = NativeTheme;

                            Package Files (16)

                            Dependencies (5)

                            Dev Dependencies (10)

                            Peer Dependencies (2)

                            Badge

                            To add a badge like this onejsDocs.io badgeto your package's README, use the codes available below.

                            You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@react-navigation/native.

                            • Markdown
                              [![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/@react-navigation/native)
                            • HTML
                              <a href="https://www.jsdocs.io/package/@react-navigation/native"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>