Video wird geladen...
Video konnte nicht geladen werden
What is the difference between React Native JS Bottom Tabs and Native Bottom Tabs? 👀 Native bottom tabs use native platform primitives to render tabs (TabView from SwiftUI and BottomNavigationView on Android), while JS Tabs recreate this UI as closely as possible. This approach works well but tabs can... show more
15,830 Aufrufe • vor 1 Jahr •via X (Twitter)
11 Kommentare
The API surface will be an (almost) 1:1 match with JS Bottom Tabs 🙌 This project is not yet released as I am working on this in my free time but I can't wait for you to try it out!
cool 😎 what happens across platforms when you add +10 items?
Thanks! BottomNavigationView from Android supports only 6 items so it shows an error 😆 However, on iOS you get the "More" button which is currently not working as lazy loading is not getting any events about entering these views from "more" list but we can fix it
Do we have lazy loading as well?
Yeah! I Implemented it yesterday evening. This is how the API looks like if you want to use it without React Navigation. It follows the same pattern as Material Bottom Tabs from React Native Paper. But most of this will be abstracted from users by React Navigation.
This is so nice @o_kwasniewski. Can't wait to try it!
This is awesome! Great work!
Thanks!
We use bottomtabs library for our app. What is the benchmark of performance in Android and iOS for your library vs the react-navigation bottom tabs. It would be nice if I can see it and does it support fade in logic like how stack screens do? Can this bottom tab be nested inside a native stack from react-navigation so this whole bottom tab is a stack? These are my questions so I can try this out.
Can the icons be lottie files?
I didn’t implement custom icons support yet so I will do some research on what we need to support Lottie files later
![CSS Trick 🤙 You can create these tab bar controls by using :has() to count the number of tabs ⭐️ .tabs:has(input:nth-of-type(3)){--count: 3;} .tabs:has(:checked:nth-of-type(3)){--active: 200%;} .tabs::after{ translate:var(--active) 0;} Let's break it down in this ! 📼 Couple of CSS :has() tricks here combined with custom properties 😎 First things first, lay out the tabs using display: grid. This gives you a way to create equal-width tabs 🙏 .tabs { display: grid; grid-auto-flow: column; } Then you use :has() to count the number of tabs and store that in a custom property 🤓 .tabs:has(input:nth-of-type(3)) { --count: 3; } .tabs:has(input:nth-of-type(4)) { --count: 4; } Using the cascade, the last valid :has() gives you the number of tabs 🫶 Using the tab count, you can size the tab indicator. For the tab indicator, use the tabs pseudoelement: .tabs::after { content: ""; position: absolute; height: 100%; width: calc(100% / var(--count)); } See how you can use --count to determine its size 📏 Next, use :has() to determine which tab is active or :checked with input [type=radio] .tabs:has(:checked:nth-of-type(2)) { --active: 1; } .tabs:has(:checked:nth-of-type(3)) { --active: 2; } You can use a zero-indexed translation here. If the second input is :checked, set --active: 1, then translate the pseudoelement on the tabs to that position 👉 .tabs::after { translate: calc(var(--active, 0) * 100%) 0; } Or you could set active to the translation: .tabs:has(:checked:nth-of-type(2)) { --active: 100%; } Setting the custom property allows you to use the index elsewhere if you need it 🤙 The final piece is using mix-blend-mode 👀 The tabs have a black background-color, the pseudoelement is white, and the label text is white. When you use mix-blend-mode: difference on the pseudoelement it will give this effect that the text transitions from white to black sliding across 😎 .tabs::after { color: hsl(0 0% 100%); mix-blend-mode: difference; } You can totally mix up the colors here though and go with a different effect. The mechanics of how you can use CSS :has() is the main point here 🙏 As always, any questions, suggestions, etc. let me know CodePen.IO link below! 👇 (There's even a Tailwind CSS play for this one too 👀)](https://image.24vids.com/tw-1750370338041647245/ext_tw_video_thumb/1750367384505081856/pu/img/ZVW6XE5SU4mBEB5M.jpg)
