@react-navigation/native

  • Version 6.1.17
  • Published
  • 311 kB
  • 4 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 LinkingContext

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

        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.

        Functions

        Link: <ParamList extends ReactNavigation.RootParamList>({
        to,
        action,
        ...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.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 {} = ReactNavigation.RootParamList>(
        props: any
        ) => React.ReactElement;

          function ThemeProvider

          ThemeProvider: ({ value, children }: Props) => JSX.Element;

            function useLinkBuilder

            useLinkBuilder: () => (name: string, params?: object) => 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 ReactNavigation.RootParamList>({
            to,
            action,
            }: Props<ParamList>) => {
            href: string;
            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.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 ReactNavigation.RootParamList>() => (
            to: To<ParamList>
            ) => void;

              function useScrollToTop

              useScrollToTop: (ref: React.RefObject<ScrollableWrapper>) => 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 (14)

                          Dependencies (4)

                          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>