The React Native Rewind

SF Symbols in React Navigation, Nitro Powered Grids, and Howard Carter’s Archaeological Android Dig reactnativerewind.com/issues/sf-symb… #ReactNative #ReactNativeRewind #ReactNavigation #Bitrise #CodePush #MobileDevelopment #iOS #Android #DeveloperTools #Javascript

Expo UI, The Death of WebViews, and Gary the Potato-Powered LLM reactnativerewind.com/issues/expo-ui… #ReactNative #ReactNativeRewind #Expo #JetpackCompose #SwiftUI #SoftwareMansion #MobileDevelopment #AI #LLM

@Princedany96 @sentry

@ReactNativeRwd seems like you need to update the sentry CLI message for dynamic configs in expo @sentry. The plugin name is missing the /expo.

Have you ever had a user report that your app "won't even open," but your error logs are completely empty? It is a frustrating blind spot. If a crash happens during the native boot sequence before the JavaScript engine has a chance to initialise, standard React Native error handlers are usually left in the dark. 𝗦𝗲𝗻𝘁𝗿𝘆 𝗥𝗲𝗮𝗰𝘁 𝗡𝗮𝘁𝗶𝘃𝗲 𝟴.𝟬 has arrived to close that visibility gap. This major update is a complete overhaul focused on capturing the failures that happen in those critical first milliseconds of your app's lifecycle. 𝗪𝗵𝗮𝘁'𝘀 𝗰𝗵𝗮𝗻𝗴𝗲𝗱? Historically, if your app crashed during the native "App Start" phase, the JS-based SDK wouldn't have started yet, leaving you with no stack trace. Version 8.0 re-engineers how the SDK hooks into the native layer (Android and iOS) to ensure that even the earliest crashes are recorded and linked to your project. 𝗪𝗵𝗮𝘁'𝘀 𝗶𝗻𝗰𝗹𝘂𝗱𝗲𝗱? ➡️ 𝗔𝗽𝗽 𝗦𝘁𝗮𝗿𝘁 𝗘𝗿𝗿𝗼𝗿 𝗧𝗿𝗮𝗰𝗸𝗶𝗻𝗴: The SDK now captures native crashes that occur before the React Native layer is loaded. This means you can finally debug why an app is "dying on launch" instead of guessing. ➡️ 𝗔𝘂𝘁𝗼𝗺𝗮𝘁𝗶𝗰 𝗜𝗻𝘀𝘁𝗿𝘂𝗺𝗲𝗻𝘁𝗮𝘁𝗶𝗼𝗻: Beyond crashes, it improves how it tracks cold and warm starts, giving you a clear breakdown of how much time is spent in the native boot process versus the JS bundle loading. ➡️ 𝗦𝗶𝗺𝗽𝗹𝗶𝗳𝗶𝗲𝗱 𝗔𝗣𝗜: This release cleans up years of legacy baggage, moving to a more unified configuration that aligns with the latest 𝗦𝗲𝗻𝘁𝗿𝘆 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗦𝗗𝗞 patterns. 𝗪𝗵𝘆 𝗶𝘁 𝗺𝗮𝘁𝘁𝗲𝗿𝘀? The biggest hurdle to a 5-star app rating is stability. By providing visibility into the native-to-JS handoff, 𝗦𝗲𝗻𝘁𝗿𝘆 is moving beyond just "catching JS errors" to providing a holistic view of app health. It transforms the "black box" of the startup sequence into actionable data. #ReactNative #Sentry #MobileDev #ErrorTracking #NewArchitecture #Fabric #OpenSource #JavaScript #TypeScript #MobilePerformance #DevTools #Debugging

@k7grzywacz @betomoedano Thanks @k7grzywacz, corrected on all sources :)

@ReactNativeRwd I reckon you meant @betomoedano

Touching Native Elements, AsyncStorage 3.0, and Describing Layouts Like a Victorian Novel reactnativerewind.com/issues/touchin… #ReactNative #ReactNativeRewind #AsyncStorage #Expo #MobileDevelopment #NewArchitecture #SoftwareEngineering #AI #DeveloperTools #Javascript

@betomoedano @k7grzywacz Whoops 😂

@k7grzywacz @ReactNativeRwd Haha 🤣

If you’re a React Native developer and want to stay ahead of the curve (with a laugh or two) on the latest updates—without spending hours sifting through release notes. Catch the latest in our newsletter, The React Native Rewind 👇 thereactnativerewind.com Source: github.com/getsentry/sent…

🚀LaTeX support landed! 📐 Math rendering is now merged into enriched-markdown. $ Inline $ and $$ Block $$ LaTeX support Test it via the nightly release: 𝚗𝚙𝚖 𝚒 𝚛𝚎𝚊𝚌𝚝-𝚗𝚊𝚝𝚒𝚟𝚎-𝚎𝚗𝚛𝚒𝚌𝚑𝚎𝚍-𝚖𝚊𝚛𝚔𝚍𝚘𝚠𝚗@𝚗𝚒𝚐𝚑𝚝𝚕𝚢

@MukeshPraj81318 Looks really cool. Are the components multi-platform? i.e. web and native?

@ReactNativeRwd still early but the idea is there nativecn-ui.vercel.app, would love your thoughts on it

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

@G_Moskaliuk Looking forward to them!

@ReactNativeRwd Thank you for highlighting enriched-markdown 🙌 More cool features will come in the next releases 🙂

Have you ever tried to render complex Markdown in React Native? Standard libraries often stumble as soon as you throw a table, a task list, or nested formatting at them. You usually end up choosing between a lightweight parser that breaks on complex content or a heavy WebView that kills your app’s performance and native feel. That’s where 𝗿𝗲𝗮𝗰𝘁-𝗻𝗮𝘁𝗶𝘃𝗲-𝗲𝗻𝗿𝗶𝗰𝗵𝗲𝗱-𝗺𝗮𝗿𝗸𝗱𝗼𝘄𝗻 comes in. Developed by the team at 𝗦𝗼𝗳𝘁𝘄𝗮𝗿𝗲 𝗠𝗮𝗻𝘀𝗶𝗼𝗻 𝗟𝗮𝗯𝘀, this library is pushing toward full 𝗚𝗶𝘁𝗛𝘂𝗯 𝗙𝗹𝗮𝘃𝗼𝗿𝗲𝗱 𝗠𝗮𝗿𝗸𝗱𝗼𝘄𝗻 (𝗚𝗙𝗠) support, bringing high-fidelity document rendering directly to the native layer. 𝗪𝗵𝗮𝘁’𝘀 𝗵𝗮𝗽𝗽𝗲𝗻𝗶𝗻𝗴? Historically, Markdown in React Native was limited by the complexity of parsing non-standard elements. This project aims to bridge that gap by providing a robust, extensible renderer that understands the nuances of 𝗚𝗙𝗠 without sacrificing speed. It’s about making sure your mobile app can handle the same rich content your users see on the web. ➡️ 𝗚𝗙𝗠 𝗖𝗼𝗺𝗽𝗹𝗶𝗮𝗻𝗰𝗲: It is moving beyond basic syntax to support elements like tables, strikethroughs, and task lists—the features that make developer-centric content actually readable. ➡️ 𝗡𝗮𝘁𝗶𝘃𝗲 𝗣𝗲𝗿𝗳𝗼𝗿𝗺𝗮𝗻𝗰𝗲: By avoiding the overhead of a WebView and rendering directly to native views, it maintains smooth scrolling and a responsive UI even with large documents. ➡️ 𝗘𝗻𝗿𝗶𝗰𝗵𝗲𝗱 𝗘𝘅𝗽𝗲𝗿𝗶𝗲𝗻𝗰𝗲: True to its name, the library is designed to be "enriched," allowing you to customise how specific Markdown tags are mapped to your own design system components. 𝗪𝗵𝘆 𝗶𝘁 𝗺𝗮𝘁𝘁𝗲𝗿𝘀? Most modern apps are content platforms. Whether you are building a documentation viewer, a technical blog, or a project management tool, having 𝗚𝗙𝗠 support that feels "native" is a massive upgrade for the user experience. You no longer have to compromise between content complexity and app performance. By bringing full 𝗚𝗶𝘁𝗛𝘂𝗯 𝗙𝗹𝗮𝘃𝗼𝗿𝗲𝗱 𝗠𝗮𝗿𝗸𝗱𝗼𝘄𝗻 support to the ecosystem, 𝗦𝗼𝗳𝘁𝘄𝗮𝗿𝗲 𝗠𝗮𝗻𝘀𝗶𝗼𝗻 𝗟𝗮𝗯𝘀 is turning what used to be a complex engineering hurdle into a standard feature. #ReactNative #Markdown #SoftwareMansion #MobileDev #OpenSource #GFM #GitHub #JavaScript #TypeScript #UIUX #DeveloperTools #MobilePerformance

If you’re a React Native developer and want to stay ahead of the curve (with a laugh or two) on the latest updates—without spending hours sifting through release notes. Catch the latest in our newsletter, The React Native Rewind 👇 thereactnativerewind.com Source: github.com/software-mansi…

If you’ve ever built a complex React Native app, you know that managing multiple bottom sheets is a recipe for state-management headaches. Trying to coordinate which sheet is open, which one should be on top, and how to pass data between them usually leads to a mess of boolean flags and "prop drilling" that’s hard to maintain. 𝗿𝗲𝗮𝗰𝘁-𝗻𝗮𝘁𝗶𝘃𝗲-𝗯𝗼𝘁𝘁𝗼𝗺-𝘀𝗵𝗲𝗲𝘁-𝘀𝘁𝗮𝗰𝗸 was created to solve this by bringing a navigation-like stack mental model to modals. Previously, the library was tightly coupled with specific implementations. Now, it has been rewritten to be 𝗹𝗶𝗯𝗿𝗮𝗿𝘆-𝗮𝗴𝗻𝗼𝘀𝘁𝗶𝗰. This means the logic that manages the "stack" of modals is now separate from the views themselves, giving you total flexibility over your UI. ➡️ 𝗟𝗶𝗯𝗿𝗮𝗿𝘆 𝗔𝗴𝗻𝗼𝘀𝘁𝗶𝗰𝗶𝘀𝗺 — The core manager no longer cares which modal library you use. You can now manage stacks of sheets regardless of the underlying UI implementation. ➡️ 𝗕𝘂𝗶𝗹𝘁-𝗶𝗻 𝗔𝗱𝗮𝗽𝘁𝗲𝗿𝘀 — It ships with official support for 𝗴𝗼𝗿𝗵𝗼𝗺/𝗯𝗼𝘁𝘁𝗼𝗺-𝘀𝗵𝗲𝗲𝘁 and the standard 𝗥𝗲𝗮𝗰𝘁 𝗡𝗮𝘁𝗶𝘃𝗲 𝗠𝗼𝗱𝗮𝗹. You get the benefits of stack management without being locked into one specific library. ➡️ 𝗖𝘂𝘀𝘁𝗼𝗺 𝗔𝗱𝗮𝗽𝘁𝗲𝗿 𝗦𝘂𝗽𝗽𝗼𝗿𝘁 — If you have your own custom-built sheet or use a different third-party library, you can easily write an adapter to hook into the stack lifecycle. 𝗪𝗵𝘆 𝗶𝘁 𝗺𝗮𝘁𝘁𝗲𝗿𝘀? In modern mobile design, we often need to "drill down" within a modal—like opening a filter, then a date picker, then a confirmation—all within the bottom sheet context. 𝗿𝗲𝗮𝗰𝘁-𝗻𝗮𝘁𝗶𝘃𝗲-𝗯𝗼𝘁𝘁𝗼𝗺-𝘀𝗵𝗲𝗲𝘁-𝘀𝘁𝗮𝗰𝗸 makes this feel as natural as standard screen navigation. It turns your modals from isolated components into a cohesive, manageable system. If your design system relies on layered overlays or complex multi-step forms, this update effectively removes the "integration tax" of choosing between different sheet libraries. You can now pick the best UI tool for the job and let the stack manager handle the heavy lifting of state and depth. #ReactNative #BottomSheet #MobileDev #JavaScript #TypeScript #OpenSource #SoftwareEngineering #UIUX #MobileAppDevelopment #DevTools #Navigation

Source: github.com/callstackincub… If you’re a React Native developer and want to stay ahead of the curve (with a laugh or two) on the latest updates—without spending hours sifting through release notes. Catch the latest in our newsletter, The React Native Rewind 👇 thereactnativerewind.com

If you’ve ever spent a weekend wrestling with a React Native upgrade, you know the drill: the Upgrade Helper is open in one tab, the changelog in another, and you’re manually hunting through AppDelegate.mm or build.gradle for that one missing line that’s crashing your build. 𝘂𝗽𝗴𝗿𝗮𝗱𝗶𝗻𝗴-𝗿𝗲𝗮𝗰𝘁-𝗻𝗮𝘁𝗶𝘃𝗲 (part of the 𝗮𝗴𝗲𝗻𝘁-𝘀𝗸𝗶𝗹𝗹𝘀 project by Callstack) is something a bit different. It’s not a library for your app—it’s a "skill" for an AI agent. 𝗪𝗵𝗮𝘁 𝗶𝘀 𝗮𝗻 "𝗔𝗴𝗲𝗻𝘁 𝗦𝗸𝗶𝗹𝗹"? Think of it as a specialised "brain module" for an AI-powered developer. Instead of you manually following an upgrade guide, an AI agent (using this skill) is given the precise context and rules needed to perform the migration for you. It’s codifying the expertise of human engineers into a format that an LLM can actually execute. 𝗛𝗼𝘄 𝗶𝘁 𝘄𝗼𝗿𝗸𝘀: ➡️ 𝗖𝗼𝗻𝘁𝗲𝘅𝘁-𝗔𝘄𝗮𝗿𝗲 𝗨𝗽𝗴𝗿𝗮𝗱𝗲𝘀 — It provides the agent with the "why" and "how" behind version changes, moving beyond simple copy-pasting to actual problem-solving. ➡️ 𝗧𝗼𝗼𝗹 𝗜𝗻𝘁𝗲𝗴𝗿𝗮𝘁𝗶𝗼𝗻 — It teaches the agent how to interact with the React Native CLI and the Upgrade Helper API to automate the heavy lifting of diffing versions. ➡️ 𝗕𝗲𝘀𝘁 𝗣𝗿𝗮𝗰𝘁𝗶𝗰𝗲𝘀 𝗯𝘆 𝗗𝗲𝗳𝗮𝘂𝗹𝘁 — It includes Callstack’s battle-tested knowledge on handling breaking changes, ensuring the agent doesn't just "fix" the error but does it the right way. 𝗪𝗵𝘆 𝗶𝘁 𝗺𝗮𝘁𝘁𝗲𝗿𝘀? The manual maintenance of mobile apps is one of the biggest "time taxes" in development. By turning complex processes like RN upgrades into reusable AI skills, we are moving toward a world of 𝗮𝗴𝗲𝗻𝘁𝗶𝗰 𝘄𝗼𝗿𝗸𝗳𝗹𝗼𝘄𝘀. In this world, your codebase doesn't just sit there getting dusty—it has the potential to "self-upgrade" while you focus on building actual features. #ReactNative #AIAgents #Callstack #MobileDev #OpenSource #DevTools #SoftwareArchitecture #Automation #JavaScript #TypeScript #LLM

A TikTok Killer, TestFlight Instant Death, and My Unwashed Pile of Hoodies reactnativerewind.com/issues/a-tikto… #ReactNative #ReactNativeRewind #ByteDance #LynxJS #Sentry #MobileDev #Expo #JavaScript

@MukeshPraj81318 Cool DM us the libraries :)

This is exactly the gap in React Native right now. Most libraries give components in isolation, but real apps need complete flows (forms, auth, layouts). I’ve been working on a copy-paste component library + studio to test layouts before coding zero dependencies, no setup. Curious what components people rebuild most often 👀

Source: github.com/callstack/reac… If you’re a React Native developer and want to stay ahead of the curve (with a laugh or two) on the latest updates—without spending hours sifting through release notes. Catch the latest in our newsletter, The React Native Rewind 👇 thereactnativerewind.com

If you’ve ever used a music app where the background smoothly shifts colours to match the album art, you know how premium that "live" feeling is. It’s a classic Material Design pattern that makes an app feel deeply integrated with its content and polished enough for a production-grade experience. 𝗕𝘂𝘁 𝗵𝗲𝗿𝗲’𝘀 𝘁𝗵𝗲 𝗸𝗶𝗰𝗸𝗲𝗿: manually extracting a balanced colour palette from an image is computationally heavy and a nightmare to get right in pure JavaScript—especially if you want to maintain accessible contrast ratios. 𝗘𝗻𝘁𝗲𝗿 𝗿𝗲𝗮𝗰𝘁-𝗻𝗮𝘁𝗶𝘃𝗲-𝗺𝗮𝘁𝗲𝗿𝗶𝗮𝗹-𝗽𝗮𝗹𝗲𝘁𝘁𝗲 — Originally built by Callstack, this library brings the native Android Palette API to React Native. It allows you to programmatically "mine" an image for its most prominent colour profiles to drive your UI’s theme dynamically in real-time. 𝗪𝗵𝗮𝘁’𝘀 𝗶𝗻𝘀𝗶𝗱𝗲? ➡️ 𝟲 𝗦𝘁𝗮𝗻𝗱𝗮𝗿𝗱 𝗣𝗿𝗼𝗳𝗶𝗹𝗲𝘀 — Instantly extract Vibrant, Muted, and their Light/Dark variations. It even provides pre-calculated titleTextColor and bodyTextColor swatches so you don't have to guess if your text is readable over the extracted colour. ➡️ 𝗠𝗼𝗱𝗲𝗿𝗻 𝗔𝗣𝗜 𝘀𝘂𝗽𝗽𝗼𝗿𝘁 — Includes a usePaletteSwatch hook for a clean, declarative way to consume colours, and a MaterialPaletteProvider to broadcast extracted themes across your entire component tree. ➡️ 𝗡𝗮𝘁𝗶𝘃𝗲-𝗟𝗲𝘃𝗲𝗹 𝗣𝗲𝗿𝗳𝗼𝗿𝗺𝗮𝗻𝗰𝗲 — By leveraging the native Palette API on Android and high-performance extraction logic, it handles high-res images without blocking the JS thread or dropping frames. ➡️ 𝗙𝗹𝗲𝘅𝗶𝗯𝗹𝗲 𝗖𝗼𝗻𝘁𝗿𝗼𝗹 — You can define specific "regions" of an image to analyse or set a maximumColorCount to fine-tune the balance between extraction speed and colour accuracy. 𝗪𝗵𝘆 𝗶𝘁 𝗺𝗮𝘁𝘁𝗲𝗿𝘀? Design shouldn't be static. Dynamic theming is one of the most effective ways to bridge the gap between a "basic" app and a "premium" one. Whether you’re building a media player, a social feed, or a contact list, this library gives you the tools to make your UI dance with your content. 𝗪𝗵𝗮𝘁’𝘀 𝘁𝗵𝗲 𝗰𝗮𝘁𝗰𝗵? Unlike most libraries, this one is currently 𝗔𝗻𝗱𝗿𝗼𝗶𝗱-𝗼𝗻𝗹𝘆. It’s built specifically to leverage the native Android APIs that handle heavy colour extraction without blocking the JavaScript thread. #ReactNative #MaterialDesign #Android #Callstack #OpenSource #MobileDev #UIUX #DesignSystems #JavaScript #TypeScript #DevTools #AndroidDev