@react-navigation/native

  • Version 5.9.4
  • Published
  • 392 kB
  • 3 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: Theme;

    variable DefaultTheme

    const DefaultTheme: Theme;
      const NavigationContainer: any;
      • Container component which holds the navigation state designed for React Native apps. This should be rendered at the root wrapping the whole app.

        Parameter

        props.initialState Initial state object for the navigation tree. When deep link handling is enabled, this will override deep links when specified. Make sure that you don't specify an initialState when there's a deep link (Linking.getInitialURL()).

        Parameter

        props.onReady Callback which is called after the navigation tree mounts.

        Parameter

        props.onStateChange Callback which is called with the latest navigation state when it changes.

        Parameter

        props.theme Theme object for the navigators.

        Parameter

        props.linking Options for deep linking. Deep link handling is enabled when this prop is provided, unless linking.enabled is false.

        Parameter

        props.fallback Fallback component to render until we have finished getting initial state when linking is enabled. Defaults to null.

        Parameter

        props.documentTitle Options to configure the document title on Web. Updating document title is handled by default unless documentTitle.enabled is false.

        Parameter

        props.children Child elements to render the content.

        Parameter

        props.ref Ref object which refers to the navigation object containing helper methods.

      variable ServerContainer

      const ServerContainer: any;

        Functions

        Link: ({ to, action, ...rest }: Props) => any;
        • Component to render link to another screen using a path. Uses an anchor tag on the web.

          Parameter

          props.to Absolute path to screen (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.

        function ThemeProvider

        ThemeProvider: ({ value, children }: Props) => any;

          function useBackButton

          useBackButton: (ref: any) => void;

            function useLinkBuilder

            useLinkBuilder: () => (
            name: string,
            params?: object | undefined
            ) => string | undefined;
            • Build destination link for a navigate action. Useful for showing anchor tags on the web for buttons that perform navigation.

            function useLinking

            useLinking: (
            ref: any,
            {
            enabled,
            config,
            getStateFromPath,
            getPathFromState,
            getActionFromState,
            }: LinkingOptions
            ) => {
            getInitialState: () => PromiseLike<
            | (Partial<
            Pick<
            Readonly<{
            key: string;
            index: number;
            routeNames: string[];
            history?: unknown[] | undefined;
            routes: (Readonly<{ key: string; name: string }> &
            Readonly<{ params?: object | undefined }> & {
            state?:
            | Readonly<any>
            | import('@react-navigation/core').PartialState<
            Readonly<any>
            >
            | undefined;
            })[];
            type: string;
            stale: false;
            }>,
            'key' | 'index' | 'routeNames' | 'history' | 'type'
            >
            > &
            Readonly<{
            stale?: true | undefined;
            routes: import('@react-navigation/core').PartialRoute<
            import('@react-navigation/core').Route<
            string,
            object | undefined
            >
            >[];
            }> & {
            state?:
            | (Partial<
            Pick<
            Readonly<{
            key: string;
            index: number;
            routeNames: string[];
            history?: unknown[] | undefined;
            routes: (Readonly<{
            key: string;
            name: string;
            }> &
            Readonly<{ params?: object | undefined }> & {
            state?:
            | Readonly<any>
            | import('@react-navigation/core').PartialState<
            Readonly<any>
            >
            | undefined;
            })[];
            type: string;
            stale: false;
            }>,
            'key' | 'index' | 'routeNames' | 'history' | 'type'
            >
            > &
            Readonly<{
            stale?: true | undefined;
            routes: import('@react-navigation/core').PartialRoute<
            import('@react-navigation/core').Route<
            string,
            object | undefined
            >
            >[];
            }> &
            any)
            | undefined;
            })
            | undefined
            >;
            };

              function useLinkProps

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

                Parameter

                props.to Absolute path to screen (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: () => (path: string) => void;

                function useScrollToTop

                useScrollToTop: (ref: any) => void;

                  function useTheme

                  useTheme: () => import('..').Theme;

                    Type Aliases

                    type DocumentTitleOptions

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

                      type LinkingOptions

                      type LinkingOptions = {
                      /**
                      * 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`)
                      * Only applicable on Android and iOS.
                      *
                      * @example
                      * ```js
                      * {
                      * prefixes: [
                      * "myapp://", // App-specific scheme
                      * "https://example.com", // Prefix for universal links
                      * "https://*.example.com" // Prefix which matches any subdomain
                      * ]
                      * }
                      * ```
                      */
                      prefixes: string[];
                      /**
                      * Config to fine-tune how to parse the path.
                      *
                      * @example
                      * ```js
                      * {
                      * Chat: {
                      * path: 'chat/:author/:id',
                      * parse: { id: Number }
                      * }
                      * }
                      * ```
                      */
                      config?: {
                      initialRouteName?: string;
                      screens: PathConfigMap;
                      };
                      /**
                      * Custom function to get the initial URL used for linking.
                      * Uses `Linking.getInitialURL()` by default.
                      * 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.
                      * 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).
                      * This state object will be passed as `initialState` for initial URL,
                      * and converted to an action object to `dispatch` for subsequent URLs.
                      */
                      getStateFromPath?: typeof getStateFromPathDefault;
                      /**
                      * Custom function to convert the state object to an action to dispatch (advanced).
                      * By default, the state is converted to a `NAVIGATE` action.
                      */
                      getActionFromState?: typeof getActionFromStateDefault;
                      /**
                      * Custom function to convert the state object to a valid URL (advanced).
                      * Used for creating links for navigation, primarily useful on Web.
                      */
                      getPathFromState?: typeof getPathFromStateDefault;
                      };

                        type ServerContainerRef

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

                          type Theme

                          type Theme = {
                          dark: boolean;
                          colors: {
                          primary: string;
                          background: string;
                          card: string;
                          text: string;
                          border: string;
                          notification: string;
                          };
                          };

                            Package Files (15)

                            Dependencies (3)

                            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>