@swanstack/react-navigation-bottom-tabs v6.0.1

Custom React Navigation Bottom Tabs

This extension to @react-navigation/bottom-tabs introduces a seamless solution for managing a large number of tabs. When the tabs exceed a specified limit, the last tab automatically transforms into a 'More' tab, revealing a Bottom Sheet with the remaining tabs.

Inspired by:

Screenshots

Setup

yarn add @swanstack/react-navigation-bottom-tabs

Dependencies

This library needs these dependencies to be installed in your project before you can use it:

yarn add react-native-reanimated react-native-gesture-handler

Using Expo?

npx expo install react-native-reanimated react-native-gesture-handler

React Native Gesture Handler needs extra steps to finalize its installation, please follow their installation instructions. Please make sure to wrap your App with GestureHandlerRootView.

React Native Reanimated v2 needs extra steps to finalize its installation, please follow their installation instructions.

Usage

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

const Tab = createBottomTabNavigator();

const MyTabs = () => {
  return (
    <Tab.Navigator
      initialRouteName="List"
      screenOptions={{
        tabBarMaxVisibleTabs: 5, // add this line
      }}
    >
      <Tab.Screen name="List" component={ListScreen} />
      <Tab.Screen name="Recipe" component={RecipeScreen} />
      <Tab.Screen name="Pantry" component={PantryScreen} />
      <Tab.Screen name="MealPlan" component={MealPlanScreen} />
      <Tab.Screen name="Profile" component={ProfileScreen} />
      <Tab.Screen name="Settings" component={SettingsScreen} />
    </Tab.Navigator>
  );
};

Properties

Not supported original properties from @react-navigation/bottom-tabs

Full Example

import * as React from 'react';
import { StyleSheet, View } from 'react-native';
import {
  NavigationContainer,
  type CompositeScreenProps,
  type NavigatorScreenParams,
} from '@react-navigation/native';
import {
  createNativeStackNavigator,
  type NativeStackScreenProps,
} from '@react-navigation/native-stack';
import {
  createBottomTabNavigator,
  type BottomTabScreenProps,
} from '@swanstack/react-navigation-bottom-tabs';

/* Your Param List */

type MyTabsParamList = {
  List: undefined;
  Recipe: undefined;
  Pantry: undefined;
  MealPlan: undefined;
  Profile: undefined;
  Settings: undefined;
};

type RootStackParamList = {
  MyTabs: NavigatorScreenParams<MyTabsParamList>;
};

export type RootStackScreenProps<R extends keyof RootStackParamList> =
  NativeStackScreenProps<RootStackParamList, R>;

/* MyTabs is a nested navigator within the RootStack navigator */

export type MyTabsScreenProps<R extends keyof MyTabsParamList> =
  CompositeScreenProps<
    BottomTabScreenProps<MyTabsParamList, R>,
    NativeStackScreenProps<RootStackParamList>
  >;

/* Your Screens */

const ListScreen = (props: MyTabsScreenProps<'List'>) => {
  return <View />;
};

const RecipeScreen = (props: MyTabsScreenProps<'Recipe'>) => {
  return <View />;
};

const PantryScreen = (props: MyTabsScreenProps<'Pantry'>) => {
  return <View />;
};

const MealPlanScreen = (props: MyTabsScreenProps<'MealPlan'>) => {
  return <View />;
};

const ProfileScreen = (props: MyTabsScreenProps<'Profile'>) => {
  return <View />;
};

const SettingsScreen = (props: MyTabsScreenProps<'Settings'>) => {
  return <View />;
};

const Tab = createBottomTabNavigator<MyTabsParamList>();

const MyTabs = () => {
  return (
    <Tab.Navigator
      initialRouteName="List"
      screenOptions={{
        tabBarMaxVisibleTabs: 5,
      }}
    >
      <Tab.Screen name="List" component={ListScreen} />
      <Tab.Screen name="Recipe" component={RecipeScreen} />
      <Tab.Screen name="Pantry" component={PantryScreen} />
      <Tab.Screen name="MealPlan" component={MealPlanScreen} />
      <Tab.Screen name="Profile" component={ProfileScreen} />
      <Tab.Screen name="Settings" component={SettingsScreen} />
    </Tab.Navigator>
  );
};

const RootStack = createNativeStackNavigator<RootStackParamList>();

export default function App() {
  return (
    <View style={styles.container}>
      <NavigationContainer>
        <RootStack.Navigator>
          <RootStack.Screen
            name="MyTabs"
            component={MyTabs}
            options={{ headerShown: false }}
          />
        </RootStack.Navigator>
      </NavigationContainer>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Made with create-react-native-library