alouette
Version:
A modern, customizable design system built on top of NativeWind v5 with configurable defaults
38 lines • 1.83 kB
TypeScript
import type { ReactNode } from "react";
import type { GestureResponderEvent } from "react-native";
import type { AccentScopeProps } from "../containers/AccentScope";
import type { SVGIconElement } from "../primitives/Icon";
export interface AppHeaderNavItemProps {
/**
* Destination, matched against the AppHeaderNav's value to mark the item
* current. Renders a real `<a href>` on web (native ignores it); expo Router's
* `<Link asChild>` injects it, so it does not have to be written twice.
*/
href?: string;
label: string;
icon?: SVGIconElement;
/**
* Replaces `icon` while the item is hovered, focused or pressed, and for as
* long as it is the current destination — a duotone twin of `icon`, usually.
*/
activeIcon?: SVGIconElement;
/** Accent tinting `activeIcon`, so the glyph changes color as well as weight. */
activeAccent?: AccentScopeProps["accent"];
/**
* Trailing count or status rendered after the label, inside the same
* pressable — typically a `Badge`.
*/
badge?: ReactNode;
/** Names the destination when a `badge` leaves the visible label incomplete. */
"aria-label"?: string;
disabled?: boolean;
/**
* Handles the press instead of the group's `onValueChange` — this is what
* `<Link asChild>` injects. An AppHeaderNav whose items carry `onPress` must
* be controlled: its internal value never updates. A handler that navigates on
* web must call `event.preventDefault()`, as routers do.
*/
onPress?: (event: GestureResponderEvent) => void;
}
export declare function AppHeaderNavItem({ href, label, icon, activeIcon, activeAccent, badge, "aria-label": ariaLabel, disabled, onPress, }: AppHeaderNavItemProps): ReactNode;
//# sourceMappingURL=AppHeaderNavItem.d.ts.map