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

Bottom tab navigator following iOS design guidelines for React Navigation

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

React Navigation Bottom Tabs

Name: tessl/npm-react-navigation--bottom-tabs
Author: tessl

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;
}