or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

animations-transitions.mdindex.mdnavigation-routing.mdnavigator-creation.mdscreen-configuration.mdtab-bar-customization.mdutilities-hooks.md
tile.json

tessl/npm-react-navigation--bottom-tabs

Bottom tab navigator following iOS design guidelines for React Navigation

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@react-navigation/bottom-tabs@7.4.x

To install, run

npx @tessl/cli install tessl/npm-react-navigation--bottom-tabs@7.4.0

index.mddocs/

React Navigation Bottom Tabs

React Navigation Bottom Tabs provides a bottom tab navigator component that follows iOS design guidelines. It enables developers to create tab-based navigation interfaces with smooth transitions, animations, and extensive customization options for React Native applications.

Package Information

  • Package Name: @react-navigation/bottom-tabs
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @react-navigation/bottom-tabs

Required Dependencies:

npm install @react-navigation/native react-native-safe-area-context react-native-screens

Peer Dependencies:

  • @react-navigation/native: workspace:^
  • react: >= 18.2.0
  • react-native: *
  • react-native-safe-area-context: >= 4.0.0
  • react-native-screens: >= 4.0.0

Core Imports

import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";

For additional utilities and customization:

import {
  createBottomTabNavigator,
  BottomTabBar,
  BottomTabView,
  useBottomTabBarHeight,
  BottomTabBarHeightContext,
  BottomTabBarHeightCallbackContext,
  SceneStyleInterpolators,
  TransitionPresets,
  TransitionSpecs,
  type BottomTabNavigationProp,
  type BottomTabScreenProps,
  type BottomTabNavigationOptions,
  type BottomTabBarButtonProps,
  type BottomTabBarProps,
  type BottomTabHeaderProps,
  type BottomTabNavigationEventMap,
  type BottomTabNavigatorProps,
  type BottomTabOptionsArgs,
} from "@react-navigation/bottom-tabs";

Basic Usage

import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { NavigationContainer } from "@react-navigation/native";

// Define your screen param types
type RootTabParamList = {
  Home: undefined;
  Settings: undefined;
  Profile: { userId: string };
};

const Tab = createBottomTabNavigator<RootTabParamList>();

function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen 
          name="Settings" 
          component={SettingsScreen}
          options={{
            tabBarIcon: ({ color, size }) => (
              <Icon name="settings" color={color} size={size} />
            ),
          }}
        />
        <Tab.Screen 
          name="Profile" 
          component={ProfileScreen}
          options={{
            tabBarBadge: 3,
            tabBarLabel: "My Profile",
          }}
        />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

Architecture

React Navigation Bottom Tabs is built around several key components:

  • Navigator Factory: createBottomTabNavigator creates typed navigators with Screen and Navigator components
  • View System: BottomTabView manages screen rendering and BottomTabBar handles tab display
  • Navigation Integration: Full integration with React Navigation's core navigation system and TypeScript support
  • Animation System: Configurable transitions and scene interpolators for smooth tab switching
  • Customization Framework: Extensive theming, styling, and behavior customization options

Capabilities

Navigator Creation

Core navigation functionality for creating bottom tab navigators with full TypeScript support and extensive configuration options.

function createBottomTabNavigator<
  const ParamList extends ParamListBase,
  const NavigatorID extends string | undefined = undefined,
  const TypeBag extends NavigatorTypeBagBase = {
    ParamList: ParamList;
    NavigatorID: NavigatorID;
    State: TabNavigationState<ParamList>;
    ScreenOptions: BottomTabNavigationOptions;
    EventMap: BottomTabNavigationEventMap;
    NavigationList: {
      [RouteName in keyof ParamList]: BottomTabNavigationProp<
        ParamList,
        RouteName,
        NavigatorID
      >;
    };
    Navigator: typeof BottomTabNavigator;
  },
  const Config extends StaticConfig<TypeBag> = StaticConfig<TypeBag>
>(config?: Config): TypedNavigator<TypeBag, Config>;

Navigator Creation

Tab Bar Customization

Comprehensive tab bar customization including appearance, behavior, animations, and custom components.

interface BottomTabNavigationOptions {
  tabBarLabel?: string | ((props: {
    focused: boolean;
    color: string;
    position: LabelPosition;
    children: string;
  }) => React.ReactNode);
  tabBarIcon?: (props: {
    focused: boolean;
    color: string;
    size: number;
  }) => React.ReactNode;
  tabBarBadge?: number | string;
  tabBarButton?: (props: BottomTabBarButtonProps) => React.ReactNode;
  tabBarStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
  tabBarActiveTintColor?: string;
  tabBarInactiveTintColor?: string;
  tabBarHideOnKeyboard?: boolean;
  tabBarVariant?: Variant;
  tabBarPosition?: 'bottom' | 'left' | 'right' | 'top';
}

Tab Bar Customization

Screen Configuration

Screen-level configuration options including animations, lazy loading, headers, and behavior control.

interface BottomTabNavigationOptions {
  lazy?: boolean;
  freezeOnBlur?: boolean;
  popToTopOnBlur?: boolean;
  animation?: TabAnimationName;
  sceneStyleInterpolator?: BottomTabSceneStyleInterpolator;
  transitionSpec?: TransitionSpec;
  header?: (props: BottomTabHeaderProps) => React.ReactNode;
  headerShown?: boolean;
  sceneStyle?: StyleProp<ViewStyle>;
}

Screen Configuration

Navigation and Routing

Navigation capabilities including programmatic navigation, event handling, and route management.

interface BottomTabNavigationProp<
  ParamList extends ParamListBase,
  RouteName extends keyof ParamList = keyof ParamList,
  NavigatorID extends string | undefined = undefined
> extends NavigationProp<
  ParamList,
  RouteName,
  NavigatorID,
  TabNavigationState<ParamList>,
  BottomTabNavigationOptions,
  BottomTabNavigationEventMap
>, TabActionHelpers<ParamList> {}

interface BottomTabNavigationEventMap {
  tabPress: { data: undefined; canPreventDefault: true };
  tabLongPress: { data: undefined };
  transitionStart: { data: undefined };
  transitionEnd: { data: undefined };
}

Navigation and Routing

Utilities and Hooks

Utility functions and React hooks for accessing tab bar dimensions, managing contexts, and integrating with the tab navigation system.

function useBottomTabBarHeight(): number;

const BottomTabBarHeightContext: React.Context<number | undefined>;
const BottomTabBarHeightCallbackContext: React.Context<((height: number) => void) | undefined>;

Utilities and Hooks

Animation and Transitions

Built-in animation presets and custom transition configurations for smooth tab switching experiences.

const SceneStyleInterpolators: {
  forFade: BottomTabSceneStyleInterpolator;
  forShift: BottomTabSceneStyleInterpolator;
};

const TransitionPresets: {
  FadeTransition: BottomTabTransitionPreset;
  ShiftTransition: BottomTabTransitionPreset;
};

const TransitionSpecs: {
  FadeSpec: TransitionSpec;
  ShiftSpec: TransitionSpec;
};

Animation and Transitions

Types

Core Types

type ParamListBase = Record<string, object | undefined>;

type Layout = { width: number; height: number };

type Variant = 'uikit' | 'material';

type LabelPosition = 'beside-icon' | 'below-icon';

type TabAnimationName = 'none' | 'fade' | 'shift';

Screen Props

interface BottomTabScreenProps<
  ParamList extends ParamListBase,
  RouteName extends keyof ParamList = keyof ParamList,
  NavigatorID extends string | undefined = undefined
> {
  navigation: BottomTabNavigationProp<ParamList, RouteName, NavigatorID>;
  route: RouteProp<ParamList, RouteName>;
}

Navigator Props

interface BottomTabNavigatorProps extends DefaultNavigatorOptions<
  ParamListBase,
  string | undefined,
  TabNavigationState<ParamListBase>,
  BottomTabNavigationOptions,
  BottomTabNavigationEventMap,
  BottomTabNavigationProp<ParamListBase>
>, TabRouterOptions, BottomTabNavigationConfig {}

Base Types

type ParamListBase = Record<string, object | undefined>;

interface NavigatorTypeBagBase {
  ParamList: {};
  NavigatorID: string | undefined;
  State: NavigationState;
  ScreenOptions: {};
  EventMap: {};
  NavigationList: NavigationListBase<ParamListBase>;
  Navigator: React.ComponentType<any>;
}

interface TabNavigationState<ParamList extends ParamListBase> extends Omit<NavigationState<ParamList>, 'history'> {
  type: 'tab';
  history: { type: 'route'; key: string; params?: object | undefined }[];
  preloadedRouteKeys: string[];
}

interface NavigationState<ParamList extends ParamListBase = ParamListBase> {
  key: string;
  index: number;
  routeNames: Extract<keyof ParamList, string>[];
  history?: unknown[];
  routes: NavigationRoute<ParamList, keyof ParamList>[];
  type: string;
  stale: false;
}

interface StaticConfig<Bag extends NavigatorTypeBagBase> {
  screens?: StaticConfigScreens<
    Bag['ParamList'],
    Bag['State'],
    Bag['ScreenOptions'],
    Bag['EventMap'],
    Bag['NavigationList']
  >;
  groups?: Record<string, StaticConfigGroup<
    Bag['ParamList'],
    Bag['State'],
    Bag['ScreenOptions'],
    Bag['EventMap'],
    Bag['NavigationList']
  >>;
  config?: Config;
}

interface TypedNavigator<
  Bag extends NavigatorTypeBagBase,
  Config = unknown
> {
  Navigator: React.ComponentType<BottomTabNavigatorProps>;
  Screen: React.ComponentType<BottomTabScreenConfig<Bag>>;
  Group: React.ComponentType<GroupConfig>;
}

interface BottomTabScreenConfig<TypeBag> {
  name: keyof TypeBag['ParamList'];
  component?: React.ComponentType<any>;
  getComponent?: () => React.ComponentType<any>;
  options?: BottomTabNavigationOptions | ((props: BottomTabOptionsArgs) => BottomTabNavigationOptions);
  initialParams?: TypeBag['ParamList'][keyof TypeBag['ParamList']];
  getId?: ({ params }: { params: any }) => string;
  listeners?: BottomTabNavigationListeners;
}