Filter
Exclude
Time range
-
Near
React Navigation now supports native iOS & Android bottom tabs. If youโ€™re using bottom tabs in a React Native app, youโ€™ve likely used the JS-based version (createBottomTabNavigator). But now thereโ€™s an experimental native-backed alternative: createNativeBottomTabNavigator. ๐—ช๐—ต๐—ฎ๐˜ ๐—ฑ๐—ผ๐—ฒ๐˜€ ๐˜๐—ต๐—ฎ๐˜ ๐—บ๐—ฒ๐—ฎ๐—ป? โžก๏ธ On iOS, it uses UITabBarController โžก๏ธ On Android, it uses BottomNavigationView โžก๏ธ You still write tabs using React components โ€” but under the hood, the UI is rendered using actual native components. ๐—ช๐—ต๐˜† ๐˜‚๐˜€๐—ฒ ๐—ถ๐˜? โžก๏ธ Better platform fidelity โ€” animations, accessibility, gestures all work as users expect โžก๏ธ No JS rendering of the tab bar = less overhead โžก๏ธ Some built-in behaviors are free: like search tabs turning into native search bars on iOS 16 ๐—ง๐—ต๐—ถ๐—ป๐—ด๐˜€ ๐˜๐—ผ ๐—ป๐—ผ๐˜๐—ฒ: โžก๏ธ Still marked as ๐—ฒ๐˜…๐—ฝ๐—ฒ๐—ฟ๐—ถ๐—บ๐—ฒ๐—ป๐˜๐—ฎ๐—น โ€” APIs may change โžก๏ธ Works on ๐—ถ๐—ข๐—ฆ ๐—ฎ๐—ป๐—ฑ ๐—”๐—ป๐—ฑ๐—ฟ๐—ผ๐—ถ๐—ฑ ๐—ผ๐—ป๐—น๐˜† (no web support) โžก๏ธ Requires ๐—ฅ๐—ฒ๐—ฎ๐—ฐ๐˜ ๐—ก๐—ฎ๐˜๐—ถ๐˜ƒ๐—ฒ ๐Ÿฌ.๐Ÿณ๐Ÿต or ๐—˜๐˜…๐—ฝ๐—ผ ๐—ฆ๐——๐—ž ๐Ÿฑ๐Ÿฏ if using Expo โžก๏ธ On Android, youโ€™re limited to 5 tabs max (platform constraint) If you're targeting Catalyst/macOS, tvOS, iPadOS (with proper sidebar adaptation), or visionOS, the Callstack react-native-bottom-tabs integration (recommended in the official React Navigation blog) is currently more mature and supports all these platforms out-of-the-box with beautiful native adaptations. Would you switch to native tabs in your RN app? Or do the JS-based ones still give you all the flexibility you need? #ReactNative #ReactNavigation #BottomTabs #MobileDev #iOSDevelopment #AndroidDev #OpenSource #JSI #NativeComponents #Navigation
4
8
92
7,877
๐Ÿค“Dropping some dev knowledge - "How To Create Native Modules in React Native" clever.ly/blog/2017/05/09/goโ€ฆ #react #reactnative #nativecomponents

1
1
#ReactEurope Animations for ReactNative => NativeComponents or LayoutAnimation or Animted.js
1
1