@react-navigation/native
- Version 6.1.6
- Published
- 309 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
function Link
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.
function NavigationContainer
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)
- lib/typescript/src/Link.d.ts
- lib/typescript/src/LinkingContext.d.ts
- lib/typescript/src/NavigationContainer.d.ts
- lib/typescript/src/ServerContainer.d.ts
- lib/typescript/src/index.d.ts
- lib/typescript/src/theming/DarkTheme.d.ts
- lib/typescript/src/theming/DefaultTheme.d.ts
- lib/typescript/src/theming/ThemeProvider.d.ts
- lib/typescript/src/theming/useTheme.d.ts
- lib/typescript/src/types.d.ts
- lib/typescript/src/useLinkBuilder.d.ts
- lib/typescript/src/useLinkProps.d.ts
- lib/typescript/src/useLinkTo.d.ts
- lib/typescript/src/useScrollToTop.d.ts
Dependencies (4)
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[](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 1455 ms. - Missing or incorrect documentation? Open an issue for this package.