expo-router
Version:
Expo Router is a file-based router for React Native and web applications.
264 lines (263 loc) • 8.64 kB
TypeScript
import type { AndroidSymbol } from 'expo-symbols';
import type { ColorValue, ImageSourcePropType, StyleProp } from 'react-native';
import type { SFSymbol } from 'sf-symbols-typescript';
import { VectorIcon } from '../../primitives';
import type { IconRenderingMode, NativeTabsLabelStyle } from '../types';
export interface NativeTabsTriggerLabelProps {
/**
* The text to display as the label for the tab.
*/
children?: string;
selectedStyle?: StyleProp<NativeTabsLabelStyle>;
/**
* If true, the label will be hidden.
* @default false
*/
hidden?: boolean;
}
export declare const NativeTabsTriggerLabel: React.FC<NativeTabsTriggerLabelProps>;
export interface SrcIcon {
/**
* The image source to use as an icon.
*
* When `sf` prop is used it will override this prop on iOS.
*
* When `drawable` or `material` prop is used it will override this prop on Android.
*
* The value can be provided in two ways:
* - As an image source
* - As an object specifying the default and selected states
*
* @example
* ```tsx
* <Icon src={require('./path/to/icon.png')} />
* ```
*
* @example
* ```tsx
* <Icon src={{ default: require('./path/to/icon.png'), selected: require('./path/to/icon-selected.png') }} />
* ```
*
* @platform Android
* @platform iOS
*/
src?: ImageSourcePropType | React.ReactElement | {
default?: ImageSourcePropType | React.ReactElement;
selected: ImageSourcePropType | React.ReactElement;
};
/**
* Controls how the image icon is rendered on iOS.
*
* - `'template'`: iOS applies tint color to the icon (selected/unselected states)
* - `'original'`: Preserves original icon colors
*
* **Default behavior:**
* - If tab bar icon color is configured, defaults to `'template'`
* - If no icon color is set, defaults to `'original'`
*
* @see [Apple documentation](https://developer.apple.com/documentation/uikit/uiimage/renderingmode-swift.enum) for more information.
*
* @platform ios
*/
renderingMode?: IconRenderingMode;
}
export interface SFSymbolIcon {
/**
* The name of the SF Symbol to use as an icon.
*
* The value can be provided in two ways:
* - As a string with the SF Symbol name
* - As an object specifying the default and selected states
*
* @example
* ```tsx
* <Icon sf="magnifyingglass" />
* ```
*
* @example
* ```tsx
* <Icon sf={{ default: "house", selected: "house.fill" }} />
* ```
*
* @platform iOS
*/
sf?: SFSymbol | {
default?: SFSymbol;
selected: SFSymbol;
};
}
export interface XcassetIcon {
/**
* The name of the iOS asset catalog image to use as an icon.
*
* Xcassets provide automatic multi-resolution (@1x/@2x/@3x), dark mode variants,
* and device-specific images via `[UIImage imageNamed:]`. Both image sets and
* symbol sets are supported.
*
* > **Note:** The rendering mode comes from the asset's **Render As** setting in the
* > asset catalog, not from the `renderingMode` prop. Set it to **Template Image** for
* > the icon to be tinted with `iconColor` and `selectedIconColor`.
*
* The value can be provided in two ways:
* - As a string with the asset catalog image name
* - As an object specifying the default and selected states
*
* @example
* ```tsx
* <Icon xcasset="custom-icon" />
* ```
*
* @example
* ```tsx
* <Icon xcasset={{ default: "home-outline", selected: "home-filled" }} />
* ```
*
* @platform iOS
*/
xcasset?: string | {
default?: string;
selected: string;
};
}
export interface DrawableIcon {
/**
* The name of the drawable resource to use as an icon.
*
* The value can be provided in two ways:
* - As a string with the drawable resource name
* - As an object specifying the default and selected states
*
* @example
* ```tsx
* <Icon drawable="ic_home" />
* ```
*
* @example
* ```tsx
* <Icon drawable={{ default: 'ic_home_outline', selected: 'ic_home_filled' }} />
* ```
*
* @platform android
*/
drawable?: string | {
default?: string;
selected: string;
};
}
/**
* Material icon name for Android native tabs.
*
* @platform android
*/
export interface MaterialIcon {
/**
* Material icon glyph name. See the [Material icons for the complete catalog](https://fonts.google.com/icons).
*
* The value can be provided in two ways:
* - As a string with the Material icon name
* - As an object specifying the default and selected states
*
* @example
* ```tsx
* <Icon md="home" />
* ```
*
* @example
* ```tsx
* <Icon md={{ default: 'home', selected: 'home_filled' }} />
* ```
*/
md: AndroidSymbol | {
default?: AndroidSymbol;
selected: AndroidSymbol;
};
}
export type NativeTabsTriggerIconProps = {
selectedColor?: ColorValue;
} & ((SFSymbolIcon & DrawableIcon) | (SFSymbolIcon & MaterialIcon) | (SFSymbolIcon & SrcIcon) | (XcassetIcon & DrawableIcon) | (XcassetIcon & MaterialIcon) | (XcassetIcon & SrcIcon) | (MaterialIcon & SrcIcon) | (DrawableIcon & SrcIcon) | SrcIcon);
/**
* Renders an icon for the tab.
*
* Accepts various icon sources such as SF Symbols, xcasset images, drawable resources, material icons, or image sources.
*
* Each icon prop (`sf`, `xcasset`, `drawable`, `md`, `src`) can be either a single value, or an object
* with `{ default, selected }` to use a distinct icon when the tab is selected.
*
* Acceptable props combinations:
* - `sf` and `drawable` - `sf` will be used for iOS icon, `drawable` for Android icon
* - `sf` and `src` - `sf` will be used for iOS icon, `src` for Android icon
* - `xcasset` and `drawable` - `xcasset` will be used for iOS icon, `drawable` for Android icon
* - `xcasset` and `md` - `xcasset` will be used for iOS icon, `md` for Android icon
* - `xcasset` and `src` - `xcasset` will be used for iOS icon, `src` for Android icon
* - `src` and `drawable` - `src` will be used for iOS icon, `drawable` for Android icon
* - `src` only - `src` will be used for both iOS and Android icons
*
* Priority on iOS: `sf` > `xcasset` > `src`. Priority on Android: `drawable` > `md` > `src`.
*
* @platform ios
* @platform android
*/
export declare const NativeTabsTriggerIcon: React.FC<NativeTabsTriggerIconProps>;
/**
* Helper component which can be used to load vector icons for `NativeTabs`.
*
* @example
* ```tsx
* import { NativeTabs } from 'expo-router/native-tabs';
* import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons';
*
* export default Layout(){
* return (
* <NativeTabs>
* <NativeTabs.Trigger name="index">
* <NativeTabs.Trigger.Icon src={<NativeTabs.Trigger.VectorIcon family={MaterialCommunityIcons} name="home" />} />
* </NativeTabs.Trigger>
* </NativeTabs>
* );
* }
* ```
*/
export declare const NativeTabsTriggerVectorIcon: typeof VectorIcon;
export interface NativeTabsTriggerPromiseIconProps {
loader: () => Promise<ImageSourcePropType | null>;
}
export declare const NativeTabsTriggerPromiseIcon: (props: NativeTabsTriggerPromiseIconProps) => null;
export interface NativeTabsTriggerBadgeProps {
/**
* The text to display as the badge for the tab.
* If not provided, the badge will not be displayed.
*/
children?: string;
/**
* If true, the badge will be hidden.
* @default false
*/
hidden?: boolean;
selectedBackgroundColor?: ColorValue;
}
export declare const NativeTabsTriggerBadge: React.FC<NativeTabsTriggerBadgeProps>;
export interface NativeTabsBottomAccessoryProps {
children?: React.ReactNode;
}
/**
* A [bottom accessory](https://developer.apple.com/documentation/uikit/uitabbarcontroller/bottomaccessory) for `NativeTabs` on iOS 26 and above.
*
* @example
* ```tsx
* import { NativeTabs } from 'expo-router/native-tabs';
*
* export default Layout(){
* return (
* <NativeTabs>
* <NativeTabs.BottomAccessory>
* <YourAccessoryComponent />
* </NativeTabs.BottomAccessory>
* <NativeTabs.Trigger name="index" />
* </NativeTabs>
* );
* }
* ```
*
* @platform iOS 26+
*/
export declare const NativeTabsBottomAccessory: React.FC<NativeTabsBottomAccessoryProps>;