Skip to content
Programing

React Native 0.74: Bridgeless Mode and the New Architecture Milestone

Published: Duration: 6:41
0:00 0:00

Transcript

Host: Hey everyone, welcome back to Allur! I’m your host, Alex Chan. Today, we are diving deep into the world of mobile development, specifically focusing on a massive shift happening in the React Native ecosystem. Now, if you’ve been following React Native for a while, you’ve probably heard whispers—or maybe loud shouts—about the "New Architecture." It’s been this "coming soon" feature for what feels like forever. Host: I am so excited to welcome Tiago Silva to the show. Tiago is a Senior Mobile Engineer based in São Paulo, Brazil, where he’s been leading the migration to the New Architecture for one of the largest fintech apps in the region. Tiago, the Brazilian React Native community is legendary for being ahead of the curve, so I can’t think of anyone better to talk us through this. Welcome to Allur! Guest: Thanks so much for having me, Alex! It’s a pleasure to be here. And you’re right, the energy in the Brazilian dev scene right now, especially in São Paulo and Florianópolis, is just electric. We have these massive user bases, and when you’re dealing with fintech, every millisecond of "jank" or lag is something the user notices. So 0.74 is definitely the hot topic at our local meetups. Host: I bet! So, let’s jump right into the big one: Bridgeless Mode. For the non-experts or those who haven't peeked under the hood lately, we’ve always had "The Bridge." Why was it there, and why are we so happy to see it go? Guest: [Laughs] Oh, the Bridge. It’s served us well, but it was essentially a middleman. Think of it like this: if your JavaScript code wanted to tell the native iOS or Android side to do something—like open the camera or just render a button—it had to package that message into a JSON string. Then, it sent that string across the "Bridge," where the native side would unpack it, figure out what to do, and then send a response back the same way. Host: Which sounds... slow? Guest: Exactly! It’s asynchronous and it’s heavy. If you were moving a lot of data—like scrolling through a huge list with images—that JSON serialization started to create "jank." You’d see those frame drops. Bridgeless Mode in 0.74 completely removes that middleman. Instead of sending JSON messages, we use the JSI—the JavaScript Interface. This allows JavaScript to hold a direct reference to C++ host objects. It’s like, instead of sending a letter through the mail, you’re now just reaching over and moving the gears yourself. It’s synchronous and much, much faster. Host: That is such a great analogy. "Moving the gears yourself." But okay, I have to play devil’s advocate here. As a developer, when I hear "fundamental architectural change," I immediately think: "Oh no, my third-party libraries are going to break." If I have fifty packages in my `node_modules` that still use the old bridge, is 0.74 going to blow up my app? Guest: [Chuckles] That’s the "aha moment" with this release! Meta actually put a lot of thought into that. They introduced something called the Interop Layer. This is actually pretty brilliant—it allows your legacy Native Modules to run *within* the Bridgeless environment. So, you can enable the New Architecture and get those performance boosts, but the Interop Layer "tricks" your older libraries into thinking the bridge is still there. It gives us a safety net. You don’t have to wait for every single maintainer on GitHub to update their library to Turbo Modules before you can upgrade. Host: Oh, that’s a relief. So it’s not an "all or nothing" situation? Guest: Exactly. It’s a transition. But, I will say, for the apps I’m working on in Brazil, the goal is still to get to pure Turbo Modules eventually because that’s where you get the real memory efficiency gains. But the Interop Layer makes the jump to 0.74 much less scary. Host: That makes sense. Now, let’s talk about the UI side of things. I saw that Yoga 3.0 is included in this release. For those who don't know, Yoga is the layout engine, right? What’s actually changing for the average dev who’s just trying to center a div... or, well, a View? Guest: [Laughs] Centering a View is the eternal struggle, right? Yoga 3.0 is actually a big step toward "web parity." One of the biggest additions is support for `margin: auto`. It sounds like a small thing, but it’s something web developers use constantly. In the past, we had to do these weird flexbox workarounds in React Native to get the same result. Host: Wait, we finally have `margin: auto`? Guest: We finally have it! And it’s handled much more predictably now. Also, `aspect-ratio` is much more stable. In older versions, if you used `aspect-ratio` with certain flex properties, the layout could get... let’s say, "creative." Yoga 3.0 brings it closer to the CSS spec. It’s all about reducing those "layout hacks" we’ve all written. When I’m reviewing code now, I see fewer platform-specific styling checks, which is a win for everyone. Host: That’s huge for the "write once, run anywhere" dream. It feels like React Native is finally growing up and shaking off those early mobile-only quirks. So, if I’m a lead dev and I’m looking at 0.74, is it time to pull the trigger? How hard is the actual implementation? Guest: Honestly, for new projects, it’s a no-brainer. It should be your baseline. For existing projects, the effort is mostly in the testing. Enabling it is literally just a flag. In your `android/gradle.properties`, you set `newArchEnabled=true`. For iOS, you just run your pod install with a flag. The "real" work is just clicking through your app to make sure the Interop Layer is doing its job with your older components. Host: And you mentioned earlier that in your work with fintech, you’re seeing real-world gains. Can you share a bit more about that? Like, what does the user actually feel? Guest: It’s mostly in the startup time and the responsiveness of high-priority updates. In a complex app, when you tap a button to execute a trade or transfer money, you want that feedback to be instant. In the old architecture, if the bridge was busy processing a large data fetch in the background, your UI interaction might feel sluggish. With Bridgeless Mode and the new renderer, Fabric, the UI can handle high-priority tasks much better. It feels... crisp. That’s the word I keep using. The app just feels "native-native," if that makes sense. Host: "Crisp." I love that. It’s that feeling where the app is glued to your finger. Actually, I was reading that 0.74 also improves state update batching? Guest: Yes! This is another one that brings it closer to how React works on the web. It reduces the number of re-renders when you have multiple state updates happening at once. Again, it’s all about efficiency. We’re moving away from the "overhead" of the past. Host: This has been so enlightening, Tiago. It really feels like we’re entering a new era where we don’t have to apologize for the framework's limitations anymore. Guest: Definitely. The "Bridge" was a clever solution for 2015, but for 2024? We’ve outgrown it. 0.74 is the signal that the New Architecture is the standard now. It’s time to build without the bridge. Host: "Build without the bridge"—I think that’s the perfect note to end on. Tiago, thank you so much for joining us and sharing your expertise from the ground in Brazil. It’s been amazing having you. Guest: Thanks for having me, Alex! This was great. Host: If you want to dive deeper into the technical specs of React Native 0.74, I highly recommend checking out the official React Native blog—they have some great deep dives into the JSI and Yoga 3.0. We’ll also put a link to some migration guides in our show notes.

Tags

Frontend react-native mobile development performance modernization concurrency json