@umituz/react-native-tabs-bottom-navigator

Simple re-exports of React Navigation navigators for consistent imports across projects.

Installation

npm install @umituz/react-native-tabs-bottom-navigator

Peer Dependencies

npm install @react-navigation/native @react-navigation/bottom-tabs @react-navigation/stack

Usage

Tab Navigator

import { createTabNavigator } from '@umituz/react-native-tabs-bottom-navigator';
import { useAppDesignTokens } from '@umituz/react-native-design-system-theme';
import { AtomicIcon } from '@umituz/react-native-design-system';
import { useLocalization } from '@umituz/react-native-localization';

const MainTabs = createTabNavigator<MainTabParamList>();

export const MainNavigator: React.FC = () => {
  const { t } = useLocalization();
  const tokens = useAppDesignTokens();

  return (
    <MainTabs.Navigator
      screenOptions={({ route }) => ({
        tabBarIcon: ({ focused }) => (
          <AtomicIcon
            name={getTabIcon(route.name)}
            color={focused ? "primary" : "secondary"}
          />
        ),
        tabBarActiveTintColor: tokens.colors.primary,
        tabBarInactiveTintColor: tokens.colors.textSecondary,
      })}
    >
      <MainTabs.Screen
        name="Home"
        component={HomeScreen}
        options={{ title: t("navigation.home") }}
      />
    </MainTabs.Navigator>
  );
};

Stack Navigator

import { createStackNavigator } from '@umituz/react-native-tabs-bottom-navigator';
import { useAppDesignTokens } from '@umituz/react-native-design-system-theme';

const DecksStack = createStackNavigator<DecksStackParamList>();

export const DecksStackNavigator: React.FC = () => {
  const tokens = useAppDesignTokens();

  return (
    <DecksStack.Navigator
      screenOptions={{
        headerStyle: {
          backgroundColor: tokens.colors.surface,
        },
      }}
    >
      <DecksStack.Screen
        name="DecksList"
        component={DecksScreen}
        options={{ title: "Decks" }}
      />
    </DecksStack.Navigator>
  );
};

Why This Package?

• Consistent imports across all projects
• Simple and direct - no abstraction layers
• Type-safe with full TypeScript support
• Follows flashcard_maker pattern - proven in production

License

MIT

Author

Ümit UZ [email protected]