Jed Bartausky:

Ladies and gentlemen, welcome back to another episode of the React Native Radio Podcast. Episode 368, RNR Explains Fabric with Robin Heinze and Tyler Williams.

Robin Heinze:

Welcome back everybody. I'm Robin, obviously. I'm the director of engineering at Infinite Red. I'm sitting here, not with Mazen, but with Tyler. Hello. How are you, Tyler? Tell everyone what you do, who you are, why you're here.

Tyler Williams:

Yeah, I'm doing well. I'm a staff software engineer here at Infinite Red. If you've heard my name, it's possibly because of the part-time role I have editing the podcast, which I've

Robin Heinze:

Been doing - That's very true.

Tyler Williams:

For maybe a year now, maybe longer. I don't know. I've been here for almost two years at Infinite Red, and I've been working on the podcast as well, but my actual day job is building React Native and Expo apps for Infinite Red. Yeah, and I think I came on an episode some number of months ago.

Robin Heinze:

Yes. I know we've had you on at least once before, and you've been editing for us for quite a while. Two years, you just blew my mind. I don't think I would've told you that it's been two years, but I guess that's true.

Tyler Williams:

A little under, but we're getting there.

Robin Heinze:

It feels like a lot longer. You fit right -

Tyler Williams:

Because it's such a pain to work with me because it's like pulling teeth.

Robin Heinze:

I always say that and I'm like, "I don't know if that sounds like a good thing or a bad thing." I feel like I intend it to sound like a good thing, like you fit right in and it feels like you've always been here. Right. But it could also feel like - I

Tyler Williams:

Was like, "Oh, it's

Robin Heinze:

Only been..."

Tyler Williams:

I thought it had been a lot longer. Are you thinking about retiring yet?

Robin Heinze:

What's

Tyler Williams:

Going on here?

Robin Heinze:

How much longer? For the record, I mean it as a good thing. Anyway, I'm so happy you all joined us. We are doing an episode for our series, RNR Explains, which we did a few quite a while ago, and then now we're getting back into it. Basically, these are little bite-sized episodes where we dive into a topic from the docs, the React Native docs, that maybe you've used, maybe you haven't used, but maybe you don't know everything there is to know about it. Kind of an explain like I'm five, cool, fun facts. I like to think of it as the Bill Nye the Science Guy "Now You Know" segment. If you're a '90s kid like me, you'll get that reference. But yeah, we read the docs, so you don't have to, but please read the docs.

Tyler Williams:

Yeah, you probably still should.

Robin Heinze:

You probably still should.

Tyler Williams:

We could, Robin, do an audiobook of the docs, which would be interesting. Oh

Robin Heinze:

My God. I would actually do that. I would probably enjoy that a lot, making that. Meta, let us know. I don't think I would enjoy listening to it, but I would enjoy making it.

Tyler Williams:

Yeah, we can invoice them a day rate on that or something and just read through. We always get compliments on our audiovisual setup by clients because Infinite Red has a really good remote work culture. And Robin and I have, and many other people here, we all have sort of nicer audio and video setups, and perhaps Meta wants to use that to get real good natural language transcriptions of their documentation.

Robin Heinze:

I am available and willing if they give us the call. But anyway, we should probably take a little break and hear from our sponsor before we get into it.

Jed Bartausky:

Infinite Red. Infinite Red is a premier mobile app consultancy focused on Expo and React Native. We're a team of 30 that's located fully remote in the US with highly experienced mobile app developers. And we've been doing this for over a decade. We're also one of the first development teams to adopt agentic coding in a way that keeps high quality standards while also being able to dive in and do things the old school way if we need to. If you are looking for mobile app, Expo, or React Native expertise for your next project, hit us up at infinite.red/contact. Thanks. And now back to the episode.

Robin Heinze:

And we're back. All right, what are we explaining today? Well, I'm glad you asked. That would be Fabric.

Tyler Williams:

Robin,

Robin Heinze:

What are we

Tyler Williams:

Explaining today?

Robin Heinze:

What are we explaining today on RNR Explains? Fabric, not from Joann's Fabrics, as you might think. That would be an entirely different podcast and just as interesting, I think. The textile industry has a long history and it's very interesting. But we're talking about Fabric, the rendering system in React Native's new architecture, current architecture. It's not new anymore. It's the architecture, but Fabric is the rendering system and it replaces the old renderer, which was called Paper. And I just put together that they moved from Paper to Fabric two different anyway.

Tyler Williams:

Yeah, sort of materials.

Robin Heinze:

Materials. Yeah, that just clicked right now. But yeah, it replaces the old renderer and it makes a bunch of concurrent features possible that were not possible with the old bridge architecture. So Tyler, why does Fabric exist? What problem does it solve?

Tyler Williams:

So I think you just named sort of the primary problem as React shipped features like Suspense and transitions. The old Paper bridge architecture couldn't support the kinds of things that React needed to do because in order to do concurrent features in React, the React model itself needs to essentially be able to hold different possible trees in memory and discard some and pause some of its rendering cycle. And if you've looked into a deep dive of React, you'll see they have these things called, I think they're called lanes. So they get different priorities of when updates happen and what can happen concurrently. And in the old Paper system, when React would go through its render cycle, it would end up having to pass this asynchronous message from the JavaScript environment over to the native environment for the actual commits and painting. The problem is when you do an asynchronous call like that, you can't guarantee when it will go back and it's hard to even know when it does.

And so as the current architecture was being built out in a way that the JavaScript environment could hold onto real references to things in the native environment rather than sending these messages back and forth, it provided an opportunity for the concurrent features to actually get implemented from the React side and sort of translated over into this new rendering engine that is collectively called Fabric. I looked into this because I was kind of digging into the code. There's no just one Fabric module. Fabric is the name for a collection of many things that sort of get put together. It's a system.

Robin Heinze:

It's a system of things.

Tyler Williams:

Yeah, exactly. And having the ability to hold direct references to it and I think most importantly, call different functions and execute them synchronously is the thing that enables the concurrent features in React. And then it also solves some performance issues too. We know that the new architecture, the current architecture has the capability to be faster than the old system. It is in many cases, and rendering is one of the things React does a lot of. So the ability to hold onto those references and sort of just call the native layer directly from JavaScript gives a lot of performance benefits.

Robin Heinze:

Gotcha. So I did ask Claude to explain like I'm five what Fabric is and does. And it used the metaphor of being in a room and there's a different person in another room. And in order to get them to, you're trying to get them to draw something and all you have, you can just write on a sticky note and someone comes in literally walks it into the other room and then they have to draw it and then they'll send the drawing. The person walks back and hands you the drawing. But in the new world, everyone's in the same room and you can just point to stuff and sort of - It's almost like you could. You can communicate much more efficiently.

Tyler Williams:

Right. Well, imagine that person in the first room now has the ability to say they have their own whiteboard and they can begin drawing and the second person can also begin drawing, but the first person can stop, start, erase, and change what's on their whiteboard without having to send a new piece of paper.

Robin Heinze:

Right, exactly.

Tyler Williams:

Which is conveniently what the old system was called.

Robin Heinze:

Paper.

Tyler Williams:

Yeah. But that's really what it is. You're in the same room. And that's what's happening is that React holds its own tree, and in some cases multiple trees of what the components look like, and it does its own rendering cycle. Fabric also holds its own, they call it a shadow tree and it's made up of these shadow nodes and they are written in C++. So the logic there can be built and shared across Android and iOS and other platforms. You can even get it to run on web, which is cool. I hacked something together so that Robin and I could visualize this as well. And it holds that same kind of tree structure and it can map what's happening from React over into the C++ space. And then once it knows that it's happy with the tree structure, it has the bindings to go and paint that and commit it directly either through.

It has the bindings to commit it directly through either Android or iOS. And that gets kind of platform specific.

Robin Heinze:

So you said it's a C++ representation. I did play around with the tool you built. That's very cool. When you were playing around with a tree and editing things and being able to remove things, it was JSON, right?

Tyler Williams:

Yeah, they send messages that are some sort of. There is message passing going on, but it's in the same way that two, say, objects you have in your JavaScript code sending method invocations to each other is message passing rather than the old

Robin Heinze:

Sort of over the wire. It's synchronous message passing. Yeah. It's just like you still have to represent stuff as serializable stuff like JSON.

Tyler Williams:

Right. And importantly, you're still calling methods or importantly, you are now calling methods. So instead of just sending bridge messages, you are doing real method calls on the C++ objects. Because now we have the JavaScript Interface, which is sort of a protocol that Hermes implements. So Hermes conforms to the JavaScript Interface, the JSI, which allows React Native to build C++ objects that conform to another interface called HostObject. And then you can take a HostObject C++ thing and make it available globally in the JavaScript engine that conforms to the JSI. And then that can be interacted with directly from just other JavaScript objects.

Robin Heinze:

Gotcha. Okay. Yeah. This is all very fundamental to the new architecture and how everything works, and not just Fabric. Fabric is the rendering piece of it, but the whole thing is very reliant on this concept of JSI and host objects and being able to directly call things on C++ object instances from React Native. So we talked about JSI, we talked about the React Shadow Tree. Where does Yoga fit into all of this? Because I know of Yoga as the thing that does Flexbox within React Native. How are all of the sort of Yoga layout things calculated in this Fabric process?

Tyler Williams:

Yeah, that is still. Yoga I think hasn't changed much. The shadow tree itself or those shadow nodes have to figure out their properties, like how tall and wide they are. And Yoga implements the Flexbox algorithm. So if

Robin Heinze:

You say you have a row of three things and you give flex one to one of them and flex two to one of them and then flex one again to the third one, it calculates like, okay, the middle one has to be twice as long as these other two and the screen is a thousand pixels wide. So that means this one has to be. So Yoga is what's doing all of that math?

Tyler Williams:

Yeah, exactly. The shadow tree holds, so in that structure, you've got your parent node that say the view that contains those three children and shadow tree knows stuff about it, knows the style props. And then it also knows that that node has three children. And then those nodes call out to Yoga to some degree and say, "Hey, here are our props. I've been given flex one,

Robin Heinze:

Two, one. Hey, I have these children. Please tell me where I should actually put them on the screen."

Tyler Williams:

Right. Right, right. Yeah. So Fabric is in charge of coordinating all of that, and that happens kind of behind the scenes automatically as the shadow tree is calculated and rendered and committed.

Robin Heinze:

So I think we have all the pieces. So let's talk about the full travel path from I make a state change in my React Native app, which is going to cause a render. Okay, so I make the state change. How does it get all the way through Fabric to committing the screen actually changing?

Tyler Williams:

First thing that happens is React itself running inside of Hermes in that JavaScript environment does all of the React stuff. It's not different than what web would do. It just behaves the way the JavaScript wants to behave in the version of React that you're using at the time. That creates a tree and then sends the representation of that tree over to, I've got the name here. There's a thing called Native Fabric UI Manager, which is

Robin Heinze:

Sort of like - And it's in what, JSON at this point? What's the tree actually like?

Tyler Williams:

I think it's in JSON. I'd have to actually double

Robin Heinze:

Check. But it's in some sort of serializable data format.

Tyler Williams:

Right, precisely. That the Native Fabric UI Manager expects and can parse out and turn into the tree. So it's sort of done in a lot of ways. But importantly, because we're no longer doing async message passing, if there's any kind of React Suspense or transition that gets priority and has to change the tree, we can just stop the world and go and change things again rather than being like, oh, we already sent a message in flight. No, we're already

Robin Heinze:

On this path. We

Tyler Williams:

Got to - Right. We can stop directly because the JavaScript code can call into Native Fabric UI Manager inside of its synchronous, the harness that connects the React environment to that native rendering environment. So that representation gets over to C++. The Fabric, if nothing else interrupts it for any reason, it also goes and constructs its own tree or it takes the new representation and sort of runs a diffing algorithm and figures out what needs to change, which then tosses it back over to whatever adapter it has for the iOS or the Android or any other platform. And it says, "Hey, these are the changes that I need you to actually go and apply." So it still is, in a lot of ways, I think the mental model is similar to the old architecture. You have JavaScript and you have a native layer. In this case, we have an intermediate layer now, but you're still saying JavaScript uses React to return to us the state of the UI.

That information gets sent over natively somehow before it was async and now it's synchronous. And then the native platform changes the underlying props of the things that it's rendering to

Robin Heinze:

View. Right. The actual native components that it's painting on the screen. But yeah, so fundamentally, I mean, the mechanics that it's doing are very similar.

Tyler Williams:

Yeah.

Robin Heinze:

It's just

Tyler Williams:

More controllable.

Robin Heinze:

Same, same. Same but different.

Tyler Williams:

Yeah.

Robin Heinze:

Yeah. More controllable, more flexible, better performance.

Tyler Williams:

Better ingredients.

Robin Heinze:

Better ingredients, better pizza.

Tyler Williams:

Yeah. Company name.

Robin Heinze:

Company name. I don't think company name is listening to React Native Radio.

Tyler Williams:

But if

Robin Heinze:

They are - To get mad. I'm pretty sure the last episode Mazen actually legitimately plugged the company that makes his toothbrush.

Tyler Williams:

That's funny.

Robin Heinze:

So yeah, we don't have a discount code for anybody.

Tyler Williams:

Yeah.

Robin Heinze:

I'm so sorry. All right. Well, that's a pretty high-level rundown of what Fabric is. I think a lot of React Native developers have probably heard of Fabric in the context of the new architecture, but maybe didn't really know how it worked or what had changed from the old way. It's a super important advancement in how the React Native rendering system works and it unlocks a whole bunch of new stuff, concurrent features from React 18, and really brings everything into the modern era. So it's good for us all to know how it works. So yeah, now you know React Native Fabric. We hope you tune into the next one, so we'll see you next time. See you. Bye.

Jed Bartausky:

As always, thanks to our editors, Tyler Williams and Jed Bartausky, our marketing and episode release coordinator, Justin Huskey, and our guest coordinator, Mazen Chami. Our producers and hosts are Jamon Holmgren, Robin Heinze, and Mazen Chami. Thanks to our sponsor, Infinite Red. Check us out at infinite.red/radio. A special thanks to all of you listening today. Make sure to subscribe to React Native Radio on all the major podcasting platforms.