@react-navigation/native

  • Version 6.0.2
  • Published
  • 377 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;

      variable ServerContainer

      const ServerContainer: any;

        Functions

        Link: <ParamList extends any>({ to, action, ...rest }: Props<ParamList>) => 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.

        NavigationContainer: <RootParamList extends {} = any>(props: any) => any;

          function ThemeProvider

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

            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 useLinkProps

            useLinkProps: <ParamList extends any>({
            to,
            action,
            }: Props<ParamList>) => {
            href: To<ParamList, keyof ParamList>;
            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: <ParamList extends any>() => (to: To<ParamList>) => 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<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?: {
                    initialRouteName?: keyof ParamList;
                    screens: PathConfigMap<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 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 (13)

                          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>