This is documentation for the next SDK version. For up-to-date documentation, see the latest version (SDK 54).

Expo Router

GitHub

Changelog

npm

A file-based routing library for React Native and web applications.

Android

iOS

tvOS

Web

expo-router is a routing library for React Native and web apps. It enables navigation management using a file-based routing system and provides native navigation components and is built on top of React Navigation.

Expo Router guides

Learn about Expo Router basics, navigation patterns, core concepts, and more.

Installation

To use Expo Router in your project, you need to install. Follow the instructions from the Expo Router's installation guide:

Install Expo Router

Learn how to install Expo Router in your project.

Configuration in app config

If you are using the default template to create a new project, expo-router's config plugin is already configured in your app config.

Example app.json with config plugin

app.json

{
  "expo": {
    "plugins": ["expo-router"]
  }
}

Usage

For information core concepts, notation patterns, navigation layouts, and common navigation patterns, start with Router 101 section:

Router 101

API

import { Stack, Tabs, Link } from 'expo-router';

Components

`Badge`

Android

iOS

tvOS

Web

Type: React.Element<NativeTabsTriggerBadgeProps>

`ErrorBoundary`

Android

iOS

tvOS

Web

Type: React.Element<ErrorBoundaryProps>

Props passed to a page's ErrorBoundary export.

ErrorBoundaryProps

`error`

Android

iOS

tvOS

Web

Type: Error

The error that was thrown.

`retry`

Android

iOS

tvOS

Web

Type: () => Promise<void>

A function that will re-render the route component by clearing the error state.

`Icon`

Android

iOS

tvOS

Web

Type: React.Element<NativeTabsTriggerIconProps>

`Label`

Android

iOS

tvOS

Web

Type: React.Element<NativeTabsTriggerLabelProps>

`Link`

Android

iOS

tvOS

Web

Type: React.Element<LinkProps>

Component that renders a link using href to another route. By default, it accepts children and wraps them in a <Text> component.

Uses an anchor tag (<a>) on web and performs a client-side navigation to preserve the state of the website and navigate faster. The web-only attributes such as target, rel, and download are supported and passed to the anchor tag on web. See WebAnchorProps for more details.

Note: Client-side navigation works with both single-page apps, and static-rendering.

Example

import { Link } from 'expo-router';
import { View } from 'react-native';

export default function Route() {
 return (
  <View>
   <Link href="/about">About</Link>
  </View>
 );
}

LinkProps

`asChild`

Android

iOS

tvOS

Web

Optional • Type: boolean

Used to customize the Link component. It will forward all props to the first child of the Link. Note that the child component must accept onPress or onClick props. The href and role are also passed to the child.

Example

import { Link } from 'expo-router';
import { Pressable, Text } from 'react-native';

export default function Route() {
 return (
  <View>
   <Link href="/home" asChild>
     <Pressable>
      <Text>Home</Text>
     </Pressable>
   </Link>
  </View>
 );
}

`className`

Android

iOS

tvOS

Web

Optional • Type: string

On native, this can be used with CSS interop tools like Nativewind. On web, this sets the HTML class directly.

`dangerouslySingular`

Android

iOS

tvOS

Web

Optional • Type: SingularOptions

When navigating in a Stack, if the target is valid then screens in the history that matches the uniqueness constraint will be removed.

If used with push, the history will be filtered even if no navigation occurs.

`dismissTo`

Android

iOS

tvOS

Web

Optional • Type: boolean

While in a stack, this will dismiss screens until the provided href is reached. If the href is not found, it will instead replace the current screen with the provided href.

Example

import { Link } from 'expo-router';
import { View } from 'react-native';

export default function Route() {
 return (
  <View>
    <Link dismissTo href="/feed">Close modal</Link>
  </View>
 );
}

`href`

Android

iOS

tvOS

Web

Literal type: union

The path of the route to navigate to. It can either be:

string: A full path like /profile/settings or a relative path like ../settings.
object: An object with a pathname and optional params. The pathname can be a full path like /profile/settings or a relative path like ../settings. The params can be an object of key-value pairs.

Example

Dynamic

import { Link } from 'expo-router';
import { View } from 'react-native';

export default function Route() {
 return (
  <View>
   <Link href="/about">About</Link>
   <Link
    href={{
      pathname: '/user/[id]',
      params: { id: 'bacon' }
    }}>
      View user
   </Link>
  </View>
 );
}

Acceptable values are: string | HrefObject

`onPress`

Android

iOS

tvOS

Web

Optional • Type: (event: MouseEvent<HTMLAnchorElement> | GestureResponderEvent) => void

This function is called on press. Text intrinsically supports press handling with a default highlight state (which can be disabled with suppressHighlighting).

`prefetch`

Android

iOS

tvOS

Web

Optional • Type: boolean

Prefetches the route when the component is rendered on a focused screen.

`push`

Android

iOS

tvOS

Web

Optional • Type: boolean

Always pushes a new route, and never pops or replaces to existing route. You can push the current route multiple times or with new parameters.

Example

import { Link } from 'expo-router';
import { View } from 'react-native';

export default function Route() {
 return (
  <View>
    <Link push href="/feed">Login</Link>
  </View>
 );
}

`ref`

Android

iOS

tvOS

Web

Optional • Type: Ref<Text>

`relativeToDirectory`

Android

iOS

tvOS

Web

Optional • Type: boolean

Relative URL references are either relative to the directory or the document. By default, relative paths are relative to the document.

See: Resolving relative references in Mozilla's documentation.

`replace`

Android

iOS

tvOS

Web

Optional • Type: boolean

Removes the current route from the history and replace it with the specified URL. This is useful for redirects.

Example

import { Link } from 'expo-router';
import { View } from 'react-native';

export default function Route() {
 return (
  <View>
    <Link replace href="/feed">Login</Link>
  </View>
 );
}

`withAnchor`

Android

iOS

tvOS

Web

Optional • Type: boolean

Replaces the initial screen with the current route.

Inherited Props

Omit<TextProps, 'href'>
WebAnchorProps

`LinkMenu`

iOS

Type: React.ReactNode<LinkMenuProps>

Groups context menu actions for a link.

If multiple Link.Menu components are used within a single Link, only the first will be rendered. Only Link.MenuAction and LinkMenuAction components are allowed as children.

Example

<Link.Menu>
  <Link.MenuAction title="Action 1" onPress={() => {}} />
  <Link.MenuAction title="Action 2" onPress={() => {}} />
</Link.Menu>

Note: You can use the alias Link.Menu for this component.

LinkMenuProps

`children`

iOS

Literal type: union

Acceptable values are: ReactElement<LinkMenuActionProps> | ReactElement[]

`destructive`

iOS

Optional • Type: boolean

If true, the menu item will be displayed as destructive.

See: Apple documentation for more information.

`displayAsPalette`

iOS

Optional • Type: boolean

If true, the menu will be displayed as a palette. This means that the menu will be displayed as one row

See: Apple documentation for more information.

`displayInline`

iOS

Optional • Type: boolean

If true, the menu will be displayed inline. This means that the menu will not be collapsed

See: Apple documentation for more information.

`icon`

iOS

Optional • Type: string

Optional SF Symbol displayed alongside the menu item.

`title`

iOS

Optional • Type: string

The title of the menu item

`LinkMenuAction`

iOS

Type: React.Element<LinkMenuActionProps>

This component renders a context menu action for a link. It should only be used as a child of Link.Menu or LinkMenu.

Note: You can use the alias Link.MenuAction for this component.

LinkMenuActionProps

`destructive`

iOS

Optional • Type: boolean

If true, the menu item will be displayed as destructive.

See: Apple documentation for more information.

`disabled`

iOS

Optional • Type: boolean

If true, the menu item will be disabled and not selectable.

See: Apple documentation for more information.

`icon`

iOS

Optional • Type: SFSymbols6_0

Optional SF Symbol displayed alongside the menu item.

`isOn`

iOS

Optional • Type: boolean

If true, the menu item will be displayed as selected.

`onPress`

iOS

Type: () => void

`title`

iOS

Type: string

The title of the menu item.

`unstable_keepPresented`

iOS

Optional • Type: boolean

If true, the menu will be kept presented after the action is selected.

This is marked as unstable, because when action is selected it will recreate the menu, which will close all opened submenus and reset the scroll position.

See: Apple documentation for more information.

`LinkPreview`

iOS

Type: React.Element<LinkPreviewProps>

A component used to render and customize the link preview.

If Link.Preview is used without any props, it will render a preview of the href passed to the Link.

If multiple Link.Preview components are used within a single Link, only the first one will be rendered.

To customize the preview, you can pass custom content as children.

Example

<Link href="/about">
  <Link.Preview>
    <Text>Custom Preview Content</Text>
  </Link.Preview>
</Link>

Example

<Link href="/about">
  <Link.Preview />
</Link>

Note: You can use the alias Link.Preview for this component.

LinkPreviewProps

`children`

iOS

Optional • Type: ReactNode

`style`

iOS

Optional • Type: LinkPreviewStyle

Custom styles for the preview container.

Note that some styles may not work, as they are limited or reset by the native view

`LinkTrigger`

iOS

Type: React.Iterable<undefined>

Serves as the trigger for a link. The content inside this component will be rendered as part of the base link.

If multiple Link.Trigger components are used within a single Link, only the first will be rendered.

Example

<Link href="/about">
  <Link.Trigger>
    Trigger
  </Link.Trigger>
</Link>

Note: You can use the alias Link.Trigger for this component.

`Redirect`

Android

iOS

tvOS

Web

Type: React.Element<RedirectProps>

Redirects to the href as soon as the component is mounted.

Example

import { View, Text } from 'react-native';
import { Redirect } from 'expo-router';

export default function Page() {
 const { user } = useAuth();

 if (!user) {
   return <Redirect href="/login" />;
 }

 return (
   <View>
     <Text>Welcome Back!</Text>
   </View>
 );
}

RedirectProps

`href`

Android

iOS

tvOS

Web

Type: Href

The path of the route to navigate to. It can either be:

string: A full path like /profile/settings or a relative path like ../settings.
object: An object with a pathname and optional params. The pathname can be a full path like /profile/settings or a relative path like ../settings. The params can be an object of key-value pairs.

Example

Dynamic

import { Redirect } from 'expo-router';

export default function RedirectToAbout() {
 return (
   <Redirect href="/about" />
 );
}

`relativeToDirectory`

Android

iOS

tvOS

Web

Optional • Type: boolean

Relative URL references are either relative to the directory or the document. By default, relative paths are relative to the document.

See: Resolving relative references in Mozilla's documentation.

`withAnchor`

Android

iOS

tvOS

Web

Optional • Type: boolean

Replaces the initial screen with the current route.

`Slot`

Android

iOS

tvOS

Web

Type: React.Element<Omit<NavigatorProps<any>, 'children'>>

Renders the currently selected content.

There are actually two different implementations of <Slot/>:

Used inside a _layout as the Navigator
Used inside a Navigator as the content

Since a custom Navigator will set the NavigatorContext.contextKey to the current _layout, you can use this to determine if you are inside a custom navigator or not.

`VectorIcon`

Android

iOS

tvOS

Web

Type: React.Element<VectorIconProps<NameT>>

Helper component which can be used to load vector icons.

Example

import { Icon, VectorIcon } from 'expo-router';
import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons';

<Icon src={<VectorIcon family={MaterialCommunityIcons} name="home" />} />

VectorIconProps

`family`

Android

iOS

tvOS

Web

Type:

{
  getImageSource: (name: NameT, size: number, color: ColorValue) => Promise<null | ImageSourcePropType>
}

The family of the vector icon.

Example

import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons';

`name`

Android

iOS

tvOS

Web

Type: NameT

The name of the vector icon.

Constants

`Color`

Android

iOS

tvOS

Web

Type: ColorType

Hooks

`useFocusEffect(effect, do_not_pass_a_second_prop)`

Android

iOS

tvOS

Web

Parameter	Type	Description
effect	`EffectCallback`	Memoized callback containing the effect, should optionally return a cleanup function.
do_not_pass_a_second_prop(optional)	`undefined`	-

Hook to run an effect whenever a route is focused. Similar to React.useEffect.

This can be used to perform side-effects such as fetching data or subscribing to events. The passed callback should be wrapped in React.useCallback to avoid running the effect too often.

Returns:

void

Example

import { useFocusEffect } from 'expo-router';
import { useCallback } from 'react';

export default function Route() {
  useFocusEffect(
    // Callback should be wrapped in `React.useCallback` to avoid running the effect too often.
    useCallback(() => {
      // Invoked whenever the route is focused.
      console.log("Hello, I'm focused!");

      // Return function is invoked whenever the route gets out of focus.
      return () => {
        console.log('This route is now unfocused.');
      };
    }, []),
   );

 return </>;
}

`useGlobalSearchParams()`

Android

iOS

tvOS

Web

Returns URL parameters for globally selected route, including dynamic path segments. This function updates even when the route is not focused. Useful for analytics or other background operations that don't draw to the screen.

Route URL example: acme://profile/baconbrix?extra=info.

When querying search params in a stack, opt-towards using useLocalSearchParams because it will only update when the route is focused.

Note: For usage information, see Local versus global search parameters.

Returns:

RouteParams<TRoute> & TParams

Example

app/profile/[user].tsx

import { Text } from 'react-native';
import { useGlobalSearchParams } from 'expo-router';

export default function Route() {
  // user=baconbrix & extra=info
  const { user, extra } = useGlobalSearchParams();

  return <Text>User: {user}</Text>;
}

`useIsPreview()`

Android

iOS

tvOS

Web

Hook to determine if the current route is rendered inside a preview.

Returns:

boolean

True if the current route is rendered inside a preview, false otherwise.

`useLoaderData()`

Android

iOS

tvOS

Web

Returns the result of the loader function for the calling route.

Returns:

LoaderFunctionResult<T>

Example

app/profile/[user].tsx

import { Text } from 'react-native';
import { useLoaderData } from 'expo-router';

export function loader() {
  return Promise.resolve({ foo: 'bar' }}
}

export default function Route() {
 // { foo: 'bar' }
 const data = useLoaderData<typeof loader>();

 return <Text>Data: {JSON.stringify(data)}</Text>;
}

`useLocalSearchParams()`

Android

iOS

tvOS

Web

Returns the URL parameters for the contextually focused route. Useful for stacks where you may push a new screen that changes the query parameters. For dynamic routes, both the route parameters and the search parameters are returned.

Route URL example: acme://profile/baconbrix?extra=info.

To observe updates even when the invoking route is not focused, use useGlobalSearchParams.

Note: For usage information, see Local versus global search parameters.

Returns:

RouteParams<TRoute> & TParams

Example

app/profile/[user].tsx

import { Text } from 'react-native';
import { useLocalSearchParams } from 'expo-router';

export default function Route() {
 // user=baconbrix & extra=info
 const { user, extra } = useLocalSearchParams();

 return <Text>User: {user}</Text>;
}

`useNavigation(parent)`

Android

iOS

tvOS

Web

Parameter	Type	Description
parent(optional)	`string \| HrefObject`	Provide an absolute path such as `/(root)` to the parent route or a relative path like `../../` to the parent route.

Returns the underlying React Navigation navigation object to imperatively access layout-specific functionality like navigation.openDrawer() in a Drawer layout.

Returns:

T

The navigation object for the current route.

See: React Navigation documentation on navigation dependent functions for more information.

Example

app/index.tsx

import { useNavigation } from 'expo-router';

export default function Route() {
  // Access the current navigation object for the current route.
  const navigation = useNavigation();

  return (
    <View>
      <Text onPress={() => {
        // Open the drawer view.
        navigation.openDrawer();
      }}>
        Open Drawer
      </Text>
    </View>
  );
}

When using nested layouts, you can access higher-order layouts by passing a secondary argument denoting the layout route. For example, /menu/_layout.tsx is nested inside /app/orders/, you can use useNavigation('/orders/menu/').

Example

app/orders/menu/index.tsx

import { useNavigation } from 'expo-router';

export default function MenuRoute() {
  const rootLayout = useNavigation('/');
  const ordersLayout = useNavigation('/orders');

  // Same as the default results of `useNavigation()` when invoked in this route.
  const parentLayout = useNavigation('/orders/menu');
}

If you attempt to access a layout that doesn't exist, an error such as Could not find parent navigation with route "/non-existent" is thrown.

`useNavigationContainerRef()`

Android

iOS

tvOS

Web

Returns:

NavigationContainerRefWithCurrent<RootParamList>

The root <NavigationContainer /> ref for the app. The ref.current may be null if the <NavigationContainer /> hasn't mounted yet.

`usePathname()`

Android

iOS

tvOS

Web

Returns the currently selected route location without search parameters. For example, /acme?foo=bar returns /acme. Segments will be normalized. For example, /[id]?id=normal becomes /normal.

Returns:

string

Example

app/profile/[user].tsx

import { Text } from 'react-native';
import { usePathname } from 'expo-router';

export default function Route() {
  // pathname = "/profile/baconbrix"
  const pathname = usePathname();

  return <Text>Pathname: {pathname}</Text>;
}

Deprecated Use useNavigationContainerRef instead, which returns a React ref.

`useRootNavigation()`

Android

iOS

tvOS

Web

Returns:

null | NavigationContainerRef<RootParamList>

`useRootNavigationState()`

Android

iOS

tvOS

Web

Returns the navigation state of the navigator which contains the current screen.

Returns:

Readonly<undefined>

Example

import { useRootNavigationState } from 'expo-router';

export default function Route() {
 const { routes } = useRootNavigationState();

 return <Text>{routes[0].name}</Text>;
}

`useRouter()`

Android

iOS

tvOS

Web

Returns the Router object for imperative navigation.

Returns:

Router

Example

import { useRouter } from 'expo-router';
import { Text } from 'react-native';

export default function Route() {
 const router = useRouter();

 return (
  <Text onPress={() => router.push('/home')}>Go Home</Text>
 );
}

`useSegments()`

Android

iOS

tvOS

Web

Returns a list of selected file segments for the currently selected route. Segments are not normalized, so they will be the same as the file path. For example, /[id]?id=normal becomes ["[id]"].

Returns:

RouteSegments<TSegments>

Example

app/profile/[user].tsx

import { Text } from 'react-native';
import { useSegments } from 'expo-router';

export default function Route() {
  // segments = ["profile", "[user]"]
  const segments = useSegments();

  return <Text>Hello</Text>;
}

useSegments can be typed using an abstract. Consider the following file structure:

- app
  - [user]
    - index.tsx
    - followers.tsx
  - settings.tsx

This can be strictly typed using the following abstract with useSegments hook:

const [first, second] = useSegments<['settings'] | ['[user]'] | ['[user]', 'followers']>()

`useSitemap()`

Android

iOS

tvOS

Web

Returns:

SitemapType | null

Methods

`Sitemap()`

Android

iOS

tvOS

Web

Returns:

Element

`withLayoutContext(Nav, processor, useOnlyUserDefinedScreens)`

Android

iOS

tvOS

Web

Parameter	Type	Description
Nav	`T`	The navigator component to wrap.
processor(optional)	`(options: ScreenProps[]) => ScreenProps[]`	A function that processes the screens before passing them to the navigator.
useOnlyUserDefinedScreens(optional)	`boolean`	If true, all screens not specified as navigator's children will be ignored. Default:`false`

Returns a navigator that automatically injects matched routes and renders nothing when there are no children. Return type with children prop optional.

Enables use of other built-in React Navigation navigators and other navigators built with the React Navigation custom navigator API.

Returns:

Component<PropsWithoutRef<PickPartial<ComponentProps<T>, 'children'>>> & {
  Protected: FunctionComponent<ProtectedProps>, 
  Screen: (props: ScreenProps<TOptions, TState, TEventMap>) => null
}

Example

app/_layout.tsx

import { ParamListBase, TabNavigationState } from "@react-navigation/native";
import {
  createMaterialTopTabNavigator,
  MaterialTopTabNavigationOptions,
  MaterialTopTabNavigationEventMap,
} from "@react-navigation/material-top-tabs";
import { withLayoutContext } from "expo-router";

const MaterialTopTabs = createMaterialTopTabNavigator();

const ExpoRouterMaterialTopTabs = withLayoutContext<
  MaterialTopTabNavigationOptions,
  typeof MaterialTopTabs.Navigator,
  TabNavigationState<ParamListBase>,
  MaterialTopTabNavigationEventMap
>(MaterialTopTabs.Navigator);

export default function TabLayout() {
  return <ExpoRouterMaterialTopTabs />;
}

Interfaces

`AndroidBaseColorSDK1`

Android

iOS

tvOS

Web

Property	Type	Description
background_dark	`ColorValue`	PlatformColor("@android:color/background_dark")
background_light	`ColorValue`	PlatformColor("@android:color/background_light")
black	`ColorValue`	PlatformColor("@android:color/black")
darker_gray	`ColorValue`	PlatformColor("@android:color/darker_gray")
tab_indicator_text	`ColorValue`	PlatformColor("@android:color/tab_indicator_text")
transparent	`ColorValue`	PlatformColor("@android:color/transparent")
white	`ColorValue`	PlatformColor("@android:color/white")
widget_edittext_dark	`ColorValue`	PlatformColor("@android:color/widget_edittext_dark")

`AndroidBaseColorSDK14`

Android

iOS

tvOS

Web

Property	Type	Description
holo_blue_bright	`ColorValue`	PlatformColor("@android:color/holo_blue_bright")
holo_blue_dark	`ColorValue`	PlatformColor("@android:color/holo_blue_dark")
holo_blue_light	`ColorValue`	PlatformColor("@android:color/holo_blue_light")
holo_green_dark	`ColorValue`	PlatformColor("@android:color/holo_green_dark")
holo_green_light	`ColorValue`	PlatformColor("@android:color/holo_green_light")
holo_orange_dark	`ColorValue`	PlatformColor("@android:color/holo_orange_dark")
holo_orange_light	`ColorValue`	PlatformColor("@android:color/holo_orange_light")
holo_purple	`ColorValue`	PlatformColor("@android:color/holo_purple")
holo_red_dark	`ColorValue`	PlatformColor("@android:color/holo_red_dark")
holo_red_light	`ColorValue`	PlatformColor("@android:color/holo_red_light")

`AndroidBaseColorSDK31`

Android

iOS

tvOS

Web

Property	Type	Description
system_accent1_0	`ColorValue`	PlatformColor("@android:color/system_accent1_0")
system_accent1_10	`ColorValue`	PlatformColor("@android:color/system_accent1_10")
system_accent1_100	`ColorValue`	PlatformColor("@android:color/system_accent1_100")
system_accent1_1000	`ColorValue`	PlatformColor("@android:color/system_accent1_1000")
system_accent1_200	`ColorValue`	PlatformColor("@android:color/system_accent1_200")
system_accent1_300	`ColorValue`	PlatformColor("@android:color/system_accent1_300")
system_accent1_400	`ColorValue`	PlatformColor("@android:color/system_accent1_400")
system_accent1_50	`ColorValue`	PlatformColor("@android:color/system_accent1_50")
system_accent1_500	`ColorValue`	PlatformColor("@android:color/system_accent1_500")
system_accent1_600	`ColorValue`	PlatformColor("@android:color/system_accent1_600")
system_accent1_700	`ColorValue`	PlatformColor("@android:color/system_accent1_700")
system_accent1_800	`ColorValue`	PlatformColor("@android:color/system_accent1_800")
system_accent1_900	`ColorValue`	PlatformColor("@android:color/system_accent1_900")
system_accent2_0	`ColorValue`	PlatformColor("@android:color/system_accent2_0")
system_accent2_10	`ColorValue`	PlatformColor("@android:color/system_accent2_10")
system_accent2_100	`ColorValue`	PlatformColor("@android:color/system_accent2_100")
system_accent2_1000	`ColorValue`	PlatformColor("@android:color/system_accent2_1000")
system_accent2_200	`ColorValue`	PlatformColor("@android:color/system_accent2_200")
system_accent2_300	`ColorValue`	PlatformColor("@android:color/system_accent2_300")
system_accent2_400	`ColorValue`	PlatformColor("@android:color/system_accent2_400")
system_accent2_50	`ColorValue`	PlatformColor("@android:color/system_accent2_50")
system_accent2_500	`ColorValue`	PlatformColor("@android:color/system_accent2_500")
system_accent2_600	`ColorValue`	PlatformColor("@android:color/system_accent2_600")
system_accent2_700	`ColorValue`	PlatformColor("@android:color/system_accent2_700")
system_accent2_800	`ColorValue`	PlatformColor("@android:color/system_accent2_800")
system_accent2_900	`ColorValue`	PlatformColor("@android:color/system_accent2_900")
system_accent3_0	`ColorValue`	PlatformColor("@android:color/system_accent3_0")
system_accent3_10	`ColorValue`	PlatformColor("@android:color/system_accent3_10")
system_accent3_100	`ColorValue`	PlatformColor("@android:color/system_accent3_100")
system_accent3_1000	`ColorValue`	PlatformColor("@android:color/system_accent3_1000")
system_accent3_200	`ColorValue`	PlatformColor("@android:color/system_accent3_200")
system_accent3_300	`ColorValue`	PlatformColor("@android:color/system_accent3_300")
system_accent3_400	`ColorValue`	PlatformColor("@android:color/system_accent3_400")
system_accent3_50	`ColorValue`	PlatformColor("@android:color/system_accent3_50")
system_accent3_500	`ColorValue`	PlatformColor("@android:color/system_accent3_500")
system_accent3_600	`ColorValue`	PlatformColor("@android:color/system_accent3_600")
system_accent3_700	`ColorValue`	PlatformColor("@android:color/system_accent3_700")
system_accent3_800	`ColorValue`	PlatformColor("@android:color/system_accent3_800")
system_accent3_900	`ColorValue`	PlatformColor("@android:color/system_accent3_900")
system_neutral1_0	`ColorValue`	PlatformColor("@android:color/system_neutral1_0")
system_neutral1_10	`ColorValue`	PlatformColor("@android:color/system_neutral1_10")
system_neutral1_100	`ColorValue`	PlatformColor("@android:color/system_neutral1_100")
system_neutral1_1000	`ColorValue`	PlatformColor("@android:color/system_neutral1_1000")
system_neutral1_200	`ColorValue`	PlatformColor("@android:color/system_neutral1_200")
system_neutral1_300	`ColorValue`	PlatformColor("@android:color/system_neutral1_300")
system_neutral1_400	`ColorValue`	PlatformColor("@android:color/system_neutral1_400")
system_neutral1_50	`ColorValue`	PlatformColor("@android:color/system_neutral1_50")
system_neutral1_500	`ColorValue`	PlatformColor("@android:color/system_neutral1_500")
system_neutral1_600	`ColorValue`	PlatformColor("@android:color/system_neutral1_600")
system_neutral1_700	`ColorValue`	PlatformColor("@android:color/system_neutral1_700")
system_neutral1_800	`ColorValue`	PlatformColor("@android:color/system_neutral1_800")
system_neutral1_900	`ColorValue`	PlatformColor("@android:color/system_neutral1_900")
system_neutral2_0	`ColorValue`	PlatformColor("@android:color/system_neutral2_0")
system_neutral2_10	`ColorValue`	PlatformColor("@android:color/system_neutral2_10")
system_neutral2_100	`ColorValue`	PlatformColor("@android:color/system_neutral2_100")
system_neutral2_1000	`ColorValue`	PlatformColor("@android:color/system_neutral2_1000")
system_neutral2_200	`ColorValue`	PlatformColor("@android:color/system_neutral2_200")
system_neutral2_300	`ColorValue`	PlatformColor("@android:color/system_neutral2_300")
system_neutral2_400	`ColorValue`	PlatformColor("@android:color/system_neutral2_400")
system_neutral2_50	`ColorValue`	PlatformColor("@android:color/system_neutral2_50")
system_neutral2_500	`ColorValue`	PlatformColor("@android:color/system_neutral2_500")
system_neutral2_600	`ColorValue`	PlatformColor("@android:color/system_neutral2_600")
system_neutral2_700	`ColorValue`	PlatformColor("@android:color/system_neutral2_700")
system_neutral2_800	`ColorValue`	PlatformColor("@android:color/system_neutral2_800")
system_neutral2_900	`ColorValue`	PlatformColor("@android:color/system_neutral2_900")

`AndroidBaseColorSDK34`

Android

iOS

tvOS

Web

Property	Type	Description
system_background_dark	`ColorValue`	PlatformColor("@android:color/system_background_dark")
system_background_light	`ColorValue`	PlatformColor("@android:color/system_background_light")
system_control_activated_dark	`ColorValue`	PlatformColor("@android:color/system_control_activated_dark")
system_control_activated_light	`ColorValue`	PlatformColor("@android:color/system_control_activated_light")
system_control_highlight_dark	`ColorValue`	PlatformColor("@android:color/system_control_highlight_dark")
system_control_highlight_light	`ColorValue`	PlatformColor("@android:color/system_control_highlight_light")
system_control_normal_dark	`ColorValue`	PlatformColor("@android:color/system_control_normal_dark")
system_control_normal_light	`ColorValue`	PlatformColor("@android:color/system_control_normal_light")
system_error_container_dark	`ColorValue`	PlatformColor("@android:color/system_error_container_dark")
system_error_container_light	`ColorValue`	PlatformColor("@android:color/system_error_container_light")
system_error_dark	`ColorValue`	PlatformColor("@android:color/system_error_dark")
system_error_light	`ColorValue`	PlatformColor("@android:color/system_error_light")
system_on_background_dark	`ColorValue`	PlatformColor("@android:color/system_on_background_dark")
system_on_background_light	`ColorValue`	PlatformColor("@android:color/system_on_background_light")
system_on_error_container_dark	`ColorValue`	PlatformColor("@android:color/system_on_error_container_dark")
system_on_error_container_light	`ColorValue`	PlatformColor("@android:color/system_on_error_container_light")
system_on_error_dark	`ColorValue`	PlatformColor("@android:color/system_on_error_dark")
system_on_error_light	`ColorValue`	PlatformColor("@android:color/system_on_error_light")
system_on_primary_container_dark	`ColorValue`	PlatformColor("@android:color/system_on_primary_container_dark")
system_on_primary_container_light	`ColorValue`	PlatformColor("@android:color/system_on_primary_container_light")
system_on_primary_dark	`ColorValue`	PlatformColor("@android:color/system_on_primary_dark")
system_on_primary_fixed	`ColorValue`	PlatformColor("@android:color/system_on_primary_fixed")
system_on_primary_fixed_variant	`ColorValue`	PlatformColor("@android:color/system_on_primary_fixed_variant")
system_on_primary_light	`ColorValue`	PlatformColor("@android:color/system_on_primary_light")
system_on_secondary_container_dark	`ColorValue`	PlatformColor("@android:color/system_on_secondary_container_dark")
system_on_secondary_container_light	`ColorValue`	PlatformColor("@android:color/system_on_secondary_container_light")
system_on_secondary_dark	`ColorValue`	PlatformColor("@android:color/system_on_secondary_dark")
system_on_secondary_fixed	`ColorValue`	PlatformColor("@android:color/system_on_secondary_fixed")
system_on_secondary_fixed_variant	`ColorValue`	PlatformColor("@android:color/system_on_secondary_fixed_variant")
system_on_secondary_light	`ColorValue`	PlatformColor("@android:color/system_on_secondary_light")
system_on_surface_dark	`ColorValue`	PlatformColor("@android:color/system_on_surface_dark")
system_on_surface_light	`ColorValue`	PlatformColor("@android:color/system_on_surface_light")
system_on_surface_variant_dark	`ColorValue`	PlatformColor("@android:color/system_on_surface_variant_dark")
system_on_surface_variant_light	`ColorValue`	PlatformColor("@android:color/system_on_surface_variant_light")
system_on_tertiary_container_dark	`ColorValue`	PlatformColor("@android:color/system_on_tertiary_container_dark")
system_on_tertiary_container_light	`ColorValue`	PlatformColor("@android:color/system_on_tertiary_container_light")
system_on_tertiary_dark	`ColorValue`	PlatformColor("@android:color/system_on_tertiary_dark")
system_on_tertiary_fixed	`ColorValue`	PlatformColor("@android:color/system_on_tertiary_fixed")
system_on_tertiary_fixed_variant	`ColorValue`	PlatformColor("@android:color/system_on_tertiary_fixed_variant")
system_on_tertiary_light	`ColorValue`	PlatformColor("@android:color/system_on_tertiary_light")
system_outline_dark	`ColorValue`	PlatformColor("@android:color/system_outline_dark")
system_outline_light	`ColorValue`	PlatformColor("@android:color/system_outline_light")
system_outline_variant_dark	`ColorValue`	PlatformColor("@android:color/system_outline_variant_dark")
system_outline_variant_light	`ColorValue`	PlatformColor("@android:color/system_outline_variant_light")
system_palette_key_color_neutral_dark	`ColorValue`	PlatformColor("@android:color/system_palette_key_color_neutral_dark")
system_palette_key_color_neutral_light	`ColorValue`	PlatformColor("@android:color/system_palette_key_color_neutral_light")
system_palette_key_color_neutral_variant_dark	`ColorValue`	PlatformColor("@android:color/system_palette_key_color_neutral_variant_dark")
system_palette_key_color_neutral_variant_light	`ColorValue`	PlatformColor("@android:color/system_palette_key_color_neutral_variant_light")
system_palette_key_color_primary_dark	`ColorValue`	PlatformColor("@android:color/system_palette_key_color_primary_dark")
system_palette_key_color_primary_light	`ColorValue`	PlatformColor("@android:color/system_palette_key_color_primary_light")
system_palette_key_color_secondary_dark	`ColorValue`	PlatformColor("@android:color/system_palette_key_color_secondary_dark")
system_palette_key_color_secondary_light	`ColorValue`	PlatformColor("@android:color/system_palette_key_color_secondary_light")
system_palette_key_color_tertiary_dark	`ColorValue`	PlatformColor("@android:color/system_palette_key_color_tertiary_dark")
system_palette_key_color_tertiary_light	`ColorValue`	PlatformColor("@android:color/system_palette_key_color_tertiary_light")
system_primary_container_dark	`ColorValue`	PlatformColor("@android:color/system_primary_container_dark")
system_primary_container_light	`ColorValue`	PlatformColor("@android:color/system_primary_container_light")
system_primary_dark	`ColorValue`	PlatformColor("@android:color/system_primary_dark")
system_primary_fixed	`ColorValue`	PlatformColor("@android:color/system_primary_fixed")
system_primary_fixed_dim	`ColorValue`	PlatformColor("@android:color/system_primary_fixed_dim")
system_primary_light	`ColorValue`	PlatformColor("@android:color/system_primary_light")
system_secondary_container_dark	`ColorValue`	PlatformColor("@android:color/system_secondary_container_dark")
system_secondary_container_light	`ColorValue`	PlatformColor("@android:color/system_secondary_container_light")
system_secondary_dark	`ColorValue`	PlatformColor("@android:color/system_secondary_dark")
system_secondary_fixed	`ColorValue`	PlatformColor("@android:color/system_secondary_fixed")
system_secondary_fixed_dim	`ColorValue`	PlatformColor("@android:color/system_secondary_fixed_dim")
system_secondary_light	`ColorValue`	PlatformColor("@android:color/system_secondary_light")
system_surface_bright_dark	`ColorValue`	PlatformColor("@android:color/system_surface_bright_dark")
system_surface_bright_light	`ColorValue`	PlatformColor("@android:color/system_surface_bright_light")
system_surface_container_dark	`ColorValue`	PlatformColor("@android:color/system_surface_container_dark")
system_surface_container_high_dark	`ColorValue`	PlatformColor("@android:color/system_surface_container_high_dark")
system_surface_container_high_light	`ColorValue`	PlatformColor("@android:color/system_surface_container_high_light")
system_surface_container_highest_dark	`ColorValue`	PlatformColor("@android:color/system_surface_container_highest_dark")
system_surface_container_highest_light	`ColorValue`	PlatformColor("@android:color/system_surface_container_highest_light")
system_surface_container_light	`ColorValue`	PlatformColor("@android:color/system_surface_container_light")
system_surface_container_low_dark	`ColorValue`	PlatformColor("@android:color/system_surface_container_low_dark")
system_surface_container_low_light	`ColorValue`	PlatformColor("@android:color/system_surface_container_low_light")
system_surface_container_lowest_dark	`ColorValue`	PlatformColor("@android:color/system_surface_container_lowest_dark")
system_surface_container_lowest_light	`ColorValue`	PlatformColor("@android:color/system_surface_container_lowest_light")
system_surface_dark	`ColorValue`	PlatformColor("@android:color/system_surface_dark")
system_surface_dim_dark	`ColorValue`	PlatformColor("@android:color/system_surface_dim_dark")
system_surface_dim_light	`ColorValue`	PlatformColor("@android:color/system_surface_dim_light")
system_surface_light	`ColorValue`	PlatformColor("@android:color/system_surface_light")
system_surface_variant_dark	`ColorValue`	PlatformColor("@android:color/system_surface_variant_dark")
system_surface_variant_light	`ColorValue`	PlatformColor("@android:color/system_surface_variant_light")
system_tertiary_container_dark	`ColorValue`	PlatformColor("@android:color/system_tertiary_container_dark")
system_tertiary_container_light	`ColorValue`	PlatformColor("@android:color/system_tertiary_container_light")
system_tertiary_dark	`ColorValue`	PlatformColor("@android:color/system_tertiary_dark")
system_tertiary_fixed	`ColorValue`	PlatformColor("@android:color/system_tertiary_fixed")
system_tertiary_fixed_dim	`ColorValue`	PlatformColor("@android:color/system_tertiary_fixed_dim")
system_tertiary_light	`ColorValue`	PlatformColor("@android:color/system_tertiary_light")
system_text_hint_inverse_dark	`ColorValue`	PlatformColor("@android:color/system_text_hint_inverse_dark")
system_text_hint_inverse_light	`ColorValue`	PlatformColor("@android:color/system_text_hint_inverse_light")
system_text_primary_inverse_dark	`ColorValue`	PlatformColor("@android:color/system_text_primary_inverse_dark")
system_text_primary_inverse_disable_only_dark	`ColorValue`	PlatformColor("@android:color/system_text_primary_inverse_disable_only_dark")
system_text_primary_inverse_disable_only_light	`ColorValue`	PlatformColor("@android:color/system_text_primary_inverse_disable_only_light")
system_text_primary_inverse_light	`ColorValue`	PlatformColor("@android:color/system_text_primary_inverse_light")
system_text_secondary_and_tertiary_inverse_dark	`ColorValue`	PlatformColor("@android:color/system_text_secondary_and_tertiary_inverse_dark")
system_text_secondary_and_tertiary_inverse_disabled_dark	`ColorValue`	PlatformColor("@android:color/system_text_secondary_and_tertiary_inverse_disabled_dark")
system_text_secondary_and_tertiary_inverse_disabled_light	`ColorValue`	PlatformColor("@android:color/system_text_secondary_and_tertiary_inverse_disabled_light")
system_text_secondary_and_tertiary_inverse_light	`ColorValue`	PlatformColor("@android:color/system_text_secondary_and_tertiary_inverse_light")

`AndroidBaseColorSDK35`

Android

iOS

tvOS

Web

Property	Type	Description
system_error_0	`ColorValue`	PlatformColor("@android:color/system_error_0")
system_error_10	`ColorValue`	PlatformColor("@android:color/system_error_10")
system_error_100	`ColorValue`	PlatformColor("@android:color/system_error_100")
system_error_1000	`ColorValue`	PlatformColor("@android:color/system_error_1000")
system_error_200	`ColorValue`	PlatformColor("@android:color/system_error_200")
system_error_300	`ColorValue`	PlatformColor("@android:color/system_error_300")
system_error_400	`ColorValue`	PlatformColor("@android:color/system_error_400")
system_error_50	`ColorValue`	PlatformColor("@android:color/system_error_50")
system_error_500	`ColorValue`	PlatformColor("@android:color/system_error_500")
system_error_600	`ColorValue`	PlatformColor("@android:color/system_error_600")
system_error_700	`ColorValue`	PlatformColor("@android:color/system_error_700")
system_error_800	`ColorValue`	PlatformColor("@android:color/system_error_800")
system_error_900	`ColorValue`	PlatformColor("@android:color/system_error_900")
system_on_surface_disabled	`ColorValue`	PlatformColor("@android:color/system_on_surface_disabled")
system_outline_disabled	`ColorValue`	PlatformColor("@android:color/system_outline_disabled")
system_surface_disabled	`ColorValue`	PlatformColor("@android:color/system_surface_disabled")

`AndroidColorAttrSDK1`

Android

iOS

tvOS

Web

Property	Type	Description
colorBackground	`ColorValue`	PlatformColor("?attr/colorBackground")
colorForeground	`ColorValue`	PlatformColor("?attr/colorForeground")
colorForegroundInverse	`ColorValue`	PlatformColor("?attr/colorForegroundInverse")

`AndroidColorAttrSDK14`

Android

iOS

tvOS

Web

Property	Type	Description
colorActivatedHighlight	`ColorValue`	PlatformColor("?attr/colorActivatedHighlight")
colorFocusedHighlight	`ColorValue`	PlatformColor("?attr/colorFocusedHighlight")
colorLongPressedHighlight	`ColorValue`	PlatformColor("?attr/colorLongPressedHighlight")
colorMultiSelectHighlight	`ColorValue`	PlatformColor("?attr/colorMultiSelectHighlight")
colorPressedHighlight	`ColorValue`	PlatformColor("?attr/colorPressedHighlight")

`AndroidColorAttrSDK21`

Android

iOS

tvOS

Web

Property	Type	Description
colorAccent	`ColorValue`	PlatformColor("?attr/colorAccent")
colorButtonNormal	`ColorValue`	PlatformColor("?attr/colorButtonNormal")
colorControlActivated	`ColorValue`	PlatformColor("?attr/colorControlActivated")
colorControlHighlight	`ColorValue`	PlatformColor("?attr/colorControlHighlight")
colorControlNormal	`ColorValue`	PlatformColor("?attr/colorControlNormal")
colorEdgeEffect	`ColorValue`	PlatformColor("?attr/colorEdgeEffect")
colorPrimary	`ColorValue`	PlatformColor("?attr/colorPrimary")
colorPrimaryDark	`ColorValue`	PlatformColor("?attr/colorPrimaryDark")

`AndroidColorAttrSDK23`

Android

iOS

tvOS

Web

Property	Type	Description
colorBackgroundFloating	`ColorValue`	PlatformColor("?attr/colorBackgroundFloating")

`AndroidColorAttrSDK25`

Android

iOS

tvOS

Web

Property	Type	Description
colorSecondary	`ColorValue`	PlatformColor("?attr/colorSecondary")

`AndroidColorAttrSDK26`

Android

iOS

tvOS

Web

Property	Type	Description
colorError	`ColorValue`	PlatformColor("?attr/colorError")
colorMode	`ColorValue`	PlatformColor("?attr/colorMode")

`AndroidColorAttrSDK5`

Android

iOS

tvOS

Web

Property	Type	Description
colorBackgroundCacheHint	`ColorValue`	PlatformColor("?attr/colorBackgroundCacheHint")

`AndroidDeprecatedColor`

Android

iOS

tvOS

Web

Property	Type	Description
primary_text_dark	`ColorValue`	Deprecated Deprecated in Android SDK 28 PlatformColor("@android:color/primary_text_dark")
primary_text_dark_nodisable	`ColorValue`	Deprecated Deprecated in Android SDK 28 PlatformColor("@android:color/primary_text_dark_nodisable")
primary_text_light	`ColorValue`	Deprecated Deprecated in Android SDK 28 PlatformColor("@android:color/primary_text_light")
primary_text_light_nodisable	`ColorValue`	Deprecated Deprecated in Android SDK 28 PlatformColor("@android:color/primary_text_light_nodisable")
secondary_text_dark	`ColorValue`	Deprecated Deprecated in Android SDK 28 PlatformColor("@android:color/secondary_text_dark")
secondary_text_dark_nodisable	`ColorValue`	Deprecated Deprecated in Android SDK 28 PlatformColor("@android:color/secondary_text_dark_nodisable")
secondary_text_light	`ColorValue`	Deprecated Deprecated in Android SDK 28 PlatformColor("@android:color/secondary_text_light")
secondary_text_light_nodisable	`ColorValue`	Deprecated Deprecated in Android SDK 28 PlatformColor("@android:color/secondary_text_light_nodisable")
tertiary_text_dark	`ColorValue`	Deprecated Deprecated in Android SDK 28 PlatformColor("@android:color/tertiary_text_dark")
tertiary_text_light	`ColorValue`	Deprecated Deprecated in Android SDK 28 PlatformColor("@android:color/tertiary_text_light")

`AndroidDynamicMaterialColorType`

Android

iOS

tvOS

Web

Android Dynamic Material Colors

You can find out more about color roles

Property	Type	Description
background	`ColorValue`	Android Dynamic Material Colors This color adapts based on the user's wallpaper and theme settings.
error	`ColorValue`	Android Dynamic Material Colors This color adapts based on the user's wallpaper and theme settings. Read more about Error color role
errorContainer	`ColorValue`	Android Dynamic Material Colors This color adapts based on the user's wallpaper and theme settings. Read more about Error color role
onBackground	`ColorValue`	Android Dynamic Material Colors This color adapts based on the user's wallpaper and theme settings.
onError	`ColorValue`	Android Dynamic Material Colors This color adapts based on the user's wallpaper and theme settings. Read more about Error color role
onErrorContainer	`ColorValue`	Android Dynamic Material Colors This color adapts based on the user's wallpaper and theme settings. Read more about Error color role
onPrimary	`ColorValue`	Android Dynamic Material Colors This color adapts based on the user's wallpaper and theme settings. Read more about Primary color role
onPrimaryContainer	`ColorValue`	Android Dynamic Material Colors This color adapts based on the user's wallpaper and theme settings. Read more about Primary color role
onPrimaryFixed	`ColorValue`	Android Dynamic Material Colors This color adapts based on the user's wallpaper and theme settings. Read more about Primary color role
onPrimaryFixedVariant	`ColorValue`	Android Dynamic Material Colors This color adapts based on the user's wallpaper and theme settings. Read more about Primary color role
onSecondary	`ColorValue`	Android Dynamic Material Colors This color adapts based on the user's wallpaper and theme settings. Read more about Secondary color role
onSecondaryContainer	`ColorValue`	Android Dynamic Material Colors This color adapts based on the user's wallpaper and theme settings. Read more about Secondary color role
onSecondaryFixed	`ColorValue`	Android Dynamic Material Colors This color adapts based on the user's wallpaper and theme settings. Read more about Secondary color role
onSecondaryFixedVariant	`ColorValue`	Android Dynamic Material Colors This color adapts based on the user's wallpaper and theme settings. Read more about Secondary color role
onSurface	`ColorValue`	Android Dynamic Material Colors This color adapts based on the user's wallpaper and theme settings. Read more about Surface color role
onSurfaceInverse	`ColorValue`	Android Dynamic Material Colors This color adapts based on the user's wallpaper and theme settings. Read more about Surface color role Read more about Inverse colors
onSurfaceVariant	`ColorValue`	Android Dynamic Material Colors This color adapts based on the user's wallpaper and theme settings. Read more about Surface color role
onTertiary	`ColorValue`	Android Dynamic Material Colors This color adapts based on the user's wallpaper and theme settings. Read more about Tertiary color role
onTertiaryContainer	`ColorValue`	Android Dynamic Material Colors This color adapts based on the user's wallpaper and theme settings. Read more about Tertiary color role
onTertiaryFixed	`ColorValue`	Android Dynamic Material Colors This color adapts based on the user's wallpaper and theme settings. Read more about Tertiary color role
onTertiaryFixedVariant	`ColorValue`	Android Dynamic Material Colors This color adapts based on the user's wallpaper and theme settings. Read more about Tertiary color role
outline	`ColorValue`	Android Dynamic Material Colors This color adapts based on the user's wallpaper and theme settings. Read more about Outline color role
outlineVariant	`ColorValue`	Android Dynamic Material Colors This color adapts based on the user's wallpaper and theme settings. Read more about Outline color role
primary	`ColorValue`	Android Dynamic Material Colors This color adapts based on the user's wallpaper and theme settings. Read more about Primary color role
primaryContainer	`ColorValue`	Android Dynamic Material Colors This color adapts based on the user's wallpaper and theme settings. Read more about Primary color role
primaryFixed	`ColorValue`	Android Dynamic Material Colors This color adapts based on the user's wallpaper and theme settings. Read more about Primary color role
primaryFixedDim	`ColorValue`	Android Dynamic Material Colors This color adapts based on the user's wallpaper and theme settings. Read more about Primary color role
primaryInverse	`ColorValue`	Android Dynamic Material Colors This color adapts based on the user's wallpaper and theme settings. Read more about Primary color role Read more about Inverse colors
secondary	`ColorValue`	Android Dynamic Material Colors This color adapts based on the user's wallpaper and theme settings. Read more about Secondary color role
secondaryContainer	`ColorValue`	Android Dynamic Material Colors This color adapts based on the user's wallpaper and theme settings. Read more about Secondary color role
secondaryFixed	`ColorValue`	Android Dynamic Material Colors This color adapts based on the user's wallpaper and theme settings. Read more about Secondary color role
secondaryFixedDim	`ColorValue`	Android Dynamic Material Colors This color adapts based on the user's wallpaper and theme settings. Read more about Secondary color role
surface	`ColorValue`	Android Dynamic Material Colors This color adapts based on the user's wallpaper and theme settings. Read more about Surface color role
surfaceBright	`ColorValue`	Android Dynamic Material Colors This color adapts based on the user's wallpaper and theme settings. Read more about Surface color role
surfaceContainer	`ColorValue`	Android Dynamic Material Colors This color adapts based on the user's wallpaper and theme settings. Read more about Surface color role
surfaceContainerHigh	`ColorValue`	Android Dynamic Material Colors This color adapts based on the user's wallpaper and theme settings. Read more about Surface color role
surfaceContainerHighest	`ColorValue`	Android Dynamic Material Colors This color adapts based on the user's wallpaper and theme settings. Read more about Surface color role
surfaceContainerLow	`ColorValue`	Android Dynamic Material Colors This color adapts based on the user's wallpaper and theme settings. Read more about Surface color role
surfaceContainerLowest	`ColorValue`	Android Dynamic Material Colors This color adapts based on the user's wallpaper and theme settings. Read more about Surface color role
surfaceDim	`ColorValue`	Android Dynamic Material Colors This color adapts based on the user's wallpaper and theme settings. Read more about Surface color role
surfaceInverse	`ColorValue`	Android Dynamic Material Colors This color adapts based on the user's wallpaper and theme settings. Read more about Surface color role Read more about Inverse colors
surfaceVariant	`ColorValue`	Android Dynamic Material Colors This color adapts based on the user's wallpaper and theme settings. Read more about Surface color role
tertiary	`ColorValue`	Android Dynamic Material Colors This color adapts based on the user's wallpaper and theme settings. Read more about Tertiary color role
tertiaryContainer	`ColorValue`	Android Dynamic Material Colors This color adapts based on the user's wallpaper and theme settings. Read more about Tertiary color role
tertiaryFixed	`ColorValue`	Android Dynamic Material Colors This color adapts based on the user's wallpaper and theme settings. Read more about Tertiary color role
tertiaryFixedDim	`ColorValue`	Android Dynamic Material Colors This color adapts based on the user's wallpaper and theme settings. Read more about Tertiary color role

`AndroidStaticMaterialColorType`

Android

iOS

tvOS

Web

Android Static Material Colors

You can find out more about color roles

Property	Type	Description
background	`ColorValue`	Android Static Material Color
error	`ColorValue`	Android Static Material Color Read more about Error color role
errorContainer	`ColorValue`	Android Static Material Color Read more about Error color role
onBackground	`ColorValue`	Android Static Material Color
onError	`ColorValue`	Android Static Material Color Read more about Error color role
onErrorContainer	`ColorValue`	Android Static Material Color Read more about Error color role
onPrimary	`ColorValue`	Android Static Material Color Read more about Primary color role
onPrimaryContainer	`ColorValue`	Android Static Material Color Read more about Primary color role
onPrimaryFixed	`ColorValue`	Android Static Material Color Read more about Primary color role
onPrimaryFixedVariant	`ColorValue`	Android Static Material Color Read more about Primary color role
onSecondary	`ColorValue`	Android Static Material Color Read more about Secondary color role
onSecondaryContainer	`ColorValue`	Android Static Material Color Read more about Secondary color role
onSecondaryFixed	`ColorValue`	Android Static Material Color Read more about Secondary color role
onSecondaryFixedVariant	`ColorValue`	Android Static Material Color Read more about Secondary color role
onSurface	`ColorValue`	Android Static Material Color Read more about Surface color role
onSurfaceInverse	`ColorValue`	Android Static Material Color Read more about Surface color role Read more about Inverse colors
onSurfaceVariant	`ColorValue`	Android Static Material Color Read more about Surface color role
onTertiary	`ColorValue`	Android Static Material Color Read more about Tertiary color role
onTertiaryContainer	`ColorValue`	Android Static Material Color Read more about Tertiary color role
onTertiaryFixed	`ColorValue`	Android Static Material Color Read more about Tertiary color role
onTertiaryFixedVariant	`ColorValue`	Android Static Material Color Read more about Tertiary color role
outline	`ColorValue`	Android Static Material Color Read more about Outline color role
outlineVariant	`ColorValue`	Android Static Material Color Read more about Outline color role
primary	`ColorValue`	Android Static Material Color Read more about Primary color role
primaryContainer	`ColorValue`	Android Static Material Color Read more about Primary color role
primaryFixed	`ColorValue`	Android Static Material Color Read more about Primary color role
primaryFixedDim	`ColorValue`	Android Static Material Color Read more about Primary color role
primaryInverse	`ColorValue`	Android Static Material Color Read more about Primary color role Read more about Inverse colors
secondary	`ColorValue`	Android Static Material Color Read more about Secondary color role
secondaryContainer	`ColorValue`	Android Static Material Color Read more about Secondary color role
secondaryFixed	`ColorValue`	Android Static Material Color Read more about Secondary color role
secondaryFixedDim	`ColorValue`	Android Static Material Color Read more about Secondary color role
surface	`ColorValue`	Android Static Material Color Read more about Surface color role
surfaceBright	`ColorValue`	Android Static Material Color Read more about Surface color role
surfaceContainer	`ColorValue`	Android Static Material Color Read more about Surface color role
surfaceContainerHigh	`ColorValue`	Android Static Material Color Read more about Surface color role
surfaceContainerHighest	`ColorValue`	Android Static Material Color Read more about Surface color role
surfaceContainerLow	`ColorValue`	Android Static Material Color Read more about Surface color role
surfaceContainerLowest	`ColorValue`	Android Static Material Color Read more about Surface color role
surfaceDim	`ColorValue`	Android Static Material Color Read more about Surface color role
surfaceInverse	`ColorValue`	Android Static Material Color Read more about Surface color role Read more about Inverse colors
surfaceVariant	`ColorValue`	Android Static Material Color Read more about Surface color role
tertiary	`ColorValue`	Android Static Material Color Read more about Tertiary color role
tertiaryContainer	`ColorValue`	Android Static Material Color Read more about Tertiary color role
tertiaryFixed	`ColorValue`	Android Static Material Color Read more about Tertiary color role
tertiaryFixedDim	`ColorValue`	Android Static Material Color Read more about Tertiary color role

`ColorType`

Android

iOS

tvOS

Web

Property	Type	Description
android	`AndroidBaseColorSDK1 & AndroidBaseColorSDK14 & AndroidBaseColorSDK31 & AndroidBaseColorSDK34 & AndroidBaseColorSDK35 & AndroidDeprecatedColor & undefined & { attr: AndroidBaseColorAttr, dynamic: AndroidDynamicMaterialColor, material: AndroidMaterialColor }`	-
ios	`IOSBaseColor & undefined`	-

`IOSBaseColor`

Android

iOS

tvOS

Web

Property	Type	Description
darkText	`ColorValue`	PlatformColor("darkText")
label	`ColorValue`	PlatformColor("label")
lightText	`ColorValue`	PlatformColor("lightText")
link	`ColorValue`	PlatformColor("link")
opaqueSeparator	`ColorValue`	PlatformColor("opaqueSeparator")
placeholderText	`ColorValue`	PlatformColor("placeholderText")
quaternaryLabel	`ColorValue`	PlatformColor("quaternaryLabel")
quaternarySystemFill	`ColorValue`	PlatformColor("quaternarySystemFill")
secondaryLabel	`ColorValue`	PlatformColor("secondaryLabel")
secondarySystemBackground	`ColorValue`	PlatformColor("secondarySystemBackground")
secondarySystemFill	`ColorValue`	PlatformColor("secondarySystemFill")
secondarySystemGroupedBackground	`ColorValue`	PlatformColor("secondarySystemGroupedBackground")
separator	`ColorValue`	PlatformColor("separator")
systemBackground	`ColorValue`	PlatformColor("systemBackground")
systemBlue	`ColorValue`	PlatformColor("systemBlue")
systemBrown	`ColorValue`	PlatformColor("systemBrown")
systemCyan	`ColorValue`	PlatformColor("systemCyan")
systemFill	`ColorValue`	PlatformColor("systemFill")
systemGray	`ColorValue`	PlatformColor("systemGray")
systemGray2	`ColorValue`	PlatformColor("systemGray2")
systemGray3	`ColorValue`	PlatformColor("systemGray3")
systemGray4	`ColorValue`	PlatformColor("systemGray4")
systemGray5	`ColorValue`	PlatformColor("systemGray5")
systemGray6	`ColorValue`	PlatformColor("systemGray6")
systemGreen	`ColorValue`	PlatformColor("systemGreen")
systemGroupedBackground	`ColorValue`	PlatformColor("systemGroupedBackground")
systemIndigo	`ColorValue`	PlatformColor("systemIndigo")
systemMint	`ColorValue`	PlatformColor("systemMint")
systemOrange	`ColorValue`	PlatformColor("systemOrange")
systemPink	`ColorValue`	PlatformColor("systemPink")
systemPurple	`ColorValue`	PlatformColor("systemPurple")
systemRed	`ColorValue`	PlatformColor("systemRed")
systemTeal	`ColorValue`	PlatformColor("systemTeal")
systemYellow	`ColorValue`	PlatformColor("systemYellow")
tertiaryLabel	`ColorValue`	PlatformColor("tertiaryLabel")
tertiarySystemBackground	`ColorValue`	PlatformColor("tertiarySystemBackground")
tertiarySystemFill	`ColorValue`	PlatformColor("tertiarySystemFill")
tertiarySystemGroupedBackground	`ColorValue`	PlatformColor("tertiarySystemGroupedBackground")

Types

`AndroidBaseColor`

Android

iOS

tvOS

Web

Type: AndroidBaseColorSDK1 AndroidBaseColorSDK14 AndroidBaseColorSDK31 AndroidBaseColorSDK34 AndroidBaseColorSDK35 AndroidDeprecatedColor extended by:

Property	Type	Description

`AndroidBaseColorAttr`

Android

iOS

tvOS

Web

Type: AndroidColorAttrSDK1 AndroidColorAttrSDK5 AndroidColorAttrSDK14 AndroidColorAttrSDK21 AndroidColorAttrSDK23 AndroidColorAttrSDK25 AndroidColorAttrSDK26 extended by:

Property	Type	Description

`AndroidDynamicMaterialColor`

Android

iOS

tvOS

Web

Type: AndroidDynamicMaterialColorType extended by:

Property	Type	Description

`AndroidMaterialColor`

Android

iOS

tvOS

Web

Type: AndroidStaticMaterialColorType extended by:

Property	Type	Description

`EffectCallback()`

Android

iOS

tvOS

Web

Memoized callback containing the effect, should optionally return a cleanup function.

Returns:

undefined | void | () => void

`ExternalPathString`

Android

iOS

tvOS

Web

Literal Type: union

Acceptable values are: {string}:{string} | //{string}

`Href<T>`

Android

iOS

tvOS

Web

The main routing type for Expo Router. It includes all available routes with strongly typed parameters. It can either be:

string: A full path like /profile/settings or a relative path like ../settings.
object: An object with a pathname and optional params. The pathname can be a full path like /profile/settings or a relative path like ../settings. The params can be an object of key-value pairs.

An Href can either be a string or an object.

Generic: T

Type: T ? T[href] : string | HrefObject

`HrefObject`

Android

iOS

tvOS

Web

Property	Type	Description
params(optional)	`UnknownInputParams`	Optional parameters for the route.
pathname	`string`	The path of the route.

`LinkPreviewStyle`

Android

iOS

tvOS

Web

Type: Omit<ViewStyle, 'position' | 'width' | 'height'> extended by:

Property	Type	Description
height(optional)	`number`	Sets the preferred height of the preview. If not set, full height of the screen will be used. This is only preferred height, the actual height may be different
width(optional)	`number`	Sets the preferred width of the preview. If not set, full width of the screen will be used. This is only preferred width, the actual width may be different

`LoaderFunction(args)`

Android

iOS

tvOS

Web

Function type for route loaders. Loaders are executed on the server during SSR/SSG to fetch data required by a route.

Parameter	Type
args	`{ params: Record<string, string \| string[]>, request: Request }`

Returns:

Promise<T> | T

`NativeIntent`

Android

iOS

tvOS

Web

Created by using a special file called +native-intent.tsx at the top-level of your project's app directory. It exports redirectSystemPath or legacy_subscribe functions, both methods designed to handle URL/path processing.

Useful for re-writing URLs to correctly target a route when unique/referred URLs are incoming from third-party providers or stale URLs from previous versions.

See: For more information on how to use NativeIntent, see Customizing links.

Property	Type	Description
legacy_subscribe(optional)	`(listener: (url: string) => void) => undefined \| void \| () => void`	Experimentally available in SDK 52. Useful as an alternative API when a third-party provider doesn't support Expo Router but has support for React Navigation via `Linking.subscribe()` for existing projects. Using this API is not recommended for newer projects or integrations since it is incompatible with Server Side Routing and Static Rendering, and can become challenging to manage while offline or in a low network environment.
redirectSystemPath(optional)	`(event: { initial: boolean, path: string }) => Promise<string \| null> \| string \| null`	A special method used to process URLs in native apps. When invoked, it receives an `options` object with the following properties: path: represents the URL or path undergoing processing. initial: a boolean indicating whether the path is the app's initial URL. Its return value should be a `string`, a `Promise<string \| null>`, or `null`. When a falsy value is returned (for example, `null`), no redirection occurs and the app stays on the current path. Note that throwing errors within this method may result in app crashes. It's recommended to wrap your code inside a `try/catch` block and utilize `.catch()` when appropriate. See: For usage information, see Redirecting system paths.

`PickPartial`

Android

iOS

tvOS

Web

Literal Type: union

The list of input keys will become optional, everything else will remain the same.

Acceptable values are: Omit<T, K> | Partial<Pick<T, K>>

`RedirectConfig`

Android

iOS

tvOS

Web

Property	Type	Description
destination	`string`	-
destinationContextKey	`string`	-
external(optional)	`boolean`	-
methods(optional)	`string[]`	-
permanent(optional)	`boolean`	-
source	`string`	-

`RelativePathString`

Android

iOS

tvOS

Web

Literal Type: union

Acceptable values are: ./{string} | ../{string} | '..'

`ResultState`

Android

iOS

tvOS

Web

Type: PartialState<NavigationState> extended by:

Property	Type	Description
state(optional)	`ResultState`	-

`Route`

Android

iOS

tvOS

Web

Type: Exclude<Extract[pathname], RelativePathString | ExternalPathString>

`Router`

Android

iOS

tvOS

Web

Returns router object for imperative navigation API.

Example

import { router } from 'expo-router';
import { Text } from 'react-native';

export default function Route() {

 return (
  <Text onPress={() => router.push('/home')}>Go Home</Text>
 );
}

Property	Type	Description
back	`() => void`	Goes back in the navigation history.
canDismiss	`() => boolean`	Checks if it is possible to dismiss the current screen. Returns `true` if the router is within the stack with more than one screen in stack's history.
canGoBack	`() => boolean`	Navigates to a route in the navigator's history if it supports invoking the `back` function.
dismiss	`(count: number) => void`	Navigates to the a stack lower than the current screen using the provided count if possible, otherwise 1. If the current screen is the only route, it will dismiss the entire stack.
dismissAll	`() => void`	Returns to the first screen in the closest stack. This is similar to `popToTop` stack action.
dismissTo	`(href: Href, options: NavigationOptions) => void`	Dismisses screens until the provided href is reached. If the href is not found, it will instead replace the current screen with the provided `href`.
navigate	`(href: Href, options: NavigationOptions) => void`	Navigates to the provided `href`.
prefetch	`(name: Href) => void`	Prefetch a screen in the background before navigating to it
push	`(href: Href, options: NavigationOptions) => void`	Navigates to the provided `href` using a push operation if possible.
replace	`(href: Href, options: NavigationOptions) => void`	Navigates to route without appending to the history. Can be used with `useFocusEffect` to redirect imperatively to a new screen. See: Using `useRouter()` hook to redirect.
setParams	`(params: Partial<RouteInputParams<T>>) => void`	Updates the current route's query params.

`ScreenProps`

Android

iOS

tvOS

Web

Property	Type	Description
dangerouslySingular(optional)	`SingularOptions`	-
getId(optional)	`({ params }: { params: Record<string, any> }) => string \| undefined`	-
initialParams(optional)	`Record<string, any>`	-
listeners(optional)	`ScreenListeners<TState, TEventMap> \| (prop: { navigation: any, route: RouteProp<ParamListBase, string> }) => ScreenListeners<TState, TEventMap>`	-
name(optional)	`string`	Name is required when used inside a Layout component.
options(optional)	`TOptions \| (prop: { navigation: any, route: RouteProp<ParamListBase, string> }) => TOptions`	-
redirect(optional)	`boolean`	Redirect to the nearest sibling route. If all children are `redirect={true}`, the layout will render `null` as there are no children to render.

`SearchOrHash`

Android

iOS

tvOS

Web

Literal Type: union

Acceptable values are: ?{string} | #{string}

`SingularOptions`

Android

iOS

tvOS

Web

Type: boolean or object shaped as below:

`(name, params) => string | undefined`

Parameter	Type	Description
name(index signature)	`string`	-
params(index signature)	`UnknownOutputParams`	-

`SitemapType`

Android

iOS

tvOS

Web

Property	Type	Description
children	`SitemapType[]`	-
contextKey	`string`	-
filename	`string`	-
href	`string \| Href`	-
isGenerated	`boolean`	-
isInitial	`boolean`	-
isInternal	`boolean`	-

`WebAnchorProps`

Web

Property	Type	Description
download(optional)	`string`	Specifies that the `href` should be downloaded when the user clicks on the link, instead of navigating to it. It is typically used for links that point to files that the user should download, such as PDFs, images, documents, and more. The value of the `download` property, which represents the filename for the downloaded file. This property is passed to the underlying anchor (`<a>`) tag. Example `<Link href="/image.jpg" download="my-image.jpg">Download image</Link>`
rel(optional)	`string`	Specifies the relationship between the `href` and the current route. Common values: nofollow: Indicates to search engines that they should not follow the `href`. This is often used for user-generated content or links that should not influence search engine rankings. noopener: Suggests that the `href` should not have access to the opening window's `window.opener` object, which is a security measure to prevent potentially harmful behavior in cases of links that open new tabs or windows. noreferrer: Requests that the browser does not send the `Referer` HTTP header when navigating to the `href`. This can enhance user privacy. The `rel` property is primarily used for informational and instructive purposes, helping browsers and web crawlers make better decisions about how to handle and interpret the links on a web page. It is important to use appropriate `rel` values to ensure that links behave as intended and adhere to best practices for web development and SEO (Search Engine Optimization). This property is passed to the underlying anchor (`<a>`) tag. Example `<Link href="https://expo.dev" rel="nofollow">Go to Expo</Link>`
target(optional)	`'_self' \| '_blank' \| '_parent' \| '_top' \| string & object`	Specifies where to open the `href`. _self: the current tab. _blank: opens in a new tab or window. _parent: opens in the parent browsing context. If no parent, defaults to _self. _top: opens in the highest browsing context ancestor. If no ancestors, defaults to _self. This property is passed to the underlying anchor (`<a>`) tag. Default:`'_self'` Example `<Link href="https://expo.dev" target="_blank">Go to Expo in new tab</Link>`