Loading video...

Video Failed to Load

Go Home

Native iOS split view is coming to React Navigation ๐Ÿ”œ Powered by React Native Screens ๐Ÿซถ Let us know your use cases so we can test and ensure that the API is suitable for a wide range of usage ๐Ÿ‘‡

12,374 views โ€ข 5 months ago โ€ขvia X (Twitter)

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

Started using React Native two days ago and immediately fell down a tab-bar rabbit hole. Iโ€™d seen Instagram and Revolut collapse their tab bars on scroll while keeping every icon visible. I wanted that without giving up real iOS Liquid Glass. Turns out iOS 26โ€™s public API canโ€™t express that state. UITabBarMinimizeBehavior is an enum of when, not what. With onScrollDown, UIKit minimizes the bar to the active tab alone. Thereโ€™s no parameter controlling what survives. So most implementations rebuild the visible bar as a custom component. Some use genuine glass materials, but the real UITabBar is gone and with it, the native selection capsule: that little blob that moves like a drop of water between tabs. You can reproduce it with separate springs on the leading and trailing edges. I didnโ€™t want a reproduction. I wanted UIKitโ€™s. Then I remembered a Flutter app i built some months back which uses cupertino_native. Flutter runs the app while a platform-view bridge renders a real UIKit UITabBar. Finding expo-glass-tabs clarified the compact geometry I wanted. The two ideas clicked: why not bridge a real UITabBar into React Native? Hereโ€™s the trick: a standalone UITabBar has no UITabBarController managing it, so Appleโ€™s minimization rule never applies. That means I can control its frame and items myself. Expo Router still owns navigation and screen lifecycle. React Native detects scroll direction. Swift removes and restores the real item labels, recentres the icons and animates the native barโ€™s size. All five icons remain visible. The result keeps Appleโ€™s Liquid Glass, water-drop capsule, hit testing and accessibility, while adding a compact state its public API doesnโ€™t provide. One gotcha tho: detaching the bar means reimplementing everything the controller previously gave you for free. Active-tab reselect scrolling was one example

kelvin.dart

67,945 views โ€ข 1 month ago