Dive into the Metro bundler with Jamon, Robin, and Mazen on this new installment of RNR Explains! It's packed with insights for even the most advanced React Native developers.
Dive into the Metro bundler with Jamon, Robin, and Mazen on this new installment of RNR Explains! It's packed with insights for even the most advanced React Native developers.
This episode is brought to you by Infinite Red! Infinite Red is a premier React Native design and development agency located in the USA. With five years of React Native experience and deep roots in the React Native community (hosts of Chain React and the React Native Newsletter), Infinite Red is the best choice for your next React Native app.
Episode Links
Connect With Us!
---
Quotes you can share on X!
Jed Bartausky:
Welcome back to another episode of the React Native Radio podcast brought to you by spring, the season where allergies may or may not decide to throw a party in your face. Episode 292 RNR explains Metro.
Jamon Holmgren:
Hi everybody. Welcome to another RNR Explains React Native Radio explains. This is a new series where we explain how a particular React native feature works. Usually something fairly specific. We read the docs so you don't have to, but of course you should. Anyway, I'm Jamon. I'm joined today by Robin and Mazen. The hosts of React Native Radio and all of us are from Infinite Red. Infinite Red is a consultancy. We do React native. That's all we do. We're 30 people, we're in the US and Canada and we help companies build React native apps from start to finish. We jump in later if they've already started to build it and they need to really take it to the end. Feel free to check out our website, infinite Red if you want to see if maybe we could help you out. Also, we are the hosts of a React native conference called Chain React.
Chain. React is the only us and the best of course React Native focused conference and it is going to be happening this July. So go get your tickets at chainreactconf.com. Lastly, real quick announcement, react Native Radio is now on YouTube music if you prefer to get your podcasts that way. I even, I use YouTube music all the time. I didn't realize you could get podcasts on YouTube music, but it makes sense. Check it out. We'll put a link in the show notes to React native radio on YouTube music if you want to go subscribe there. Alright, today we are going to be explaining Metro. So Metro is the JavaScript bundler for React native and in fact it was originally called I think the React native Bundler. Robin, why are we doing this episode?
Robin Heinze:
Well, because I've been doing React native for seven years and I didn't know how Metro worked. So I imagine probably a lot of you out there don't either because it just works, it runs in the background, it bundles your stuff and it's just there. It can really get you stuck if something goes wrong with it and you don't understand the basics or what you're looking at. So we decided to help you out and ourselves too.
Jamon Holmgren:
Well, yeah, there you go. And that's the thing in my position, I am not working this stuff every day. I am more in leadership obviously. So when someone was like, Hey Metro, I don't fully understand how it works, I just started thinking to myself, I don't either. I need to start from the basics and just go all the way through it. So this has been a really cool deep dive. I actually did a workshop, I'll talk about that a little bit later, but I want to read something that I was doing some prep for this episode and I was talking to Evan Bacon from Expo, of course our friend Evan, and he gave me this really cool thing. I want to read it and then I want to get your reactions. So this was Evan. Bundling is a really hard problem. The Bundler defines nearly all of modern web innovation.
For example, Next.JS is like 90% Bundler magic. The majority of React native innovation will come from improving the bundler. For example, expo, router, web API, routes server components, the React compiler server actions bundle, splitting all the way down to Sentry reporting and metro is actually fairly challenging to swap out. It's very custom. The expo implementation is essentially becoming a new bundler that's based on metro. So bundling changes assumptions about how you write and load code. So it generally bleeds into the runtime. For example, metro transforms all code with babble. So library authors ship un-transpiled code, making it even harder to swap out bundlers. This is all to say bundling effectively defined Expo Router, parts of it leak into the larger expo package. So I want you to react to what he said there. That's an interesting thing.
Robin Heinze:
It really is. It speaks a lot to where we've gotten to in React native where you'll see new versions come out and a lot of the stuff is new is maybe not as day-to-day as it used to be. And that really comes down to it being a lot of behind the scenes stuff and that is Metro. So it makes a lot of sense and I like how we use the phrase bundle or magic. That's really what it is. The bundler is what allows a React native to be run a command and here's your app. It really is pretty magical. So yeah, I agree with everything you said.
Mazen Chami:
I like the fact that you also highlighted Robin and said Magic because going into, you mentioned you did a workshop Jamon, which we'll talk about later, but I knew nothing about Metro. I was just run a command. It starts up your app and it does some bundling magic for you when it's time to reload your app and that's it. And we take that for granted I guess. And to also hear Evan say extremely challenging to swap out adds a lot more value to it. So as React native developers, I think we just need to pay more attention to it and understand it more because it is like the secret sauce almost.
Robin Heinze:
Yeah, I mean if you're doing a web project, you asked the question at the beginning like, oh, what bundler should we use? Are we going to use Webpack? Are we going to use parcel? Es build has a bundler. I think now it's an option, whereas if you're building React native, it's Metro because they're so intertwined that there's no swapping it out. Yeah,
Mazen Chami:
Unlike like you said, web, there's a lot of options in web, so it's harder, it's almost impossible. Well, very challenging to swap it out for React native. So understanding it and giving it love and hopefully if anyone can give back to Metro, that would also be ideal to keeping it moving forward.
Jamon Holmgren:
And there is also Repack, which is its own thing too from Call Stack. It's based on Webpack, it does not use Metro and it re-implement all of the magic that or it tries to reimplement all the magic that Metro uses, but it does have its trade offs. We're not going to talk about Repack in this episode, but I did want to mention it because Koc has done quite a bit of work to try to make that work, but there are some things that they weren't able to achieve that Metro can do. So you gain a lot of power, but it's hard to make web path fast, things like that. Metro is actually really fast. So let's talk about what Metro is. I think when most people think about Metro, they're thinking about the server, they're thinking about the thing that's running in their terminal, but let's talk about it on the website, which is I think metro bundler.dev, they say that it's three things, but I really think of it as five things.
So the three things they talk about is it's a resolver, a transformer and a serializer. We'll be going into depth on what those three things mean. So don't worry about if you don't understand that, that's fine. All three of those things can be swapped out by the way, you can replace one aspect of it. There's also a CLI and then there's the development server. So those two things also help and yeah, I know the development servers kind of part of the cli, but to me those are the five things that you really need to be thinking about.
Robin Heinze:
I mean the development server is really probably what most of us think of when we think of Metro. Like oh, Metro's running over there. Oh look in the metro logs, that's the development server.
Mazen Chami:
That's what we see at the end of the day.
Jamon Holmgren:
Right now, Rob and Modi and the folks on the metro team at Meta if they're watching this are going to be like, those aren't even the right five things that you need to talk about. That's fine. We can maybe have them on later to go over the more, but this is how I think about it. This is how the user facing the developer facing stuff is Resolver transformer, serializer, CLI and dev server. So talking about that internal workshop I did, so I actually started from without React native at all, start with just metro install Metro, start it up, have a JavaScript file that just has a console log in it and compile it. And then we went in and we looked at the compiled code and I actually felt that was really, really helpful. We got to see sort of the poly fills that it brings in right away. It brings in a lot of poly fills for things like I was
Robin Heinze:
Shocked how much it'll take a one line JavaScript file and the result has all this extra stuff in it. You're like, oh, so that's Metro that's adding all that.
Jamon Holmgren:
Yeah, it's adding all this stuff, but then as you add stuff that is static, it doesn't change. So it's a relatively small part of your bundle eventually, but if you just have a one-liner, yeah, it's going to add a bunch of stuff.
Mazen Chami:
I know in the past before our stack traces kind of got better, I've clicked on an error or something and pulled up this massive file and been like, what is going on here? No clue. Now after doing this workshop, I know exactly, well maybe not. Well Stack traces have gone better, but if it was still like that, I feel like I would understand a little bit better where to look and how they relate to each other. That's right. And spoiler, just scroll to the bottom of the file. You'll figure it out from
Jamon Holmgren:
There. Stuff is down at the bottom and then you can, yeah, it becomes less relevant as you go. There's
Mazen Chami:
A lot of polyflow at the top,
Jamon Holmgren:
But in this particular episode we're going to be talking more about how it relates to React native. It's worth noting that Airbnb, yes, that Airbnb uses Metro but without React native. So they actually use it for web bundling because it's so fast and they like how it
Robin Heinze:
Works. That's really funny. That's just
Mazen Chami:
Full circle
Robin Heinze:
The irony. Some
Jamon Holmgren:
Irony there. Yeah, we're going to talk about configuration briefly and then we'll talk about configuration in conjunction with each of the concepts when we get to that. But you can configure it starting out. You can either create, you can just leave it alone and Metro will kind of have some relatively smart defaults. You can also give it a metro config js or a metro config Jason or metro field in the package. Jason, which is usually my favorite. I like to stuff things into the package Jason and not
Robin Heinze:
Jamon and I have different opinions about this. Is
Jamon Holmgren:
That true? I didn't know that. Did I know that before I
Robin Heinze:
Promoted you to director of engineering? I don't like using JSON period if I can help it.
Mazen Chami:
I don't think you did
Robin Heinze:
My job's in jeopardy. Now
Jamon Holmgren:
I'm thinking mine might be, yeah, so there's different ways to approach that.
Robin Heinze:
It's worth sounding that expo, if you're in an expo project, they have their own default metro config that does a lot of stuff behind the scenes that needs a lot, that expo needs to work with Metro. There's a lot. We took a peek inside that package
Jamon Holmgren:
And it's not even just what expo needs. It's stuff you should probably do anyway. It makes it better. It makes Metro a lot better, right,
Robin Heinze:
Exactly.
Jamon Holmgren:
But you can't just be like, I'm going to expo fify my metro config if you're not using expo because there's some stuff that, anyway, yeah, it's not quite that simple. I asked Evan, I was like, Hey, can we just have a better metro config? And he's like, that's when he actually gave me that quote that I read earlier. There's general options like where's your cache directory, what's a path to the transformer, the root directory, some of the things like that. And we'll talk about the individual things like resolver transformer, serializer and the server options as well. As we get into this, let's talk about the resolver. So let's talk about the resolver. What is the resolver robin?
Robin Heinze:
So I have this mental model in my head of the parts of metro that actually came from me asking chat GPT to explain like I'm five what metro bundler is and chat GPT used a Lego example. So I like it in the Lego metaphor. The resolver is the part that goes and finds all of the Legos from around your house. So you're trying to build this Lego thing, so you need to go find all the Legos that you have.
Jamon Holmgren:
So you know what that reminds me of? Actually that reminds me of my little brothers. I have five little brothers. Well they're not so little anymore. Most of 'em are taller than me, but at the time they were little because I am five years older than the next one down and then there's five of them. But I'd be trying to sleep in the morning and they would be rummaging through the Lego box and it'd just be the loudest possible
Robin Heinze:
Thing. Just
Jamon Holmgren:
So loud. Everybody knows
Robin Heinze:
That's the loudest thing.
Jamon Holmgren:
Exactly. That's the resolver my brother Blair looking for that one particular thing that he can't find in a thousand Legos. Yeah. Anyway, go ahead.
Robin Heinze:
So in terms of your actual code, the Resolver finds all of the code that's necessary for your project, including all of your node modules and packages and the code in your actual project directory, the stuff you want to include and the stuff you is, there's stuff that does not get included in your bundle like configuration, whatever. And so this is what it's finding all the different pieces of code that it's going to end up bundling together is and explain I'm five way of saying it. Yeah,
Jamon Holmgren:
I like it. I like that explanation. That makes sense. It's building dependency tree, which yeah, it puts numbers in the actual bundle. When you look at it afterward you see like, okay, we're talking to react developers here, so I'm going to explain using use effect how use effect has the dependency array at the bottom, that last option, it's doing the same thing for your modules, but it's just giving a number at the bottom. It's like this depends on module 14 and 57 and 98, but right before that is a number. Before that I raised a number and that's the number of this module. So module 14 would start with 14 and then it would have its own dependencies and module 57 would have its
Robin Heinze:
Own, which is how you end up with circular dependencies. So I'm module 15 and then module 15 is also in my dependency array. That's a circular dependency,
Jamon Holmgren:
That's a problem. And the platform specific extensions deserves a call out for sure because you have the iOS js, the android js, the web js, the native, I don't know exactly. There's a lot of different options. I don't think I've seen that in other bundlers that seems to be unique to Metro unless I'm missing something obvious.
Robin Heinze:
It also has the iOS asset extensions where you specify the size at two x at three x it strips, it figures out which is the correct one for your device and strips out the two x or three x and then serves up the correct version of your asset, which is just insanely cool.
Jamon Holmgren:
Yeah, yeah, it's very practical. It's very practical. So what configuration options do we have?
Robin Heinze:
So this is where you would specify, you may have encountered this if you have a lot of different kind of assets or images that you're managing in your project. By default jpeg and p and g and stuff are supported, but if you ever had weird image formats and you had to go into metro config and add HEIC or whatever weird extensions, you probably did this in the resolver section of your metro config because you're telling it what files to look for.
Jamon Holmgren:
Yeah, there's also the new experimental links there because again, we're trying to find files and if you're trying to find files, that's SIM links, that's exactly it. And if you're setting up a monorepo, you're probably going to be spending a lot of time in the resolver as well.
Mazen Chami:
Good luck. Yes, best of
Jamon Holmgren:
Luck. Alright Mazen, I'm going to put you on the spot. What is the transformer part of
Mazen Chami:
This similar to transformers and how they change from a car to a machine? Transformer part of metro will kind of adapt or change the code based on the environment JavaScript environment that you're in. So we talk about JSC or Hermes, there's a lot of code changing. I'm going to try and use a different word than transformer code change that needs to happen to get it to work in that. Right? How
Robin Heinze:
Many times can you use the word transform when it's explain what a transformer
Mazen Chami:
Should pull up my synonym dictionary. But for example in Hermes we can't have class-based syntax. So this is a scenario where Metro will find out that our environment is Hermes and we need to change our classes to non-class syntax so that it is compatible and Hermes can compute and do what it needs to do to get things going. Another thing, I don't know if you really mentioned this, but nice thing about Metro is you can add stuff on top of it. So one thing that people probably have that don't think about much is babble
Jamon Holmgren:
Is
Mazen Chami:
Essentially hand in hand with metro working with metro. So the transforming happens with babble unless you know, can specify something else if you'd like to but babble you add your plugin on top and it'll transform it for you and it works again. Magic. Yeah.
Jamon Holmgren:
I actually asked the metro team why they use babble to transform because they could write their own right and they've written their own bundle or why not And Modi essentially just kind of shrugged and I was like, because it works and we take prs if you have something better. I don't think Babel's going anywhere. It really seems like it's doing the job. I mean maybe something will come out, especially if maybe there was some really fast babble alternative that used the same. You could use all the same babble plugins and stuff. That'd be cool because there's just such a huge babble ecosystem. So many people have written plugins.
Mazen Chami:
I think babble not only is we talked Metro React native Babbel is not necessarily just react native. I think BA's also,
Robin Heinze:
Oh
Mazen Chami:
No, definitely not everywhere. It's all over the place in the JavaScript environment in general. Yeah, so it's perfect tool.
Jamon Holmgren:
I remember when it came out it was five, it was called five to six because it was ES five to ES six originally
Mazen Chami:
Way back in the I knew of five to, I didn't know if that was Babel.
Jamon Holmgren:
Yeah, yeah, that was the original version.
Robin Heinze:
I'm always a little envious when people say they were around for when stuff came out because that just
Jamon Holmgren:
Means we're old.
Robin Heinze:
That's all you underestimate. No, because you underestimate how important it is to have the context of what things were like before and what problem it solved.
Jamon Holmgren:
Well a lot of us used coffee script and that was transformed. That was compiled.
Robin Heinze:
My god, I remember coffee script.
Jamon Holmgren:
Yeah, I mean that was a rails dev. The
Robin Heinze:
Rails loved coffee script. Oh yeah. But I still like me honestly years to really grok what Babel was and what it was doing because I came into this from being a backend dev, didn't really do JavaScript and so there's this thing called Babel that every once in a while gives me really incomprehensible errors that ruined my day, but I didn't really understand what Babel was, why it's there. I have to do plugins sometimes. It took me a long time to really understand what it was doing.
Mazen Chami:
Do you guys hear that? It sounds like we need a Babel episode.
Jamon Holmgren:
We do. We do. I just realized I misnamed it. It's actually six to five and that makes way more sense. You would write six and it would backwards compile
Robin Heinze:
It to five, right? You write the modern stuff.
Jamon Holmgren:
People are screaming at the screen right now or the podcast. It's not five to six. I'm really sorry I misremembered it's
Robin Heinze:
Six to five. That's really the essence of it though is it lets you write modern with modern language. You know how a language will add some sort of cool new array method that does something fancy that's a modern feature, but you can't guarantee that your browser or whatever your JavaScript engine is knows how to run that. So you have to transform it to the lowest common denominator basically. Yeah,
Jamon Holmgren:
That's right. So
Robin Heinze:
Yeah, that's what the transformer does.
Jamon Holmgren:
Metro also has a transformer cache and talk a little bit about that zen.
Mazen Chami:
Yeah, so I think out of all of this that we're going to talk about transforming takes the longest time as you can imagine, there's a lot of parsing and figuring out what to transform and how to transform it. So since it takes the longest time, kind of fun fact, meta uses their remote cash so they share it among everyone so that it's already transformed and everyone can essentially use it. So I
Robin Heinze:
Didn't
Mazen Chami:
Know that it gives you the ability to have a cash for your transforms just so you're saving time, which can be helpful, right? We're talking about meta they have, we can only imagine how big their app is and why they need
Robin Heinze:
This. They have the ability to have developers whose entire job it is just to work on the metro remote cash.
Mazen Chami:
Exactly. For most of us, most of the listeners, and I think for us, most of the clients, this won't become an issue. But I think as you get into bundle splitting and more advanced stuff like that where you will need to do this, it's an option. Just know that. And I think the last thing is the configurations. There's a bunch of configurations for the transformer. You can tell it how to transform the code. So my understanding is right, you can tell it ES six to five, see what I did there. There's stuff like metro babble transformer. I think that's the most prevalent known package to do the transforming there. You'd specify dev mode or not here. And then this is how you let it know that it can do inline requires
Robin Heinze:
Which expo does not recommend using
Jamon Holmgren:
I think because it can lead to some pretty subtle bug. It's actually not even just expo. So expo doesn't turn it on by default. React native does, but they kind of regret it. They kind of regret turning that on because it does introduce some subtle bugs when you do inline requires there's certain inline requires that certain requires it can inline and others it can't because when you inline require packages with side effects, so as an example of this, something that polyfills like a polyfill, like you import it and it adds something to some sort of support that can actually introduce subtle bugs because it changes the load order of when things are loaded and so inline requires can really speed up your initial load and everything.
Robin Heinze:
Use it with caution,
Jamon Holmgren:
Use it with caution though. If you start ending up with some weird behavior, it's
Robin Heinze:
Try turning off inline with
Jamon Holmgren:
That and see what happens. Yeah, so once it's been transformed or once you've done the resolution, you've got the dependency tree, you've got all your Legos and then you do your transform, which is you're kind of building all of the maybe individual parts that are in the thing you're trying to build and you have to put it all together into one thing and that's what the serializer does. So it will combine all of the modules into, it'll take all of the transform modules and it will put all of those things in one JavaScript file and it's not just a matter of concatenating together like a string, otherwise they wouldn't have this be its own module. There's more to this, but you can do some polyfills here as far as what polyfills are included. Depending on the target, like we said, it may or may not be like Hermes has a different capabilities than like JSC as well as web. Let's say you were just deploying it to web, then you would maybe have some different options there. And then there's also a configuration option, which is third party module. Do you know what that is?
Robin Heinze:
So it's in the docs and I thought this one was super interesting. It's an option which helps support a Google feature called just MyCode. So when you're running it, you can select this option. That's just my code when you're debugging and it will emit anything that is a third party module. So this just is an option that you set if you're releasing a package that says this is a third party module, so emit this when the user says I just want my code. But I thought that was interesting, that was part of the serializer.
Mazen Chami:
I wonder if that's part of the whole peer dependencies part where it'll strip all that out to kind of slim down your package sort of
Robin Heinze:
Thing. Yeah, that was one of the serializer options.
Jamon Holmgren:
The serializer I think is also at the point where you can do things like tree shaking and whatnot. However, tree shaking is actually very hard in React native. It's not a super easy thing to do. There are some really cool things potentially coming out by the time this podcast lands that or maybe probably a little bit after that will help you identify stuff. Dead code basically things that are being included that shouldn't tree shaking is where it would take functions that don't ever get accessed and just deletes those from your bundle and that can reduce your bundle size. But it's an imprecise art and there's a lot of nuance to this because the JavaScript semantics don't make this easy. You can run methods with a variable string that gets you access the function on the object through a string that's really hard to statically analyze. So because of that it's not a real easy thing to do, but that's kind of during that process because that's the only point where you really have everything altogether at once. Let's also talk about the CLI. So when you run React native start or expo start, that's when you're running the CLIA lot of times and that can do things like build your app, obviously you can start the
Mazen Chami:
Server bundle
Jamon Holmgren:
It or you can run the server and we'll talk about the server in a bit, but there's also another option called get dependencies, get dash dependencies. And that will actually list all of the dependencies that would be bundled for a given entry point. So that's really just running the resolver and saying what's the graph of everything? Well, it's not the whole graph, it's just a list, but what is a list of everything that would be pulled into this particular entry point? And what's cool about that is you can debug some issues where maybe some development files are getting pulled in that you're like, why are development files being pulled in that shouldn't be there? Maybe there's a spare require somewhere that should go away. So that's a pretty cool thing. Then the developments are, so this is what you often think about when you're thinking about Metro. If someone says restart metro, it's like restart your server. So what are some options that you can do with the development server?
Robin Heinze:
My personal favorite is passing Reset cache basically every time I run the server, which
Mazen Chami:
Everyone should do. I think it's helpful.
Robin Heinze:
It doesn't. I
Jamon Holmgren:
Think a lot of times the people that, of course nobody in this room, the people
Mazen Chami:
That I'll wait for you to finish do this.
Jamon Holmgren:
It's almost
Robin Heinze:
About
Jamon Holmgren:
Is really not based on anything real. It's more like if I,
Robin Heinze:
It's superstitious. It's like throwing the salt over your shoulder.
Jamon Holmgren:
Yeah, it's like if I tap the outside of the plane as I'm getting into it, it won't ever crash type of thing. That's what it feels
Robin Heinze:
Like. It's probably not necessary, but you can pass reset cash to the start command of your metro server.
Jamon Holmgren:
Imagine working at Meta and resetting their entire cache for everybody across the entire organization
Robin Heinze:
And work at Meta. Do you mean I know,
Mazen Chami:
Well this actually reminds me, when we were doing the workshop Jam, we ran into an issue where you had to, if you were making an update to a file down the tree, we never saw it apply after you ran the build command and then ran the server and we realized that was because the entry file was not changed. So my guess is reset cash will do something along those lines where it'll kind of delete everything and then bring it back. Or similarly, I found this command on their website where you just, it's like RMRF. Yeah, pseudo. RMRF. Some
Robin Heinze:
Random temp directory
Mazen Chami:
Metro. Yeah, it killed everything. Oh, my computer was flying after the fact, so it must have been deleted a lot of stuff. So yeah, so resetting your cash can be helpful at times
Robin Heinze:
I think it's less helpful than it used to be. Maybe I feel like it used to if I was just having weird issues with packages not being picked up, resetting the cash would help and I feel like it hasn't been, it's not really necessary anymore. I think I remember someone from Meta actually saying it doesn't do anything or it doesn't do anything that you think it's doing.
Jamon Holmgren:
It doesn't do what you think. It's you
Robin Heinze:
Superstition. You just really need to start kill your server and start it again. You don't need to reset the cache. You
Mazen Chami:
Always have to put your right sock on first, then your left sock and then reset. Cache done.
Jamon Holmgren:
Mazen, did you have any superstitions when you were playing soccer?
Mazen Chami:
Oh, how much time do you have? I still have superstitions now. I played a game yesterday and I went through all my
Jamon Holmgren:
Whole, you have to go through your routine. It's really more about getting the mindset and maybe that's what reset cash is, but you know what? It's mental.
Robin Heinze:
I'll tell you it's mental.
Jamon Holmgren:
The cash is what makes Metro fast. It's not running babble on everything, every load, it's just running it on whatever's changed. It also resets by the way, your file map cache, which is like where are the files I need to watch? And Watchman comes into that as well. Honorable mentions. Our next kit has their own versions of, I think most of the stuff like Resolver, et cetera, they have added their own functionality to it. They have, for example, a metro Serializer ES build that supports ES build's level of tree shaking, which is not particularly great. It's not magic. It's
Mazen Chami:
Also in beta, right? It's still early in the process.
Jamon Holmgren:
So this was kind of funny while we were
Robin Heinze:
Investigating this. I'm already laughing. I know the story you're about to tell,
Jamon Holmgren:
Right? We're looking through the docs and I see this note and it's like, Hey, just FYI, there can be this issue if you're trying to use this, here's what happens and here's a link to an issue that kind of explains more about it. I was like, this is really cool that they took the time to update their docs. So the link to an issue that kind of explains what a common problem would be, click through to the issue. I was the author of the issue. I created that issue two years ago. I didn't remember it. I didn't remember doing this, apparently I tried to implement
Robin Heinze:
It. It was so funny. What was even better is that this happened after you said something like, oh man, we should really try this out in Ignite. I don't think I've ever tried this before. And then it turns out you did try it at Ignite two years
Jamon Holmgren:
Ago. I ran into problems and I found with an
Robin Heinze:
Issue, issue problem,
Jamon Holmgren:
And they put it in the docs and there you
Mazen Chami:
Go
Jamon Holmgren:
And full
Robin Heinze:
Circle and you came out to the exact same issue. Do it again.
Jamon Holmgren:
You know what, in two years I'm sure I'm going to go back and see that again completely. I haven't
Robin Heinze:
Forgotten
Jamon Holmgren:
About
Robin Heinze:
It. Set a reminder 2026
Jamon Holmgren:
Every time.
Mazen Chami:
I think the main takeaway of our next kit is even don't get too excited about tree shaking. It's not good yet. It's still working. A lot of limitations. So I think just hold on, tree shaking is coming soon and when it does come, it'll be worth the
Jamon Holmgren:
Wait. Yeah. Yeah, I hope so. And then there's additional tools as well that will let us kind of slim down our bundle size. Really, tree shaking helps the best with things like big icons and things like that. So that's really where it can really be beneficial. Expo Bundler, another honorable mention, well, we did talk about this, but it has a ton of improvements baked in. It is even just out of the box, much better than Metro, faster than Metro, just more efficient than Metro. So keep that in mind. Expo brings a lot of improvements that you're not aware of. I mean, Evan's spending a tremendous amount of his time on the Bundler making the Bundler better and there are some upstream prs as well to Metro
Robin Heinze:
Side Note, I recently got a chance to try out Expo router on a pretty big client project and being able to use Metro as my web bundler. Really nice.
Jamon Holmgren:
Really nice.
Robin Heinze:
It works really well and it's so much nicer than Webpac, so if you get a chance to do that,
Jamon Holmgren:
It is nicer than Webpac. That's not a hard thing to do. I don't know why we crap all over web pack.
Mazen Chami:
Low bar.
Robin Heinze:
Sorry, web
Jamon Holmgren:
Pack. That's true. Alright, well that's all the time we have today. I will say if you have any topic ideas, shoot, this went a lot longer than we expected. Again, we always run into this with these r and r explains, but if you have something like this that you want us to deep dive even something that was specifically mentioned here, I know Robin talked about Babel, just send it to us. You can go to React native R dio on Twitter and you can also email us Rrn radio at Infinite Red. It goes to all three of us and we will see it and we will consider it for a future episode. Really appreciate that. That is it for this episode. Robin, do you have a mom joke?
Mazen Chami:
Oh, they get to see us cringe now too. I
Robin Heinze:
Do. All right. This joke is courtesy of Carlin Isaacson who is frequently featured. He's our joke master. Alright. I asked my friend Sam to sing a song about an iPhone, but then Samsung.
Jamon Holmgren:
Samsung.
Mazen Chami:
That's a good one.
Jamon Holmgren:
That is a good one. See you all next time.
Robin Heinze:
Bye.
Jed Bartausky:
As always, thanks to our team with editor Todd Werth, our assistant editor and episode release coordinator. Yours truly, Jed Bartausky, our director of marketing, Justin Huskey and our guest coordinator, Derek Greenberg. Our producer and host is Jamon Holmgren and executive producers and hosts are Robin Heinze and Mazen Chami. Thanks to our sponsor, infinite Red. Check us out at Infinite Red slash React native. A special thanks to all of you listening today. Make sure to subscribe to React Native Radio wherever you get your podcasts.