Chapter 10: Expo Router - Bottom Tab Navigation

---

1. Introduction to Expo Router Bottom Tab Navigator

Bottom Tab Navigation is a common navigation pattern in mobile apps, where users can switch between different screens or sections using a tab bar at the bottom of the screen. The Expo Router Bottom Tab Navigator allows you to implement this pattern easily within your Expo project.

Key Points:

• User-Friendly Navigation: Provides quick access to the main sections of your app.
• Persistent Across Screens: The tab bar remains visible across different screens, allowing easy access.
• Customizable: You can customize the look and feel of the tab bar to match your app's design.

Example Scenario: A typical use case is a social media app where the bottom tab bar allows navigation between Home, Search, Notifications, and Profile sections.

2. Setting Up Expo Router Bottom Tab Navigator

To set up the Bottom Tab Navigator in your Expo project, follow these steps:

Step 1: Create a File Structure for Tab Navigation

• Similar to Stack navigation, use file-based routing with Expo. Each screen associated with a tab is represented by a .js or .tsx file within the app/ directory.

Example File Structure:

app/
├── _layout.js
├── home.js
├── search.js
├── notifications.js
├── profile.js

Step 2: Define the Bottom Tab Navigator

• Use the Tabs component from expo-router to set up the bottom tab navigation in your _layout.js file.

// app/_layout.js
import { Tabs } from "expo-router";

export default function Layout() {
  return (
    <Tabs>
      <Tabs.Screen name="home" options={{ title: "Home" }} />
      <Tabs.Screen name="search" options={{ title: "Search" }} />
      <Tabs.Screen name="notifications" options={{ title: "Notifications" }} />
      <Tabs.Screen name="profile" options={{ title: "Profile" }} />
    </Tabs>
  );
}

Step 3: Create Screens

• Define the Home, Search, Notifications, and Profile screens in their respective files.

// app/home.js
import { View, Text, StyleSheet } from "react-native";

export default function HomeScreen() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Home Screen</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  title: {
    fontSize: 24,
  },
});

// app/search.js
import { View, Text, StyleSheet } from "react-native";

export default function SearchScreen() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Search Screen</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  title: {
    fontSize: 24,
  },
});

// app/notifications.js
import { View, Text, StyleSheet } from "react-native";

export default function NotificationsScreen() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Notifications Screen</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  title: {
    fontSize: 24,
  },
});

// app/profile.js
import { View, Text, StyleSheet } from "react-native";

export default function ProfileScreen() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Profile Screen</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  title: {
    fontSize: 24,
  },
});

3. Customizing Bottom Tab Navigation

The Tabs component in Expo Router provides various options to customize the look and behavior of the bottom tab navigator. You can adjust things like icons, labels, colors, and more.

Common Customization Options:

• tabBarIcon: Customize the icon for each tab.
• tabBarLabel: Set or hide the label text for each tab.
• tabBarActiveTintColor: Change the color of the active tab.
• tabBarStyle: Apply custom styles to the tab bar.

Example: Customizing Tab Icons and Labels

// app/_layout.js
import { Tabs } from "expo-router";
import { Ionicons } from "@expo/vector-icons";

export default function Layout() {
  return (
    <Tabs
      screenOptions={({ route }) => ({
        tabBarIcon: ({ color, size }) => {
          let iconName;

          if (route.name === "home") {
            iconName = "home";
          } else if (route.name === "search") {
            iconName = "search";
          } else if (route.name === "notifications") {
            iconName = "notifications";
          } else if (route.name === "profile") {
            iconName = "person";
          }

          return <Ionicons name={iconName} size={size} color={color} />;
        },
        tabBarActiveTintColor: "tomato",
        tabBarInactiveTintColor: "gray",
        tabBarLabel: route.name.charAt(0).toUpperCase() + route.name.slice(1),
      })}
    >
      <Tabs.Screen name="home" options={{ title: "Home" }} />
      <Tabs.Screen name="search" options={{ title: "Search" }} />
      <Tabs.Screen name="notifications" options={{ title: "Notifications" }} />
      <Tabs.Screen name="profile" options={{ title: "Profile" }} />
    </Tabs>
  );
}

Example: Styling the Tab Bar

// app/_layout.js
<Tabs
  screenOptions={{
    tabBarStyle: {
      backgroundColor: "black",
      borderTopWidth: 0,
      elevation: 0,
    },
    tabBarActiveTintColor: "white",
    tabBarInactiveTintColor: "gray",
  }}
>
  <Tabs.Screen name="home" options={{ title: "Home" }} />
  <Tabs.Screen name="search" options={{ title: "Search" }} />
  <Tabs.Screen name="notifications" options={{ title: "Notifications" }} />
  <Tabs.Screen name="profile" options={{ title: "Profile" }} />
</Tabs>

Example: Hiding Tab Labels

// app/_layout.js
<Tabs
  screenOptions={{
    tabBarShowLabel: false,
    tabBarStyle: { paddingBottom: 10 },
  }}
>
  <Tabs.Screen name="home" options={{ title: "Home" }} />
  <Tabs.Screen name="search" options={{ title: "Search" }} />
  <Tabs.Screen name="notifications" options={{ title: "Notifications" }} />
  <Tabs.Screen name="profile" options={{ title: "Profile" }} />
</Tabs>

---

This chapter guides you through setting up and customizing the Bottom Tab Navigator using Expo Router. By the end of this chapter, you'll have a fully functional and customizable bottom tab navigation in your Expo application, which is a key component in creating user-friendly mobile apps.