Loading video...

Video Failed to Load

Go Home

React Native Bottom Tabs 1.0.0 is out ✨ - Drops old architecture 🌅 - Simplifies build configuration, making it fully compatible with Expo Image ✅ - Bunch of bug fixes 🐛 It works with Expo router, React Navigation and in standalone mode ⬇️

76,602 views • 10 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 • 16 days ago

If you’ve ever managed custom icons in React Native, you know the frustration of choosing between performance and developer experience. Libraries like 𝗿𝗲𝗮𝗰𝘁-𝗻𝗮𝘁𝗶𝘃𝗲-𝘀𝘃𝗴 are flexible but heavy. Every icon creates its own React subtree. The alternative? Manual icon fonts that force you into a constant back-and-forth of using web tools like IcoMoon and syncing font assets every time a design changes. 𝗦𝗼𝗳𝘁𝘄𝗮𝗿𝗲 𝗠𝗮𝗻𝘀𝗶𝗼𝗻 𝗟𝗮𝗯𝘀 just released 𝗿𝗲𝗮𝗰𝘁-𝗻𝗮𝘁𝗶𝘃𝗲-𝗻𝗮𝗻𝗼-𝗶𝗰𝗼𝗻𝘀 to solve exactly this. It’s a build-time icon font generator that gives you the performance of native fonts with the flexibility of simple SVG files. 𝗪𝗵𝗮𝘁’𝘀 𝗵𝗮𝗽𝗽𝗲𝗻𝗶𝗻𝗴? Instead of rendering complex vector paths at runtime, this library automatically converts your folder of SVGs into an optimized icon font during the build process. It essentially teaches your app to treat icons like standard text characters, which allows it to bypass React’s component tree and layout engine entirely. ➡️ 𝗕𝘂𝗶𝗹𝗱-𝘁𝗶𝗺𝗲 𝗔𝘂𝘁𝗼𝗺𝗮𝘁𝗶𝗼𝗻: It handles the entire pipeline—watching your icon folder, converting SVGs to .ttf files, and linking them to your native project automatically. ➡️ 𝗡𝗮𝘁𝗶𝘃𝗲 𝗣𝗲𝗿𝗳𝗼𝗿𝗺𝗮𝗻𝗰𝗲: Because icons render as native text glyphs, it is significantly faster than traditional SVG rendering, making it the ideal choice for long, scrollable lists or icon-heavy dashboards. ➡️ 𝗘𝘅𝗽𝗼 𝗖𝗼𝗻𝗳𝗶𝗴 𝗣𝗹𝘂𝗴𝗶𝗻: It features first-class support for Expo, automating the native plumbing like Info.plist updates and asset linking during the prebuild phase. ➡️ 𝗔𝘂𝘁𝗼𝗺𝗮𝘁𝗶𝗰 𝗧𝘆𝗽𝗲 𝗦𝗮𝗳𝗲𝘁𝘆: The library generates TypeScript definitions for your icon set, providing full IDE autocomplete and ensuring you never break the UI with a misspelled icon name. 𝗪𝗵𝘆 𝗶𝘁 𝗺𝗮𝘁𝘁𝗲𝗿𝘀? In high-performance applications, small overheads add up. By shifting the heavy lifting from the mobile device to your build machine, 𝗿𝗲𝗮𝗰𝘁-𝗻𝗮𝘁𝗶𝘃𝗲-𝗻𝗮𝗻𝗼-𝗶𝗰𝗼𝗻𝘀 ensures your UI stays buttery smooth while keeping your developer workflow modern. It’s another great example of how 𝗦𝗼𝗳𝘁𝘄𝗮𝗿𝗲 𝗠𝗮𝗻𝘀𝗶𝗼𝗻 continues to solve the "last mile" of performance friction in the ecosystem. Before you migrate your entire library, keep in mind: this is designed for the 𝗡𝗲𝘄 𝗔𝗿𝗰𝗵𝗶𝘁𝗲𝗰𝘁𝘂𝗿𝗲 (Fabric) and requires React Native 0.74 or higher. #ReactNative #Expo #SoftwareMansion #Icons #MobileDev #Performance #DeveloperExperience #OpenSource #JavaScript #TypeScript #SVG #Fabric

The React Native Rewind

24,992 views • 3 months ago

⚡️Truth is the moment consciousness refuses to be captured by comfort. That is why it matters. Anyone can “tell the truth” when it costs nothing. That is just description. The real test comes when lying would protect your image, preserve your status, avoid conflict, keep money flowing, satisfy the audience, defend the tribe, protect the ego, or maintain the illusion that your old map still works. That is where truth becomes moral force. A lie is not just a false statement. A lie is reality being bent to serve fear. It lets the person avoid contact with what is real. It keeps the dead pattern alive. It says: the truth is too dangerous, so the self will substitute a more convenient world. Do that enough times and the soul becomes unreal. Not in a mystical decorative sense. In a structural sense. The person loses contact with reality. Their words stop pointing outward. Their identity becomes a defense system. Their relationships become performances. Their work becomes propaganda. Their mind becomes a lawyer for its own comfort. Truth matters because it keeps consciousness aligned with reality. And reality is the only place creation can actually happen. You cannot build a real life on falsehood. You can build status. You can build money. You can build an image. You can build an audience. You can build a career. But the structure will rot because it is no longer in contact with the thing it claims to represent. That is why “telling the truth when lying would be easier” is sacred. It proves that something in you serves reality more than self-preservation. That is the beginning of freedom. Because the person who cannot tell the truth when it costs something is owned by whatever the lie protects.

SightBringer

55,493 views • 2 months ago

React Native now has its own shadcn/ui equivalent — introducing 𝗡𝗮𝘁𝗶𝘃𝗲𝗨𝗜. If you love the flexibility of copying customisable components directly into your project (avoiding heavy, dependency-laden packages), NativeUI is designed for you. 𝗡𝗮𝘁𝗶𝘃𝗲𝗨𝗜 offers beautifully crafted, accessible components tailored for React Native, following the same copy-paste philosophy as shadcn/ui. Built with 𝗡𝗮𝘁𝗶𝘃𝗲𝗪𝗶𝗻𝗱 for fast, declarative, and flexible styling optimised for React Native. ➡️ 𝗖𝗼𝗽𝘆 𝗰𝗼𝗺𝗽𝗼𝗻𝗲𝗻𝘁 𝗰𝗼𝗱𝗲 𝗱𝗶𝗿𝗲𝗰𝘁𝗹𝘆 𝗶𝗻𝘁𝗼 𝘆𝗼𝘂𝗿 𝗽𝗿𝗼𝗷𝗲𝗰𝘁 — no black-box dependencies required. ➡️ 𝗖𝗼𝗺𝗽𝗼𝗻𝗲𝗻𝘁𝘀 𝗮𝗿𝗲 𝗮𝗰𝗰𝗲𝘀𝘀𝗶𝗯𝗹𝗲 𝗯𝘆 𝗱𝗲𝗳𝗮𝘂𝗹𝘁, supporting screen readers and keyboard navigation, and designed to align with native iOS and Android UX patterns. ➡️ 𝗙𝘂𝗹𝗹 𝗰𝗼𝗻𝘁𝗿𝗼𝗹 𝗼𝘃𝗲𝗿 𝘆𝗼𝘂𝗿 𝗨𝗜 without rebuilding common elements like buttons, inputs, or sliders from scratch. ➡️ 𝗖𝗼𝗺𝗽𝗮𝘁𝗶𝗯𝗹𝗲 𝘄𝗶𝘁𝗵 𝗘𝘅𝗽𝗼 𝗮𝗻𝗱 𝘃𝗮𝗻𝗶𝗹𝗹𝗮 𝗥𝗲𝗮𝗰𝘁 𝗡𝗮𝘁𝗶𝘃𝗲 𝗽𝗿𝗼𝗷𝗲𝗰𝘁𝘀, but not yet integrated with Tamagui’s styling system (future support may be planned). ➡️ 𝗦𝘂𝗽𝗽𝗼𝗿𝘁𝘀 𝘁𝗵𝗲𝗺𝗶𝗻𝗴 𝘃𝗶𝗮 𝗡𝗮𝘁𝗶𝘃𝗲𝗪𝗶𝗻𝗱 — though you’ll need to wire it up manually using Tailwind variables, context providers, and config files. Note: The term “install” in the documentation refers to using the shadcn CLI (e.g., npx shadcn@latest add component) to fetch and copy component code into your project, not adding a package to your dependencies. NativeUI isn’t a plug-and-play library; it’s a lightweight toolbox that empowers you to shape your UI with precision and control. 𝗪𝗵𝗮𝘁’𝘀 𝘆𝗼𝘂𝗿 𝗽𝗿𝗲𝗳𝗲𝗿𝗲𝗻𝗰𝗲: npm install a pre-built UI kit for speed, or copy/paste NativeUI components for ultimate customisation? #ReactNative #KeyboardUX #MobileDev #OpenSource #JSDev #Performance #iOSDev #KeyboardExtensions #ReactNativeKeyboard #UIUX #shadcn #nativeui

The React Native Rewind

118,542 views • 1 year ago

CA: 0x172ae9e9b46770a70f479404d76e2f6561507011ef77a247fe3f58e7a5840a0d::manny::MANNY Your smart, hands-free edge tool in the crypto market. This powerful automated bot is designed to buy low and sell high with precision. It scans hundreds of coins in real-time, waiting for the right indicators—trend strength, volume spikes, price momentum, and bullish patterns—before entering a trade. Once in, it manages risk with dynamic stop-loss and take-profit levels, so your capital is always protected. Every trade is backed by a multi-layer confluence strategy, ensuring only high-confidence setups are executed. ✅ Advanced entry logic ✅ Fully automated buy/sell execution ✅ Built-in profit protection and cooldown filters ✅ Real-time alerts (Telegram/Twitter ready) ✅ JSON-based state memory for continuity ✅ Minimal setup, maximum performance ✅ Excludes low-quality coins automatically (e.g., BTC/ETH filters optional) ✅ Plug-and-play friendly — run it locally or integrate it into your system. ✅ Clean, professional trade alerts with price and PnL details ✅ Recovers automatically from connection issues or downtime Whether you’re a pro or just getting started, this bot helps you stay ahead of the market—24/7, emotion-free with pure mathematics. This bot has been in development for the last 6 months. I, Chronos, the developer behind it, have been testing for a while for the best configuration for a trading bot. I believe I have something good going on here. The bot automatically posts all the trades via IFTTT and X integration to its X account. Everything is automated. So how can people rent it, and how will it bring value to the project? Soon, the bot can be rented out via a cloud server. A customer must buy 30 USD worth of Memecoin_MANNY token (CA:0x172ae9e9b46770a70f479404d76e2f6561507011ef77a247fe3f58e7a5840a0d::manny::MANNY). After buying it and depositing it into a special wallet, he will be granted access to the bot. . The bot runs only on the backend — users interact with it via an interface (web app, Telegram bot, or API). A web dashboard and Telegram bot interface will be created. This lets users Start/stop their bot session See trade logs or results. Connect their API keys securely. Get alerts and updates The idea of all this is to offer a service but also bring value to the project. More bots will be developed. This is only the beginning. Cheers Chronos #python #memecoin_manny #spot #trading #bitcoin #eth #Binance #bybit #memecoin #VALHALLA

Ex Machina

24,488 views • 1 year ago