@adrok-group/react-navigation-bottom-tabs v6.0.0

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

Installation

yarn add @adrok-group/react-navigation-bottom-tabs

Usage

import { createBottomTabNavigator } from '@adrok-group/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 '../../src';

/* 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