@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
Functions
Type Aliases
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.
function Link
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.
function NavigationContainer
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 anhref
for screen andbuildAction
to build an action from anhref
.
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)
- lib/typescript/commonjs/src/Link.d.ts
- lib/typescript/commonjs/src/LinkingContext.d.ts
- lib/typescript/commonjs/src/LocaleDirContext.d.ts
- lib/typescript/commonjs/src/NavigationContainer.d.ts
- lib/typescript/commonjs/src/ServerContainer.d.ts
- lib/typescript/commonjs/src/UnhandledLinkingContext.d.ts
- lib/typescript/commonjs/src/createStaticNavigation.d.ts
- lib/typescript/commonjs/src/index.d.ts
- lib/typescript/commonjs/src/theming/DarkTheme.d.ts
- lib/typescript/commonjs/src/theming/DefaultTheme.d.ts
- lib/typescript/commonjs/src/types.d.ts
- lib/typescript/commonjs/src/useLinkBuilder.d.ts
- lib/typescript/commonjs/src/useLinkProps.d.ts
- lib/typescript/commonjs/src/useLinkTo.d.ts
- lib/typescript/commonjs/src/useLocale.d.ts
- lib/typescript/commonjs/src/useScrollToTop.d.ts
Dependencies (5)
Dev Dependencies (10)
Peer Dependencies (2)
Badge
To add a badge like this oneto 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>
- Updated .
Package analyzed in 2308 ms. - Missing or incorrect documentation? Open an issue for this package.