An iOS 26 glass top bar that fades in as content scrolls under it.
Installation
One command copies the source into your app — you own the code and can change anything.
Usage
useKit(). Wrap your app in <KitProvider accent="#6366f1" radius={14}> to re-skin every component at once.Props
| Prop | Type | Default |
|---|---|---|
| title Centred bar title (and the large title when largeTitle is on). | string | — |
| largeTitle Big title under the bar that scrolls away while the small centred title fades in. Needs scrollY. | boolean | false |
| scrollY Your scroll view's offset (useGlassNavScroll). The glass fades in over ~40pt as content passes under the bar; without it the bar is solid glass. | Animated.Value | — |
| onBack Shows a round glass back button with a chevron. | () => void | — |
| backLabel Text beside the chevron (the button becomes a pill) and its accessibility label; "Back" otherwise. | string | — |
| actions Round glass buttons on the right, grouped so they merge on iOS 26. | { key, icon, onPress, accessibilityLabel }[] | [] |
| scheme Force light or dark glass and ink, e.g. over a photo. | 'light' | 'dark' | kit theme |
| topInset Space above the bar for the status bar — pass your safe-area top inset. | number | 0 |
| style Style for the bar container, which pins to the top of its parent. | StyleProp<ViewStyle> | — |
| useGlassNavScroll(listener?) Native-driver Animated.event for an Animated.ScrollView / FlatList (scrollEventThrottle 16). | hook → { scrollY, onScroll } | — |
| GLASS_NAV_HEIGHT / glassNavInset({ largeTitle, topInset }) Bar row height, and the full height the bar covers — use it as your content's paddingTop. | number / function | 54 |
Behaviour & accessibility
- Motion
- With scrollY the bar starts transparent and its glass fades in as content passes under it. A large title scrolls away while the small centred title fades in, all on the native driver.
- Touch
- Back and action buttons spring down under the finger on emulated glass; on iOS 26 the interactive glass bounces natively.
- Reduced motion
- The large title no longer scales on pull-down or collapse, and the button press springs are off.
- Screen readers
- The title is a header, with the small title hidden while the large one shows. The back button reads backLabel or "Back", and actions use their accessibilityLabel.
- Platforms
- Real Liquid Glass on iOS 26, where the action buttons merge together. Blur on older iOS, Android and web.
Source
Did you like the content?