> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/expo/expo/llms.txt
> Use this file to discover all available pages before exploring further.
# Native Tabs
> Use native iOS UITabBar and Android Material BottomNavigation with Expo Router
# Native Tabs
Native tabs provide platform-native bottom tab navigation using iOS UITabBar and Android Material BottomNavigation components via `react-native-screens`.
Native tabs are currently in preview. The API may change. Use `expo-router/unstable-native-tabs`.
## Installation
Ensure you have the required dependencies:
```bash theme={null}
npx expo install react-native-screens
```
## Basic Native Tabs
Import from the unstable package:
```tsx app/(tabs)/_layout.tsx theme={null}
import { NativeTabs } from 'expo-router/unstable-native-tabs';
export default function TabLayout() {
return (
);
}
```
From the source (`NativeTabs.tsx:9-36`):
```typescript theme={null}
/**
* The component used to create native tabs layout.
*
* @example
* import { NativeTabs } from 'expo-router/unstable-native-tabs';
*
* export default function Layout() {
* return (
*
*
*
*
* );
* }
*/
export const NativeTabs = Object.assign(
(props: NativeTabsProps) => {
return ;
},
{ Trigger: NativeTabTrigger, BottomAccessory }
);
```
From `CLAUDE.md:241-253`:
```
### Native Tabs
Native tabs provide native bottom tab navigation using iOS UITabBar
and Android Material BottomNavigation via `react-native-screens`.
- `NativeTabs` - Layout component using `useNavigationBuilder`
- `NativeTabs.Trigger` - Tab configuration (icon, label, badge)
- `NativeTabs.BottomAccessory` - iOS 26+ bottom accessory
- Icons: `sf` (SF Symbols), `drawable` (Android), `md` (Material), `src` (images)
- iOS-specific: blur effects, transparency, sidebar adaptable
- Android-specific: Material Design 3, dynamic colors, ripple effects
```
## Configure Tabs
### With Labels and Icons
```tsx app/(tabs)/_layout.tsx theme={null}
import { NativeTabs } from 'expo-router/unstable-native-tabs';
export default function TabLayout() {
return (
Home
Explore
Profile
);
}
```
## Icon Types
### SF Symbols (iOS)
```tsx theme={null}
```
### Material Icons (Android)
```tsx theme={null}
```
### Android Drawables
```tsx theme={null}
```
### Image Source
```tsx theme={null}
```
## Badges
Add notification badges:
```tsx theme={null}
Notifications
5
```
With dynamic count:
```tsx theme={null}
export default function TabLayout() {
const [unreadCount, setUnreadCount] = useState(0);
return (
Messages
{unreadCount > 0 && (
{unreadCount}
)}
);
}
```
## iOS-Specific Features
### Blur Effects
```tsx theme={null}
```
### Scroll Edge Appearance
```tsx theme={null}
```
### Sidebar Adaptable (iPadOS 18+)
```tsx theme={null}
```
## Android-Specific Features
### Material Design 3
```tsx theme={null}
```
### Dynamic Colors
```tsx theme={null}
```
### Indicator Style
```tsx theme={null}
```
## Bottom Accessory (iOS 26+)
Add accessory content below tabs:
```tsx theme={null}
import { NativeTabs } from 'expo-router/unstable-native-tabs';
export default function TabLayout() {
const placement = NativeTabs.BottomAccessory.usePlacement();
return (
Accessory Content
Placement: {placement}
);
}
```
## Hide Tabs
Hide tabs on specific screens:
```tsx app/details.tsx theme={null}
import { NativeTabs } from 'expo-router/unstable-native-tabs';
export default function Details() {
return (
<>
Details Screen
);
}
```
## Nested Navigation
Combine with Stack:
```
app/
(tabs)/
_layout.tsx
home/
_layout.tsx # Stack
index.tsx
details.tsx
```
```tsx app/(tabs)/home/_layout.tsx theme={null}
import { Stack } from 'expo-router';
export default function HomeStack() {
return ;
}
```
## Platform-Specific Tabs
Show different tabs per platform:
```tsx theme={null}
import { Platform } from 'react-native';
import { NativeTabs } from 'expo-router/unstable-native-tabs';
export default function TabLayout() {
return (
{Platform.OS === 'ios' && (
iOS Only
)}
);
}
```
## Tab Configuration
### Initial Tab
```tsx theme={null}
export const unstable_settings = {
initialRouteName: 'home',
};
export default function TabLayout() {
return (
);
}
```
### Tab Order
Tabs appear in the order they're defined:
```tsx theme={null}
{/* Left/Top */}
{/* Right/Bottom */}
```
## Common Patterns
### Conditional Tab Badge
```tsx theme={null}
export default function TabLayout() {
const { hasUpdates } = useNotifications();
return (
Updates
{hasUpdates && (
)}
);
}
```
### Dynamic Icon
```tsx theme={null}
export default function TabLayout() {
const { isOnline } = useConnection();
return (
Status
);
}
```
### Theme-Based Appearance
```tsx theme={null}
export default function TabLayout() {
const { theme } = useTheme();
return (
);
}
```
## Migration from Tabs
### Before (Regular Tabs)
```tsx theme={null}
import { Tabs } from 'expo-router';
export default function TabLayout() {
return (
,
}}
/>
);
}
```
### After (Native Tabs)
```tsx theme={null}
import { NativeTabs } from 'expo-router/unstable-native-tabs';
export default function TabLayout() {
return (
);
}
```
## Best Practices
### Use Native Icons
```tsx theme={null}
// Good: Platform-native icons
// Avoid: Custom images when native icons exist
```
### Provide Platform-Specific Icons
```tsx theme={null}
// Good: Optimized for each platform
// Avoid: Single icon for all platforms
```
### Keep Tab Count Reasonable
```tsx theme={null}
// Good: 3-5 tabs
// Avoid: Too many tabs
{/* 6+ tabs */}
```
## Limitations
* Currently in preview - API may change
* Requires `react-native-screens` 4.0+
* Some features require iOS 26+ or Android 12+
* Bottom accessory only works on iOS 26+
* Sidebar adaptable only on iPadOS 18+
## Next Steps
Compare with regular tabs
Combine with stacks
Understand layouts
Navigate between tabs