Discord Tabs Component

Discord's smooth top tab navigation component.

Features

Smooth Tab Indicator: Blue underline indicator that moves fluidly with swipes (no delay!)
Real-time Swipe Tracking: The indicator position changes smoothly during swipe gestures
Six Tabs: Recent, Channels, Media, Pins, Links, Files

File Structure

app/discord-tabs/
├── _layout.tsx      # Main layout with Discord header and custom tab bar
├── recent.tsx       # Recent activity tab
├── channels.tsx     # Text channels list (main content)
├── media.tsx        # Media tab
├── pins.tsx         # Pinned messages tab
├── links.tsx        # Shared links tab
├── files.tsx        # Shared files tab

Dependencies

expo-router
react-native-reanimated
react-native-safe-area-context
react-native-gesture-handler
react-native-tab-view
react-native-vector-icons

bash

npm install react-native-reanimated expo-router react-native-safe-area-context react-native-gesture-handler react-native-tab-view react-native-vector-icons

Usage

Navigate to /discord-tabs to see the component in action. The interface looks exactly like Discord's mobile app with buttery smooth tab transitions.

Discord Tabs