Jed Bartausky:

Welcome back to another episode of the React Native Radio Podcast. Brought to you by the Air Quality Index, the only leaderboard you don't want to top. Looking at you, Washington State. Episode 369. RNR Explains: AppRegistry.

Robin Heinze:

Welcome back everyone to another episode of React Native Radio, specifically another episode of RNR Explains. Of course, I'm Robin. I'm director of engineering at Infinite Red, and I'm sitting here again with lovely Tyler. Hello. Tyler, if folks don't remember, can you remind everyone who you are and what you do and why you're here?

Tyler Williams:

Yeah, you'll recognize me. Maybe now you'll recognize me from RNR Explains, but mostly I am a staff software engineer here at Infinite Red, building React Native and Expo apps. And I do periodically edit the podcast as well. So happy to be—

Robin Heinze:

You say periodically. I'm pretty sure it's every—

Tyler Williams:

That's true. Well, it's on a weekly period.

Robin Heinze:

It's quite consistent. You do quite well at it.

Tyler Williams:

That's the period of time that I edit the podcast is every week.

Robin Heinze:

Yes. Periodically.

Tyler Williams:

Yeah. Well, I think you'll be pulling that shift soon enough, so it will—

Robin Heinze:

Be periodic maybe. Yes. It sounds like what's going to happen. So I'm excited to learn all of the fun things about audio editing from the pros. All right. Yes, we're doing another episode of RNR Explains, which if you haven't tuned into one before, it's a bite-sized episode where we, quote, "Read the docs so you don't have to, but please read the docs." This is not an excuse to not read them, but maybe it will help you understand them in a way that you maybe couldn't before. Yeah, we love doing these. It's a good chance to go find something in the docs that maybe we use all the time or have never used, but would love to understand a little bit more. So yeah, before we tell you what the topic is and get into it, let's hear from our sponsor.

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.

Tyler Williams:

Wow, what a great sponsor read.

Robin Heinze:

So, so great. Perfect. Love—

Tyler Williams:

Hearing it through my headphones.

Robin Heinze:

Perfect diction.

Tyler Williams:

We stitch it together live.

Robin Heinze:

For our listeners who've been with us for a long time, you probably—I don't know if people know that we have traditionally done the ad reads completely live during the episode recording. We more recently switched to doing them separately, which I think is more standard in the podcast world. It allows for more flexibility of messaging and stuff. But for a long time we just did it live and it was fun. It was sort of part of our thing, but now we let Jed have his time to shine. But what are we explaining today? AppRegistry. I know some of you might be thinking, AppRegistry? What? That's what—

Tyler Williams:

I thought.

Robin Heinze:

Oh, that's what I thought.

Tyler Williams:

Jinx. I hope the audio's lined up well enough so people know that we did in fact say this.

Robin Heinze:

We literally said that at the same time.

Tyler Williams:

Yeah, Robin sent me the list of these and I was like, I don't know about that one.

Robin Heinze:

That doesn't sound very interesting. You might think that, but I mean, so okay, here at Infinite Red, we for a long time have done things to sort of make the setup of a new app much more quick. We use our Ignite boilerplate. I think this probably is even actually generated just from a bare React Native init. It's not something you would ever actually type manually.

Tyler Williams:

And if you're doing Expo, if you've seen registerRootComponent, this gets used under the hood there. So it ends up in templates, Ignite, the Community CLI, Expo. You're almost never going to type it out.

Robin Heinze:

People gloss over it because it's not something you use in your app. It's something that is used just to define to the native app what component the native app needs to render, essentially. It would say it's probably in your index.js or your App.js maybe. It just says AppRegistry.registerComponent, the name of your app, and then a headless function that returns the actual component that is the highest level component of your app, has everything else inside of it. And so you're probably thinking like, okay, so that's what it is. What else is the rest of this episode going to be about? So if you read the docs, it actually has a ton of methods on it. It's not just registerComponent. There's a bunch of other stuff, and they do solve real problems. I think if you have built a brownfield app, you're probably already familiar with all the things that the AppRegistry does.

That's the domain where it's most often used, but there's some other things too. So let's start with registerRunnable. What does that do, Tyler?

Tyler Williams:

So registerRunnable takes an app key and then a JavaScript function rather than a functional component. I mean, it does actually. So registerRunnable is the thing that registerComponent is built on top of. So it takes a function which can be a React component, but we'll ignore that for now.

Robin Heinze:

Interesting. Okay. It's the more fundamental version of registerComponent.

Tyler Williams:

Right. But again, you wouldn't call it. Inasmuch as you wouldn't call registerComponent, you even more wouldn't call registerRunnable unless you had some sort of JS logic you wanted to run as the app entry point. If you were doing end-to-end test runners or a launcher that decides what to render. It is just a way for you to essentially register what is this app and what does it do as defined as JavaScript rather than native code?

Robin Heinze:

So there's this concept of a super app architecture that I've heard about where it's like it's one app, but then it has a bunch of different React Native apps inside of it. So this would be something you'd run. It would run logic to figure out, okay, which app am I actually mounting right now? So it's just a way to run JavaScript logic without needing to return a component, essentially. Notably, it's also what you have to use on iOS if you want to do a headless task, which we'll talk about in a second because that's only on Android. Okay, so the next one is getAppKeys, and that just returns all of the different keys that have been registered. This is most relevant to brownfield applications. So I worked on a client one time that did a brownfield app, and they had four different screens within their native application that ran different things.

The profile screen was one, the edit your address screen. Yeah, small screens, but there was four of them, and they each had a key. And so getAppKeys just returns the different ones that you have available to you.

Tyler Williams:

Almost like in the web, you do this less frequently these days, but early React days and early Vue.js days, you would sprinkle in different individual Vue or React apps inside of your existing website, right?

Robin Heinze:

Notably, also, if your app has a share extension or a widget or an app clip, one of these extra add-ons, they will be registered as their own process. And so they'll need their own key that will be called with the AppRegistry, which I didn't know. Nice.

Tyler Williams:

I also—you did some research here. This gets used on React Native Windows and macOS for different components for different windows and stuff too. So I haven't seen that.

Robin Heinze:

If you have a desktop app that pops open a different window that's running stuff, that's actually its own thing that needs to be registered with AppRegistry. And so it'll have its own key.

Tyler Williams:

Up next, there's runApplication, which takes that app key and then some parameters. This is also something that both you probably don't write yourself. And also, I don't think it shows up in the template really so much. This is just what it uses to actually run the app, but it does exist as part of the—

Robin Heinze:

Update. You would need to know about this if you were maybe writing a native package or something. Right,

Tyler Williams:

Right. Or if you're trying to orchestrate—

Robin Heinze:

Or editing React Native internals.

Tyler Williams:

Right.

Robin Heinze:

But yeah.

Tyler Williams:

Right. The next one is a little more useful, probably one that people have actually used or come closer to.

Robin Heinze:

You might actually have this in your app when you don't even realize it.

Tyler Williams:

Which is registerHeadlessTask. And this is what actually lets you run JavaScript code in the background on Android without any UI. So if you've done any of the Expo background task packages, I think this is what's running under the hood. Should double-check on the code. But if you've got a driver app like DoorDash or Uber, you could use this to continuously send GPS coordinates even when the app is backgrounded. Anything is—

Robin Heinze:

Which it should be while they're driving. Right. I hope so.

Tyler Williams:

I don't think that's what they do in practice, unfortunately. And then you can also do it in chat apps if you wanted to process incoming messages in the background before a user opens the app to make sure that the inbox is populated. Anything you want to do in that background without having the UI layer. React Native Firebase registers a headless task for onBackgroundMessage. And we mentioned earlier, Robin said that you have to use registerRunnable for iOS because again, this registerHeadlessTask is Android only. But—

Robin Heinze:

If you're using React Native Firebase and probably other push notification libraries too, I would imagine, you're probably already using this without knowing it because this is what it uses to do background messages. All right, then we have startHeadlessTask, which is related. It's just the thing that native uses to kick off a headless task that we have registered. And then lastly, this one is cool: setWrapperComponentProvider. So if you're doing brownfield apps, you've most likely used this quite a lot. It just wraps every registered component with a provider component. So if you have four brownfield apps, but they all need to use the same Redux store or theme provider or whatever, this just makes it easy to wrap everything with the same one so that it can share state or context or theme or whatever it needs to share. Yeah,

Tyler Williams:

That one's very cool to me. I'd like to see how that works under the hood.

Robin Heinze:

Right? Yeah. I've done only a little bit of brownfield work in the past, and so this was a nice refresher for me about how that works. All right. I mean, that's kind of it, but it's actually really cool to know more about this thing that you literally put in every app you've ever made and you're like, "Oh, it actually does more than I thought."

Tyler Williams:

I think this is a good example of it's interesting to read the docs even for stuff you use every day because there's plenty of stuff that you probably don't think about. And you may not really need to use, but it's cool to know that it's there and that there's a resource out there where you can go read all of the details.

Robin Heinze:

I have found that it's really fun to read the docs when I'm not trying to do anything.

Tyler Williams:

Find one specific thing. Right.

Robin Heinze:

Because if I'm trying to build something and I'm just reading it to find what I need, and I just skim over everything else, and it's stressful to pause and read anything else because you're like, "I don't have time for this. I need to just get what I need and get out." And it's fun to just be like, "Okay, no, my entire responsibility today is just—Reading this. Reading this and learning more about it." So that's our goal here.

Tyler Williams:

Yeah. You'll be faster at recalling that something exists that you might need later on when you hit something that is relevant. I try and read the TypeScript documentation once a year or so, just because there's so much in there. And I find that it helps me navigate faster when I do. And I don't remember all of it, but I don't remember most of it. But when I do need to go and look up something esoteric about TypeScript, I can find that spot a lot faster than I used to be able to.

Robin Heinze:

That's really smart. And if your boss ever says, "Hey, have we thought about maybe doing brownfield React Native?" You can answer confidently like, "I know a little bit more about how that would work." So now you know about AppRegistry. I hope to see you next time.

Tyler Williams:

See you.

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.