@react-navigation/bottom-tabs
- Version 7.2.0
- Published
- 348 kB
- 2 dependencies
- MIT license
Install
npm i @react-navigation/bottom-tabs
yarn add @react-navigation/bottom-tabs
pnpm add @react-navigation/bottom-tabs
Overview
Bottom tab navigator following iOS design guidelines
Index
Variables
Functions
Type Aliases
Namespaces
Variables
variable BottomTabBarHeightCallbackContext
const BottomTabBarHeightCallbackContext: React.Context<(height: number) => void>;
variable BottomTabBarHeightContext
const BottomTabBarHeightContext: React.Context<number>;
Functions
function BottomTabBar
BottomTabBar: ({ state, navigation, descriptors, insets, style }: Props) => any;
function BottomTabView
BottomTabView: (props: Props) => any;
function createBottomTabNavigator
createBottomTabNavigator: () => any;
function useBottomTabBarHeight
useBottomTabBarHeight: () => number;
Type Aliases
type BottomTabBarButtonProps
type BottomTabBarButtonProps = Omit< React.ComponentProps<typeof Pressable>, 'style'> & { href?: string; children: React.ReactNode; style?: StyleProp<ViewStyle>; onPress?: ( e: React.MouseEvent<HTMLAnchorElement, MouseEvent> | GestureResponderEvent ) => void;};
type BottomTabBarProps
type BottomTabBarProps = { state: TabNavigationState<ParamListBase>; descriptors: BottomTabDescriptorMap; navigation: NavigationHelpers<ParamListBase, BottomTabNavigationEventMap>; insets: EdgeInsets;};
type BottomTabHeaderProps
type BottomTabHeaderProps = { /** * Layout of the screen. */ layout: Layout; /** * Options for the current screen. */ options: BottomTabNavigationOptions; /** * Route object for the current screen. */ route: RouteProp<ParamListBase>; /** * Navigation prop for the header. */ navigation: BottomTabNavigationProp<ParamListBase>;};
type BottomTabNavigationEventMap
type BottomTabNavigationEventMap = { /** * Event which fires on tapping on the tab in the tab bar. */ tabPress: { data: undefined; canPreventDefault: true; }; /** * Event which fires on long press on the tab in the tab bar. */ tabLongPress: { data: undefined; }; /** * Event which fires when a transition animation starts. */ transitionStart: { data: undefined; }; /** * Event which fires when a transition animation ends. */ transitionEnd: { data: undefined; };};
type BottomTabNavigationOptions
type BottomTabNavigationOptions = HeaderOptions & { /** * Title text for the screen. */ title?: string; /** * Title string of a tab displayed in the tab bar * or a function that given { focused: boolean, color: string, position: 'below-icon' | 'beside-icon', children: string } returns a React.Node to display in tab bar. * * When undefined, scene title is used. Use `tabBarShowLabel` to hide the label. */ tabBarLabel?: | string | ((props: { focused: boolean; color: string; position: LabelPosition; children: string; }) => React.ReactNode); /** * Whether the tab label should be visible. Defaults to `true`. */ tabBarShowLabel?: boolean; /** * Whether the label is shown below the icon or beside the icon. * * - `below-icon`: the label is shown below the icon (typical for iPhones) * - `beside-icon` the label is shown next to the icon (typical for iPad) * * By default, the position is chosen automatically based on device width. */ tabBarLabelPosition?: LabelPosition; /** * Style object for the tab label. */ tabBarLabelStyle?: StyleProp<TextStyle>; /** * Whether label font should scale to respect Text Size accessibility settings. */ tabBarAllowFontScaling?: boolean; /** * A function that given { focused: boolean, color: string } returns a React.Node to display in the tab bar. */ tabBarIcon?: (props: { focused: boolean; color: string; size: number; }) => React.ReactNode; /** * Style object for the tab icon. */ tabBarIconStyle?: StyleProp<TextStyle>; /** * Text to show in a badge on the tab icon. */ tabBarBadge?: number | string; /** * Custom style for the tab bar badge. * You can specify a background color or text color here. */ tabBarBadgeStyle?: StyleProp<TextStyle>; /** * Accessibility label for the tab button. This is read by the screen reader when the user taps the tab. * It's recommended to set this if you don't have a label for the tab. */ tabBarAccessibilityLabel?: string; /** * ID to locate this tab button in tests. */ tabBarButtonTestID?: string; /** * Function which returns a React element to render as the tab bar button. * Renders `PlatformPressable` by default. */ tabBarButton?: (props: BottomTabBarButtonProps) => React.ReactNode; /** * Color for the icon and label in the active tab. */ tabBarActiveTintColor?: string; /** * Color for the icon and label in the inactive tabs. */ tabBarInactiveTintColor?: string; /** * Background color for the active tab. */ tabBarActiveBackgroundColor?: string; /** * Background color for the inactive tabs. */ tabBarInactiveBackgroundColor?: string; /** * Style object for the tab item container. */ tabBarItemStyle?: StyleProp<ViewStyle>; /** * Whether the tab bar gets hidden when the keyboard is shown. Defaults to `false`. */ tabBarHideOnKeyboard?: boolean; /** * Animation config for showing and hiding the tab bar when the keyboard is shown/hidden. */ tabBarVisibilityAnimationConfig?: { show?: TabBarVisibilityAnimationConfig; hide?: TabBarVisibilityAnimationConfig; }; /** * Variant of the tab bar. Defaults to `uikit`. */ tabBarVariant?: Variant; /** * Style object for the tab bar container. */ tabBarStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>; /** * Function which returns a React Element to use as background for the tab bar. * You could render an image, a gradient, blur view etc. * * When using `BlurView`, make sure to set `position: 'absolute'` in `tabBarStyle` as well. * You'd also need to use `useBottomTabBarHeight()` to add a bottom padding to your content. */ tabBarBackground?: () => React.ReactNode; /** * Position of the tab bar on the screen. Defaults to `bottom`. */ tabBarPosition?: 'bottom' | 'left' | 'right' | 'top'; /** * Whether this screens should render the first time it's accessed. Defaults to `true`. * Set it to `false` if you want to render the screen on initial render. */ lazy?: boolean; /** * Function that given returns a React Element to display as a header. */ header?: (props: BottomTabHeaderProps) => React.ReactNode; /** * Whether to show the header. Setting this to `false` hides the header. * Defaults to `true`. */ headerShown?: boolean; /** * Whether any nested stack should be popped to top when navigating away from the tab. * Defaults to `false`. */ popToTopOnBlur?: boolean; /** * Whether inactive screens should be suspended from re-rendering. Defaults to `false`. * Defaults to `true` when `enableFreeze()` is run at the top of the application. * Requires `react-native-screens` version >=3.16.0. * * Only supported on iOS and Android. */ freezeOnBlur?: boolean; /** * Style object for the component wrapping the screen content. */ sceneStyle?: StyleProp<ViewStyle>; /** * How the screen should animate when switching tabs. * * Supported values: * - 'none': don't animate the screen (default) * - 'fade': cross-fade the screens. * - 'shift': shift the screens slightly shift to left/right. */ animation?: TabAnimationName; /** * Function which specifies interpolated styles for bottom-tab scenes. */ sceneStyleInterpolator?: BottomTabSceneStyleInterpolator; /** * Object which specifies the animation type (timing or spring) and their options (such as duration for timing). */ transitionSpec?: TransitionSpec;};
type BottomTabNavigationProp
type BottomTabNavigationProp< ParamList extends ParamListBase, RouteName extends keyof ParamList = keyof ParamList, NavigatorID extends string | undefined = undefined> = NavigationProp< ParamList, RouteName, NavigatorID, TabNavigationState<ParamList>, BottomTabNavigationOptions, BottomTabNavigationEventMap> & TabActionHelpers<ParamList>;
type BottomTabNavigatorProps
type BottomTabNavigatorProps = DefaultNavigatorOptions< ParamListBase, string | undefined, TabNavigationState<ParamListBase>, BottomTabNavigationOptions, BottomTabNavigationEventMap, BottomTabNavigationProp<ParamListBase>> & TabRouterOptions & BottomTabNavigationConfig;
type BottomTabOptionsArgs
type BottomTabOptionsArgs< ParamList extends ParamListBase, RouteName extends keyof ParamList = keyof ParamList, NavigatorID extends string | undefined = undefined> = BottomTabScreenProps<ParamList, RouteName, NavigatorID> & { theme: Theme;};
type BottomTabScreenProps
type BottomTabScreenProps< ParamList extends ParamListBase, RouteName extends keyof ParamList = keyof ParamList, NavigatorID extends string | undefined = undefined> = { navigation: BottomTabNavigationProp<ParamList, RouteName, NavigatorID>; route: RouteProp<ParamList, RouteName>;};
Namespaces
namespace SceneStyleInterpolators
module 'lib/typescript/commonjs/src/TransitionConfigs/SceneStyleInterpolators.d.ts' {}
Simple cross fade animation
function forFade
forFade: ({ current,}: BottomTabSceneInterpolationProps) => BottomTabSceneInterpolatedStyle;
Simple cross fade animation
function forShift
forShift: ({ current,}: BottomTabSceneInterpolationProps) => BottomTabSceneInterpolatedStyle;
Animation where the screens slightly shift to left/right
namespace TransitionPresets
module 'lib/typescript/commonjs/src/TransitionConfigs/TransitionPresets.d.ts' {}
variable FadeTransition
const FadeTransition: BottomTabTransitionPreset;
variable ShiftTransition
const ShiftTransition: BottomTabTransitionPreset;
namespace TransitionSpecs
module 'lib/typescript/commonjs/src/TransitionConfigs/TransitionSpecs.d.ts' {}
Package Files (11)
- lib/typescript/commonjs/src/TransitionConfigs/SceneStyleInterpolators.d.ts
- lib/typescript/commonjs/src/TransitionConfigs/TransitionPresets.d.ts
- lib/typescript/commonjs/src/TransitionConfigs/TransitionSpecs.d.ts
- lib/typescript/commonjs/src/index.d.ts
- lib/typescript/commonjs/src/navigators/createBottomTabNavigator.d.ts
- lib/typescript/commonjs/src/types.d.ts
- lib/typescript/commonjs/src/utils/BottomTabBarHeightCallbackContext.d.ts
- lib/typescript/commonjs/src/utils/BottomTabBarHeightContext.d.ts
- lib/typescript/commonjs/src/utils/useBottomTabBarHeight.d.ts
- lib/typescript/commonjs/src/views/BottomTabBar.d.ts
- lib/typescript/commonjs/src/views/BottomTabView.d.ts
Dependencies (2)
Dev Dependencies (12)
Peer Dependencies (5)
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/bottom-tabs
.
- Markdown[![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/@react-navigation/bottom-tabs)
- HTML<a href="https://www.jsdocs.io/package/@react-navigation/bottom-tabs"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>
- Updated .
Package analyzed in 4154 ms. - Missing or incorrect documentation? Open an issue for this package.