? Top Tab Navigation

✨ Quick Overview

Top Tab Navigation in React Native allows users to switch between screens using tabs displayed at the top. It is commonly used for categorizing related content in a clean and intuitive way.

? Key Concepts

Uses material-style tabs
Supports swipe gestures
Works well for related views
Highly customizable tab bar

? Syntax / Theory

Top Tab Navigation is implemented using a material top tab navigator. Each tab represents a separate screen component.

? View Code Example

// Import top tab navigator from react-navigation
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';

? Code Example

? View Code Example

// Create a top tab navigator with two screens
const Tab = createMaterialTopTabNavigator();

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

? Live Output / Explanation

This setup displays two tabs at the top. Users can tap or swipe to switch between Home and Profile screens.

? Interactive Example

Click the tabs below to see how the Top Tab Navigator transitions between screens. Note the sliding indicator animation.

My Social App

Home

Profile

Home Feed

Welcome to your feed!

Explore

Find new content here.

User Profile

Settings & Personal Info.

? Use Cases

Category-based content screens
Profile sections (Posts, Likes, About)
Settings grouped by type

✅ Tips & Best Practices

Keep tab labels short
Limit the number of tabs
Use icons only when necessary

? Try It Yourself

Add a third tab
Change tab indicator color
Disable swipe gestures