RouteProps — Kuito Documentation

Usage

Give a tab a title and platform icon

This type is used by Route

tsx

import { Route, Router, Tab, Tabs, Text } from 'kuito';

function Discover() {
  return <Text padding={16}>Discover</Text>;
}

function Library() {
  return <Text padding={16}>Library</Text>;
}

export default function App() {
  return (
    <Router>
      <Tabs>
        <Tab name="discover" title="Discover" icon={{ ios: 'safari', android: 'explore' }}>
          <Route name="index" path="/" screen={Discover} title="Discover" />
        </Tab>
        <Tab
          name="library"
          title="Library"
          icon={{ ios: 'books.vertical', android: 'library_music' }}
        >
          <Route name="library" path="/library" screen={Library} title="Library" />
        </Tab>
      </Tabs>
    </Router>
  );
}

Type declaration

export interface RouteProps<P extends object = {}, R = undefined> {
  /** Its key in `routes`. */
  name: string;
  /** Segments, `:name` params and a final `*name`: what a deep link's path matches. */
  path: string;
  /** How a link's text parses into each param; a path param left out is a string. */
  params?: { [K in keyof P]?: ParamType };
  screen: Component<ScreenProps<P, R>>;
  /** The native header's title. */
  title?: string | ((params: P) => string);
  presentation?: Presentation;
  /** The screen's color, under the bars too; the platform's background without. */
  backgroundColor?: string;
  /** A sheet route's heights, as `<Sheet snapPoints>` takes them; the platform's default without. */
  snapPoints?: readonly SnapPoint[];
  /** The native header: false hides it; its items, large title and search otherwise (docs/navigation.md#headers). */
  header?: false | ScreenHeader | ((params: P) => false | ScreenHeader);
  /** The system bars while this screen is focused, as a `<SystemBars>`'s props (docs/system-ui.md). */
  systemBars?: SystemBarsProps;
}

Members 10

Name	Type	Required	Description
`name`	`string`	Yes	Its key in `routes`.
`path`	`string`	Yes	Segments, `:name` params and a final `*name`: what a deep link's path matches.
`params`	`{ [K in keyof P]?: ParamType; }`	No	How a link's text parses into each param; a path param left out is a string.
`screen`	`Component<ScreenProps<P, R>>`	Yes	—
`title`	`string \| ((params: P) => string)`	No	The native header's title.
`presentation`	`Presentation`	No	—
`backgroundColor`	`string`	No	The screen's color, under the bars too; the platform's background without.
`snapPoints`	`readonly SnapPoint[]`	No	A sheet route's heights, as `<Sheet snapPoints>` takes them; the platform's default without.
`header`	`false \| ScreenHeader \| ((params: P) => false \| ScreenHeader)`	No	The native header: false hides it; its items, large title and search otherwise (docs/navigation.md#headers).
`systemBars`	`SystemBarsProps`	No	The system bars while this screen is focused, as a `<SystemBars>`'s props (docs/system-ui.md).

screen — method signatures

Signatures

(props: ScreenProps<P, R>): KuitoNode

Parameters

Name	Type	Required	Description
`props`	`ScreenProps<P, R>`	Yes	—

Returns

KuitoNode

systemBars — nested fields

systemBars fields

Name	Type	Required	Description
`statusBar`	`StatusBarOptions`	No	The status bar's content color, visibility and, on Android, color.
`backgroundColor`	`string`	No	The root view's color, seen behind the app's views.
`navigationBarColor`	`string`	No	Android: drawn behind the navigation bar.
`navigationBarButtonStyle`	`NavigationBarButtonStyle`	No	Android: light buttons for a dark navigation bar, dark buttons for a light one.
`navigationBarHidden`	`boolean`	No	Android: hides the navigation bar; a swipe from the edge shows it for a moment.
`immersive`	`boolean`	No	Full screen: hides the status bar, the navigation bar and the home indicator, and on iOS edge swipes reach the app first. The entry's own props, and later entries, win over what it hides.
`homeIndicatorAutoHidden`	`boolean`	No	iOS: lets the home indicator fade out while the user doesn't touch the screen.

statusBar — nested fields

statusBar fields

Name	Type	Required	Description
`content`	`StatusBarContent`	No	The color of the status bar's text and icons.
`hidden`	`boolean`	No	—
`animated`	`boolean`	No	Whether changes to content, hidden and backgroundColor animate.
`transition`	`StatusBarTransition`	No	iOS: how showing and hiding animates, when animated.
`backgroundColor`	`string`	No	Android: drawn behind the status bar; a hex color.
`translucent`	`boolean`	No	Android: false lays the app out below the status bar instead of under it.

Generated from the public TypeScript declarations: signatures, props and defaults come from the checked source, descriptions from its JSDoc. No defaults are invented.