1# Native Tabs Migration (SDK 55)
2 
3In SDK 55, `Label`, `Icon`, `Badge`, and `VectorIcon` are now accessed as static properties on `NativeTabs.Trigger` rather than separate imports.
4 
5## Import Changes
6 
7```tsx
8// SDK 53/54
9import {
10  NativeTabs,
11  Icon,
12  Label,
13  Badge,
14  VectorIcon,
15} from "expo-router/unstable-native-tabs";
16 
17// SDK 55+
18import { NativeTabs } from "expo-router/unstable-native-tabs";
19```
20 
21## Component Changes
22 
23| SDK 53/54        | SDK 55+                             |
24| ---------------- | ----------------------------------- |
25| `<Icon />`       | `<NativeTabs.Trigger.Icon />`       |
26| `<Label />`      | `<NativeTabs.Trigger.Label />`      |
27| `<Badge />`      | `<NativeTabs.Trigger.Badge />`      |
28| `<VectorIcon />` | `<NativeTabs.Trigger.VectorIcon />` |
29| (n/a)            | `<NativeTabs.BottomAccessory />`    |
30 
31## New in SDK 55
32 
33### BottomAccessory
34 
35New component for Apple Music-style mini players on iOS +26 that float above the tab bar:
36 
37```tsx
38<NativeTabs>
39  <NativeTabs.BottomAccessory>
40    {/* Content above tabs */}
41  </NativeTabs.BottomAccessory>
42  <NativeTabs.Trigger name="(index)">
43    <NativeTabs.Trigger.Label>Home</NativeTabs.Trigger.Label>
44  </NativeTabs.Trigger>
45</NativeTabs>
46```
47 
48On Android and web, this component will render as a no-op. Position a view absolutely above the tab bar instead.
49 
50### Icon `md` Prop
51 
52New `md` prop for Material icon glyphs on Android (alongside existing `drawable`):
53 
54```tsx
55<NativeTabs.Trigger.Icon sf="house" md="home" />
56```
57 
58## Full Migration Example
59 
60### Before (SDK 53/54)
61 
62```tsx
63import {
64  NativeTabs,
65  Icon,
66  Label,
67  Badge,
68} from "expo-router/unstable-native-tabs";
69 
70export default function TabLayout() {
71  return (
72    <NativeTabs minimizeBehavior="onScrollDown">
73      <NativeTabs.Trigger name="(index)">
74        <Label>Home</Label>
75        <Icon sf="house.fill" />
76        <Badge>3</Badge>
77      </NativeTabs.Trigger>
78      <NativeTabs.Trigger name="(settings)">
79        <Label>Settings</Label>
80        <Icon sf="gear" />
81      </NativeTabs.Trigger>
82      <NativeTabs.Trigger name="(search)" role="search">
83        <Label>Search</Label>
84      </NativeTabs.Trigger>
85    </NativeTabs>
86  );
87}
88```
89 
90### After (SDK 55+)
91 
92```tsx
93import { NativeTabs } from "expo-router/unstable-native-tabs";
94 
95export default function TabLayout() {
96  return (
97    <NativeTabs minimizeBehavior="onScrollDown">
98      <NativeTabs.Trigger name="(index)">
99        <NativeTabs.Trigger.Label>Home</NativeTabs.Trigger.Label>
100        <NativeTabs.Trigger.Icon sf="house.fill" md="home" />
101        <NativeTabs.Trigger.Badge>3</NativeTabs.Trigger.Badge>
102      </NativeTabs.Trigger>
103      <NativeTabs.Trigger name="(settings)">
104        <NativeTabs.Trigger.Label>Settings</NativeTabs.Trigger.Label>
105        <NativeTabs.Trigger.Icon sf="gear" md="settings" />
106      </NativeTabs.Trigger>
107      <NativeTabs.Trigger name="(search)" role="search">
108        <NativeTabs.Trigger.Label>Search</NativeTabs.Trigger.Label>
109      </NativeTabs.Trigger>
110    </NativeTabs>
111  );
112}
113```
114 
115## Migration Checklist
116 
1171. Remove `Icon`, `Label`, `Badge`, `VectorIcon` from imports
1182. Keep only `NativeTabs` import from `expo-router/unstable-native-tabs`
1193. Replace `<Icon />` with `<NativeTabs.Trigger.Icon />`
1204. Replace `<Label />` with `<NativeTabs.Trigger.Label />`
1215. Replace `<Badge />` with `<NativeTabs.Trigger.Badge />`
1226. Replace `<VectorIcon />` with `<NativeTabs.Trigger.VectorIcon />`
123 
124- Read docs for more info https://docs.expo.dev/versions/v55.0.0/sdk/router-native-tabs/
125