Tab and Drawer

🏠 Navigation: Tab and Drawer in React Native

The Story of Your App’s Home

Imagine your phone is like a house with many rooms. Each room has something special inside - maybe your toys in one room, your books in another, and your snacks in the kitchen!

But how do you move between rooms? You need doors and hallways!

In React Native, Navigation is like building those doors and hallways. Today, we’ll learn about two super cool ways to move around:

• Tab Navigator - Like buttons at the bottom of your screen (think of a TV remote!)
• Drawer Navigator - Like a secret sliding door from the side!

🎹 Tab Navigator: Your App’s Remote Control

What is a Tab Navigator?

Think about your TV remote. It has buttons at the bottom - one for cartoons, one for movies, one for games. You press a button, and BOOM! You see that channel.

Tab Navigator works exactly like this!

It puts little buttons (tabs) at the bottom of your screen. Tap one, and you jump to that screen instantly!

Setting It Up

First, you need to invite the Tab Navigator to your app:

// Install these packages first!
// npm install @react-navigation/bottom-tabs

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

const Tab = createBottomTabNavigator();

Building Your First Tab Navigator

function MyTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen
        name="Home"
        component={HomeScreen}
      />
      <Tab.Screen
        name="Settings"
        component={SettingsScreen}
      />
    </Tab.Navigator>
  );
}

What just happened?

• Tab.Navigator is the container (like the remote control body)
• Tab.Screen is each button on the remote
• name is what label appears
• component is which screen to show when tapped

graph TD
    A["Tab Navigator"] --> B["Home Tab"]
    A --> C["Settings Tab"]
    B --> D["Home Screen"]
    C --> E["Settings Screen"]

🎨 Tab Bar Customization: Making It YOUR Style

Why Customize?

Plain tabs are boring! Imagine if every TV remote looked the same - no colors, no fun icons. Let’s make your tabs POP!

Adding Icons

Icons are little pictures that help users know what each tab does:

import { Ionicons } from '@expo/vector-icons';

<Tab.Navigator
  screenOptions={({ route }) => ({
    tabBarIcon: ({ color, size }) => {
      let iconName;
      if (route.name === 'Home') {
        iconName = 'home';
      } else if (route.name === 'Settings') {
        iconName = 'settings';
      }
      return (
        <Ionicons
          name={iconName}
          size={size}
          color={color}
        />
      );
    },
  })}
>

Changing Colors

<Tab.Navigator
  screenOptions={{
    tabBarActiveTintColor: 'purple',
    tabBarInactiveTintColor: 'gray',
    tabBarStyle: {
      backgroundColor: 'white',
      borderTopWidth: 2,
      borderTopColor: 'purple',
    },
  }}
>

What do these mean?

• tabBarActiveTintColor - Color when tab is selected (pressed)
• tabBarInactiveTintColor - Color when tab is NOT selected
• tabBarStyle - Style the whole bar (background, borders)

Adding Badges

You know those little red circles with numbers? Like “3 new messages”?

<Tab.Screen
  name="Notifications"
  component={NotificationsScreen}
  options={{
    tabBarBadge: 3,
    tabBarBadgeStyle: {
      backgroundColor: 'red',
    },
  }}
/>

Hiding the Tab Bar

Sometimes you want the tab bar to disappear on certain screens:

<Tab.Screen
  name="Video"
  component={VideoScreen}
  options={{
    tabBarStyle: { display: 'none' },
  }}
/>

🚪 Drawer Navigator: The Secret Sliding Door

What is a Drawer Navigator?

Remember those cool secret passages in movies? You push a bookshelf and a hidden room appears!

Drawer Navigator is your app’s secret door!

Swipe from the left edge (or tap a menu button), and a panel slides out with all your options!

Setting It Up

// npm install @react-navigation/drawer
// npm install react-native-gesture-handler
// npm install react-native-reanimated

import { createDrawerNavigator }
  from '@react-navigation/drawer';

const Drawer = createDrawerNavigator();

Building Your First Drawer

function MyDrawer() {
  return (
    <Drawer.Navigator>
      <Drawer.Screen
        name="Home"
        component={HomeScreen}
      />
      <Drawer.Screen
        name="Profile"
        component={ProfileScreen}
      />
      <Drawer.Screen
        name="Settings"
        component={SettingsScreen}
      />
    </Drawer.Navigator>
  );
}

graph TD
    A["Drawer Navigator"] --> B["Slides from Left"]
    B --> C["Home Option"]
    B --> D["Profile Option"]
    B --> E["Settings Option"]
    C --> F["Home Screen"]
    D --> G["Profile Screen"]
    E --> H["Settings Screen"]

Customizing the Drawer

Change the drawer width:

<Drawer.Navigator
  screenOptions={{
    drawerStyle: {
      width: 250,
      backgroundColor: '#f0f0f0',
    },
  }}
>

Add icons to drawer items:

<Drawer.Screen
  name="Home"
  component={HomeScreen}
  options={{
    drawerIcon: ({ color, size }) => (
      <Ionicons
        name="home"
        size={size}
        color={color}
      />
    ),
  }}
/>

Open drawer from code:

import { useNavigation } from '@react-navigation/native';

function MyScreen() {
  const navigation = useNavigation();

  return (
    <Button
      title="Open Menu"
      onPress={() => navigation.openDrawer()}
    />
  );
}

🏗️ Nested Navigators: Building a Mansion!

What are Nested Navigators?

Imagine a HUGE mansion. The main hallway has doors to different wings. Each wing has MORE doors to individual rooms!

Nested Navigators = Navigators inside other navigators!

This is how real apps work:

• Main app might have a Drawer
• Inside the Drawer, you might have Tabs
• Inside a Tab, you might have a Stack of screens!

The Power Combo: Drawer + Tabs

// First, create the Tab Navigator
function HomeTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen
        name="Feed"
        component={FeedScreen}
      />
      <Tab.Screen
        name="Messages"
        component={MessagesScreen}
      />
    </Tab.Navigator>
  );
}

// Then, put it inside a Drawer
function App() {
  return (
    <Drawer.Navigator>
      <Drawer.Screen
        name="Home"
        component={HomeTabs}
      />
      <Drawer.Screen
        name="Settings"
        component={SettingsScreen}
      />
    </Drawer.Navigator>
  );
}

graph TD
    A["Drawer Navigator"] --> B["Home - Contains Tabs!"]
    A --> C["Settings Screen"]
    B --> D["Tab Navigator"]
    D --> E["Feed Tab"]
    D --> F["Messages Tab"]

Why Nest Navigators?

1. Organization - Keep related screens together
2. Different navigation patterns - Swipe for drawer, tap for tabs
3. Real apps need it - Instagram, Twitter, Facebook all do this!

Tips for Nesting

Hide the header in nested navigators:

<Drawer.Screen
  name="Home"
  component={HomeTabs}
  options={{
    headerShown: false,
  }}
/>

Navigate between nested screens:

// From Feed tab to Settings in drawer
navigation.navigate('Settings');

// From anywhere to a specific tab
navigation.navigate('Home', {
  screen: 'Messages',
});

🎯 Quick Summary

🚀 You Did It!

You just learned:

• ✅ Tab Navigator - Buttons at the bottom, like a remote!
• ✅ Tab Customization - Icons, colors, badges, and more!
• ✅ Drawer Navigator - The sliding secret door!
• ✅ Nested Navigators - Building a mansion of screens!

Now your users can move through your app like magic! 🎉

Remember: Great navigation = Happy users. Make it easy for them to find what they need, and they’ll love your app!