Glassmorphic Pill Tab UI for React Native – Linear Tab Bar

Description:

Linear Tab Bar is a React Native component that creates a Glassmorphism-style, pill-shaped tab bar with physics-informed gesture animations.

It’s inspired by Linear’s mobile app and includes pill-to-menu morphing, damped elastic overdrag, and a touch-tracking radial glow.

Features

• Frosted-glass pill container displays tab icons on a translucent, blur-backed surface.
• Pill-to-menu morph squeezes the pill horizontally at 15% animation progress, then expands it vertically into a full menu panel.
• Liquid glass stretch deforms the pill shape elastically on overdrag, with damped deceleration up to a maximum pull distance.
• Touch-tracking radial glow follows the finger across the pill surface and executes a two-phase fade and scale ripple on release.
• Search mode collapses the pill width to zero and expands a full search bar with a sliding close button.
• Staggered menu animation reveals seven items at 40ms intervals on open and 10ms intervals on close.
• Keyboard-aware layout translates the entire tab bar upward in sync with the software keyboard during search input.
• Mutual exclusion logic between menu and search modes keeps both states from activating at the same time.

See It In Action

How to Use It

1. Install the required animation and gesture packages

npx expo install react-native-reanimated react-native-gesture-handler react-native-keyboard-controller expo-blur expo-haptics expo-linear-gradient react-native-svg @react-native-masked-view/masked-view lucide-react-native react-native-safe-area-context react-native-worklets

2. Copy the necessary component files into your project structure.

• TabBar.tsx — root component and gesture coordinator
• constants.ts — shared animation thresholds and layout values
• TabBarPill.tsx — pill shape, morph curve, and elastic stretch logic
• TabIcon.tsx — individual tab icon with glow state
• GlassMaterial.tsx — reusable frosted-glass surface with animated border radius support
• SearchBar.tsx — animated search input with keyboard offset handling
• MenuPanel.tsx — staggered menu panel with header, divider, and seven items

3. Import and render the component in your app.

Alternatives

• React Native Animated Tab Bar: A tab bar component with multiple animation presets and Reanimated support.
• React Navigation Bottom Tab Navigator: The standard bottom tab solution in the React Navigation ecosystem, with built-in screen management and deep-link support.