React Native with Robin Heinze

Welcome to Syntax. Today, we have a show for you on React Native. It's actually not something we've talked about a whole lot. We talk about React quite a bit on this, this thing this podcast, but we are usually talking about it in regards to building web apps and and going straight to straight to the dom. So React Native is this whole other part of the React world where, quite honestly, I think a lot of your your skill set would apply to. So we've got Robin Hines on. She's a director of engineering at Infinite Red, which is a React Native consulting company, and, she's also the cohost or host of the React Native radio podcast. So we're we're doing a little, switchy switch, little podcast here. Cross summer edition.

Yeah. Yeah. Exactly. Yeah. Crossover. Love it. So, we will also be coming on the React Native Radio as Wes, maybe, to talk a little bit more about web dev. But welcome. Thanks so much for coming on. Yeah. I'm really happy to be here. Thanks for having me. Yeah. It's, it's really exciting to talk React Native. I I did a course on React Native a while ago and have since

completely fallen out of that that sphere. So I have a lot of questions for you. Well, I hopefully have a lot of answers.

Yeah. Yeah.

Yeah. And, you know who else has answers? Sanity has answers for bugs within your Bos and Android apps. That's right. Sentry works with Bos and Android.

Head on over to century.ioforward/ syntax. Sign up and get 2 months for free. Sentry presents this podcast. So, Robin, welcome to the show. Do you want to, 1st and foremost because I think we could assume that there is a handful of people listening who don't know the difference between something like React Native and something like a Wes view, like a Cordova type of platform. Do you maybe wanna give a a quick introduction to React Native and how it's different than just a typical loading up a web view?

It, it's a good question, and it's a really common misunderstanding of of what React Native is. So first and foremost, React Native is native. That's kind of a a really common saying you'll you'll hear, because what it's doing is it's actually taking JavaScript and using it to render native views.

So what you're seeing in your app is, like, UI views. It's like actual native like, what you'd write in Swift or Kotlin. It's just being kind of, like, generated magically for you based on the JavaScript that you write. So it's a very native feeling experience. And pretty much anything you can do in native, you can do in React Native.

You just have to to build the right layer in between.

Yeah. I I remember when it first came out, and and you can tell me if this is still the case, but it's your your business logic looping over things, fetching data, all of that stuff happens in JavaScript on a separate thread. But the actual UI layer, which is the things that you touch and the things that you see, that is not running. Like, there's no divs

or or anything like that in regards to there. Is that is that right? That's correct. Yeah. What you're actually, like, touching and swiping and moving, that's that's all native

components. That's Okay. And what's the what's the benefit of of using React Native over something like like, either somebody going straight direct and writing, like, an Bos app and an Android app or or what other else the the alternatives are? I mean, an Bos engineer or

a Android engineer would probably tell you that there is none.

But we make really, the benefit that you get is from a business perspective.

You can write the same app in half the time.

And when you're iterating on features down the line and maintaining the app, you're doing so with fewer people and less time and with the ability to share things like components or business logic or whatever between your mobile apps and your web apps. So it just introduces this whole ability to share and save time and do things a lot more efficiently without sacrificing the native look and feel because, like Mhmm. What you're getting is ultimately native.

Yeah. So I I think one of the big things that people always hunt for is, like, a a right once deploy everywhere kind of thing. Is is that is that a total fiction? I I know, you know, when you get into it, you do end up going down paths of Android specific components and React specific components.

Is there any hope to the right ones to play everywhere dream? I you know, when you're talking,

like, a a full fledged, like, mature production app, it's of course, it's not gonna be a 100% right once deploy anywhere, But it's pretty dang it's impressively close in our experience. Like, we've built, like, we've built plenty of iOS and Android and then also web apps for big companies. And I'd say, like, we usually achieve, like, 85, 90% completely shared Mhmm. Applications. Oh, wow. That's fine. Unless you're doing something really crazy complex, you're gonna be able to share a ton of what you're writing.

So it's not it's not a 100% write once to play anywhere, but, you know, it's close enough that it's and and, really, anything is better than 0. Right? Like Yeah. Anything is better than right twice. Yeah. Right. Seriously. Yeah. So, I mean, even if we were getting, like, 25, 30%, like, that would be better than 0. And in our experience, it's it's usually way higher than that. So

And what are some apps that people might not know are React Native that are things that are are pretty commonly used?

Oh, there's there's some that we've worked on that we can't talk about, but some that you have probably used that we can talk about and love to talk about. Mercari is one. So if you've used Mercari, it's like, it's like a Facebook Marketplace type of buy from random people.

Mhmm. But it's really big in the US. It's even bigger in Japan. That's a a fully React Native app, and they actually went from, fully native and did a whole React Native rewrite, which we helped them with and actually saw quite a few, like, performance gains. And they didn't they had a 5 star rating, so it was a big it was a big deal that they chose to do a rewrite, and they they have managed to maintain that. Yeah. Mercari is one I'm trying to think who I can talk about that we know of. I think, so I I don't know if you know Node, Evan Bacon. He works for Expo, which is a React native sort of, like, tooling, service. But they did Mhmm. He actually, like, pulled down a bunch of apps from the store and just, like, inspected their binaries to see what packages were installed, to see who JS using Expo and React Sanity, and there's a ton.

Really? Yeah. It's it's, like, 75% of the top apps in the app store or something are using React Native or Expo in some fashion. And what about, like, Twitter and Facebook? Because I know if you inspect element on twitter.com,

there's a lot of random classes and lots of divs, and and the reasoning behind that, same with Facebook, is I we thought, oh, yeah. They're they're using React Native as well or or were at some point. I know Twitter lite

Twitter lite was actually the the reason that React Native for web was created. So if you don't if you're not familiar, React Native for web is a, it's something it's a a package that they built so that you can use the React Native, like, primitives, view, image, all those, to write for web. So it's like it's a layer in between React Native and then the DOM.

So you're writing React you feel like you're writing React Native code. You're importing from React Native, but it's it's rendering to the DOM. And you say, well, why would you do that if you just use React? Well, that's it's because partly because it lets you write for all 3 platforms. It introduces that 3 platform system.

But also because and this is where React TypeScript DOM, which is coming down the pike, actually comes in. React Native for Wes, it sort of limits the subset of the DOM that you can use. So you're not just, like, able to call any, like, HTML tag willy nilly, like, oh, add in a marquee or all those things that we don't want people to be using. It really it really Scott of defines the set the the set of elements that you can use, which was their reasoning for doing it. But now that they're now that it exists, like, we use it all the time to be able to write an app and have it literally have it run on Wes, Bos, and Android. Yeah. We had Node from Tomaguie on, and,

that was my 1st real introduction to oh, wait. React Native Wes isn't weird or scary.

It's actually a a pretty cool platform for even that that kind of dream that we were talking about, the right ones deploy everywhere. I think that's, like, the closest we can get. It's it's a pretty cool thing. You had mentioned Expo a bit of Go. Expo seems to be one of those things that people feel like or or is required. I I'm I'm confused. Do you wanna maybe talk a little bit about what Expo is, and is it something that you need to work in React Native? Or or in these days, is it, you know, a must have?

I mean, it it's technically not a must have, but I we consider it a must have just because it improves the developer experience that much.

Wes what EXO is is a suite of of tools. It's a lot of different things.

But for starters, it's kind of like it's a layer on top of React Native that just gives you a lot of niceties, and sort of papers over some of React Native's rough edges and gives you a much more enjoyable experience for developing.

It also they they have an entire suite of of libraries that they have built and are, like, sort of expo blessed kind of. Mhmm. Things like camera and maps and, like, all the different, like, third party libraries that don't come with React Native core, instead of sort of picking a a a library from the community, which may or may not be good or maintained or whatever.

They have their own, like, very well maintained, well documented packages. And you can actually use those independently if you're not actually using the the primary Expo SDK.

Oh, okay. Yeah. I found that the Expo experience was nice being able so, Wes, if you haven't used it, one of the cool things you can do is you download the Expo app onto your phone, and then you scan a QR code, and then it loads up your native app on your device without having to actually, like, you know, connect to it, via cable or do any of that wonkiness or install it any specific way. It just makes debugging, especially getting up and running really early Yeah. Or really quick. So you said you do use it on on most to all projects? Yeah. Yeah. We a couple

Yarn ago, we sort of made the switch and started using Expo on all of our projects. Expo, it's it's kind of had an evolution.

There's still people even in the React Native world that don't totally understand what Expo has become because what it used to be was basically a tool that made it easy to build, like, a one off, like, POC or starter app or something. Yeah. It had very limited capabilities when it came to native libraries and extra stuff. And so people felt like, oh, this is just like a tool for novices or something that you wouldn't actually use for a serious app. And it still kind of has that reputation even though it's evolved a lot beyond beyond what it was in its early days.

And it has all these systems now for they call it, continuous native generation, c n g, which means that the, the Bos and Android directories, which are the actual, like, native apps that run on your devices, are generated, like, on on demand, basically. Mhmm. Based on what you you can, like you have this whole big configuration file, and you can define all the different things that you want in your in your native configuration, then it'll generate it on the fly Wow. Which is a change from the early days where you just had that Expo app like you mentioned. And, like, that was a very static set of native packages, and you couldn't change it.

But now you have full control over what native packages are installed and how everything's configured.

So you can do those really complex mature production level

applications using Expo the whole way the whole way along. Yeah. This site this site in the docs really make this look a lot more mature. I mean, it always looked good. When they came out, the docs look good. But this looks like a lot different than what I remember in a very positive way. It's come it's come a long way.

And like you said, they expo is really great for making it easy to to do builds even if you don't have a full native environment on your machine.

Yeah. How does that work? Like, do you need a Mac to build an Bos app?

So with expo, you don't. I mean, everyone on our team does because Yeah. Yeah. But you don't best. Yeah. You don't have to, because of the way they they first of all, they have this whole EAS, which is XPEL application Vercel. But it's a service where they do a bunch of builds on the cloud, and then you can basically scan a QR code with your phone to to download a development build.

So a build pointing to a development server that's live. So you can do your native development or your local development on a device that's pointing to a server running in the cloud. Mhmm. And you don't need it actually running on your machine. It's wild.

Oh, okay. Is that what like, Google's IDX came out a couple of months ago, and they're like, we have native Bos previews. And I was like, how how are they doing that? Or is that what they're using? Do you know? I don't know specifically, but it wouldn't surprise me. It's probably what it is. They're not they don't have a farm of of Ios. No. No. They don't have a farm. Yeah. Pointed at them. Yeah. Oh, man. Okay. So I'm trying to understand, and just, like, put out the picture for anyone listening. It's like, alright. I'm a JavaScript developer. I'd love to build a a native application. Right? So we talked about there's packages that that are sort of bridges to the native API, so you wanna use native mapping. You can still control it with your JavaScript, but whatnot.

I'm thinking about, like alright. I started it up. I got expo.

One of the first things I do when I'm building an app on the web is I have a router. Right? Like, it's different endpoints because I have is that an idea in React Native? Is there a URL that changes when you when you go from tab to tab?

So it's that's actually not an easy question to answer, because it's it's it the answer used to be no. Okay. We use a a library called React navigation, and it's not your like, it's not a URL. It's just, like, sort of, like, screens layered on top of each other. So you'll have what are called stacks. So you'll have say you have, like, tabs at the bottom. Like, each tab will be, like, a stack. So if you have, like, your profile tab, you go to the profile stack. And then there's, like, maybe screens behind that, like, edit and create and bunch of related screens in that stack. And you kind of just, like, put screens onto the stack or take them off to go back. And it's a very, like, physical analogy, but it was not URL based. Until recently, Expo specifically, a guy named Evan Bacon at Expo has been really involved in this. He's been on our show a couple times, but he's come up with this package called Expo router, which is actually built on top of React navigation.

But it adds a URL based navigation system, which means that it maps 1 to 1 with a web application if you're building them at the same time. So you can use a URL and go to it on your website, and it will if you have your app installed and you've set up all of the deep linking configuration that you need, it will go into your app to that page, to that record with whatever, like, query string stuff you've added based on the URL, and it will actually navigate based on URL. And it it's still pretty new.

I've tried it out a couple times. It it's pretty cool, but it's still, like, kind of in that beta feeling

phase. How do how do native apps normally if you're not using, like, a URL like, that's all I know in my life. How do how do native apps normally say, oh, I need to bring you to this screen? You you literally have, like, a a listener.

So you'll deep link into the app, and there'll be a listener that figures out what URL was was called. And then you have some sort of long nested configuration that says, like, okay. If this is your the URL, parse that, get the thing, and then, like, navigate to this screen with this parameter. Like, it's it's all very manual what's going on behind this scene. Does that use something called deep links? Is that related here? Okay. Yeah. Of course. The word deep links. That's as far as what what me what what deep linking means Okay. Is is going opening a native app and then going several screens inside.

Mhmm.

And if I have a bunch of React hooks that I've written and maybe a couple React, packages that have npm installed, Which ones of those am I able to use? Is this anything that touches the DOM is is kinda offside. You're not allowed to use it, but anything that's just logic in terms of, like, state and effects and all that good stuff? Oh, yeah. Yeah. Anything that's that's not,

like, rendering UI components that would be using the DOM is totally is totally fair game. Because I mean, it the React layer is the same.

So, like, we we use all the same hooks, like, use state, use effect, all those.

Yeah. The UI is kind of where it diverges the most.

Wes, let's talk about that then. So you want to make a UI, and that's the point where you diverge from unwriting JavaScript. I'm comfortable with it.

Now I need to make a button. I need to make a layout. I need to, put this image in a specific thing, and that's when you sort of realize, oh, these are not DOM nodes. Mhmm. These are native Node. Like right? That's that's the whole point.

So, like, what do you do? Like, can you use CSS?

So React Native does not use CSS at all. It actually uses its own UI engine. It's called Deno.

But, ultimately, it's it's sort of a variation of CSS Flexbox. It's it's not quite the same as CSS Flight, but it's, like, based on Flex.

And it's just every component is past a style object.

Nothing is cascading, which I I love.

I'm not a fan of cascading anything.

So it's all very declarative. Like, this component gets this style. Nothing's inherited.

And, yeah, it's all it's it would be familiar to you if if you know CSS, but it's slightly different.

Yeah. There's enough little weird things. But, like, if you know if you're good at Flexbox, you'll be good at laying out. You'll be you'll be right at home.

Yeah. I think one of the weirder things is that I think the default

flex direction is Is a, Yeah. Column instead of row. Yeah. That's true. Which makes sense if you're talking about like, because you're talking about mobile Mhmm. Which is a vertical screen. Right? So it makes sense that you would default to having things go into a column. And I I was never truly a a web developer before I started React Native. I was a back end developer. And so it's just normal to me that column is the default.

Yeah.

Oh, that's great. That that's all you know. So if you're writing styles for this type of thing, you're either writing yoga directly or do React Native Wes and Temagui sit on top of yoga? Like, do they translate to either CSS or yoga?

I don't a 100% know, but I React Native for web. Yeah. You use React Native styles, and I'm guessing it translates to CSS. CSS equivalent. Okay. Yeah. Both. But we we use React Native styles, which stick for consistency.

Yeah. Yeah. And and so when when you have a a React Native app and you're doing sort of just normal styling on it, how does that work between Android and Bos? Do the platforms take over a little bit of the styling themselves?

The platforms basically do what you tell them.

You do have to sometimes, take into account different UI patterns on the platforms. I mean, like, if you wanna make your 2 apps exactly the same, you can absolutely do that. I mean, that's that would be what would happen by default if you just made an app without without separating the 2. But there are UI patterns that Android users and Bos users expect from their apps. Yeah.

Like, things like like Android.

The headers are usually left justified instead of centered and and things like that. Like, where where buttons are placed. Like, there's slight differences like that. And if you wanna be really pure about about adhering to those platform differences, yeah, you you're gonna have to have some conditionals, in place because it's the styles are just gonna be they're gonna do what you tell them to do. There's not anything that Android's gonna do differently automatically.

Interesting. Did did I hear that React Native was introducing their own JavaScript ESLint, or they had built their own JavaScript engine? Like, it's it's it's not or may maybe it was. Was it Safari at one ESLint, like, the JavaScript core?

It it was JavaScript core, and, yeah, it was on Bos, it was the Safari engine, I believe. But, Wes. They wrote their own engines called Hermes.

Okay.

So it the JavaScript that you're running in React Native is not does not match what you would run-in, like, Chrome, which was actually a problem for a while because they had the debugger option that they had would run-in Chrome.

And they had all these issues where people would have bugs happening in their app that would not reproduce in the debugger because it was running a completely different JavaScript.

Oh, yeah. Yeah. And the React Native JavaScript engine was had fewer features than the Chrome engine.

And so they don't have they don't really use the Chrome debugger anymore for that reason, but they they built their own JavaScript engine, called Hermes, which is really fast and really awesome.

Man, it's wild if you think about that. There are so many different JavaScript engines out there. Oh, I know.

And, like, does it have full support for JavaScript? Like, can you use async await? Like, does it have everything in it, or do you have to wait for things to be added? Yeah. It's pretty modern. We got async await

when everyone else did pretty much.

So this is does this relate to all to the new architecture of React Native? Is that a related discussion?

I mean, everything is related to the new architecture. So yes. Okay.

The new architecture is until recently, if you'd asked a any given React, new developer probably couldn't have told you the same answer.

They've been they've been working hard to, really define what it is.

Ultimately, it's it's a change to the the way that the JavaScript code bridges to the native code. Specifically, there was a thing called the bridge, which asynchronously, like, sent messages from JavaScript to native and vice versa. And so there was this little bit of lag for it's like especially for things like really long lists with a lot of images and, like there was just this little bit of lag that put a a an upper ceiling on performance Okay. For React Native. And they have removed that entirely and come up with this thing called I think it's JS, JavaScript interface, which lets c plus plus actually ins like, hold a JavaScript object in memory.

So it can, like yeah. It's it I'm not an expert on the react on the new architecture by any means, but Yeah. That's sort of, like, the crux of the change.

And it just it opens the door for a lot of new performant changes, like using all the React 18 features like suspense and stuff wouldn't have been possible with the old architecture. And the new architecture kinda opens the door to a lot of stuff. I I sincerely appreciate that overview because

I went I've been looking to try to understand this new architecture business for a little while. You go to the new architecture working group, and, oh, man, it's a total mess. You go to, let me go to announcements or deep dive or documentation. They all take you to just a GitHub discussion where who knows what like, it's just people who are supposed to be doing this. Several years of

of normal people like ourselves trying to understand what what Meta is doing over there. Yeah. And we know it's gonna be good, but

it's been a struggle.

We hear that a lot from people that come on the show where they're either doing WASM or they're, doing something in a service worker or or they're doing, like, a electron desktop. There's, like, this, like, chasm that you have to cross from native to JavaScript. And every single time that you do that, there's a little bit of a price to pay. Yeah. And, like, obviously bit of that is you can use JavaScript.

So that's interesting that they've totally

fixed that. Yeah. They've kind of married those 2 a a lot more. So we're we're excited for that to land. It's finally kind of creeping in. They're they're to the point where most of the third party libraries that are used by a lot of people are new architecture ready, basically.

Because native native libraries need to do a lot of changes because of the way because of the new architecture being about, like, how the JavaScript and the and the native, communicate.

Most packages that have native components like your camera and your, you know, things like that that that have native components, need a lot of updates.

And so most of those libraries are ready now. That's sick.

And and that kinda leads nicely into a question I was gonna have about like, if if something like that big change happens, is that going to break a lot of older React Native apps, or do they see that JS just being like a drop in and, fingers crossed, just work?

They have done a lot of work to make the transition as painless as possible. Like, they built in compatibility for new and old architecture kind of existing together, knowing that a lot of a lot of people are relying on React Native for their, like, for their core business, and they need to not have it be interrupted. So they're putting a lot of work into sort of deprecating things really slowly, and you can turn on the new architecture and still have it be compatible with libraries that are not using the the new architect.

Like, there there's a lot of stuff built in to make it an easy transition. It's they're they're not gonna leave anybody out in the desert.

Yeah. The it's funny because I like I said, I mentioned I did a course on React Native, and this was way back in, like, 2000 and, Sanity, 2014 maybe. Oh, wow. That was early days. Yeah. And I was a bad choice because React Native was changing a Scott, and even, like, expo is changing a lot. I released the course. Version 10 or something like that.

It sucked because I really I I I put, like, an 8 hour course out, and then something changed and invalidated the whole thing, like, a week later. And over the lifetime of that course, I got a lot of I know I know this is, like, early days. A lot of people, like, mentioning any minor update would break their app completely.

That was common. Still like that, or has it gotten better? Not at all. Yeah. I think around

so we're on version 70 four is what just came out. Wow. And I would say probably around, like, 50 or 60.

We got to the point where major update, like, version updates, were not break like, they they didn't break anything. They've really gotten past the point where you're adding new components or, like, completely changing component APIs.

It's really very stable now, and there's you can see evidence of that with just the number of big enterprise companies that are choosing to use it now that they feel that it's stable and mature.

Man, what about other platforms that React Native can can run on? Because, like, there's obviously Bos and Android. Those are the 2 supported ones. But I I often think both Bos features that are, like, a little niche. Like, I was trying to build, like, a workout tracker for myself, and I ended up giving up because the watch integration was the best. And I was, like, I can't do that with the web. I can't. I'd looked it up. I I don't think you can do it with React Native, like Apple Watch. Maybe you tell me if I'm wrong, but, I'm curious if there's other platforms that React Native can run on.

There's quite a few now. I mean, obviously, none are as supported as Bos and Android and web. But, like, tvOS is is one of the bigger ones that they support. I mean, macOS and Windows, you can you can write apps using React Native. Like, Microsoft has

React Native macOS and React I know. React

Native Windows. It's so ironic to me that Microsoft is the one that maintains React Native Mac OS.

Yeah. Yeah.

And have have you used these before?

Yeah. Yeah. I've played around with React Native Windows, and we actually internally have an app that we're building using React Native macOS. And they're it's a bit rougher. You have to do a let a little bit more, like, spelunking and discovery and research Wes when things when you get errors and things go wrong.

But they're always the the React Native team is always really happy when people do stuff with it and tell them about bugs because then it gets a little bit better every time. Mhmm. But, really, the beauty of React Native is that any platform if someone wants to put in the work, you can target any platform because it's just an abstraction layer, and what's on the other side is whatever you want it to be.

When Apple first announced, the Vision Pro Yep. Like, somebody had a React Native app running in the Vision OS, like, the next day.

Really? Wow. It it it really is just who if there's someone putting the work in to target a a platform, you can do it. Mhmm. React Native. Yeah. We had the folks from Raycast on, which is a Mac OS

app launcher and productivity app.

And in order to to build Raycast extensions, it's React, but it's not you can't use divs. Right? It's it's the same idea. Right? They have they built their own renderer so you can use no node modules and and everything you want on the logic side. But once it comes to actually building the interface of the plug in, you have to use their blessed components to Mhmm. Build the UI. Yeah.

Yeah. It's I mean, it's basically like that.

I think there's I think there's, like, fire stick support, and I don't know about watch. But, yeah, the possibilities are endless.

Trying to get at, like, a fire stick support

on this, that feels like that feels like, not something I really would love to do Yeah. Very much. That that's actually a that's a show I've been been trying to find somebody for for a while, and that's all these apps that you install, whether it's on your your Google Chromecast or it's on your Samsung TV, they're all built in, HTML, CSS, JavaScript, and Wow. They all work pretty good. Every now and then, I'm clicking through mine, and I I get a little or it's a little slow to respond to events. And I'm telling my wife, like, oh, this thing is it's blocking they're blocking the main thread. You know? Like Mhmm. She's like, it's fine. Just just don't click so fast.

Oh, man.

This is the curse of being a developer is you Yeah. When your when your tech is not working, you're like, I know somebody didn't do this. Yeah. Yeah. I know.

I know. It take it takes a lot of restraint for me to not to go to the, the feedback and be like my gosh. Your your developers didn't have a time out. You know, some sort of a fix here you'd yeah. I

know. I'm just curious about, like, talking more about the bridging to to native APIs because, every now and then, you you hit upon something.

Often, there's, like, a web API for it. Like, I was doing some Bluetooth stuff the other day, and I dove deep into web Bluetooth. Mhmm. But it's not like a standard API, and a lot of these really cool APIs will not never work on on Ios. You know? So, like, I'm thinking Bluetooth or, NFC, you know, things like that.

What happens if there is no bridge for this type of thing? Or what happens if the bridge that you're using to like the camera app or something is not giving you the the actual data you need. Do you have to pull up your sleeves and write a little ESLint then? Yeah. That's Yep. I mean, the an that's the answer JS basically Wes. We've had that happen on a couple of our clients.

And more often with the ones that are going from a legacy Bos and Android app and trying to recreate the exact experience in React Native.

So, like, there was there was one on the Mercari app where there was a a page that had this, like, specific, like, parallax scrolling.

Basically, like, the image would zoom in a particular way as you Scott, and it was a very specific, little graphical thing.

The package the Bos package that they were using did not already have a React Native wrapper built by somebody in the community.

So the answer was that we had to build it ourselves. So we had to build what's called a config plug in, which is basically Wes write some JavaScript code and then some ESLint code, and it basically just defines this little interface.

Right? So you'll have the JavaScript side, which is what your React Native app will actually call, like, call the like, use this component or call this method on and then the you'll write some ESLint code that basically intercepts those messages and says, okay. When this is called, you're gonna do this swift stuff, and you're gonna render this Bos component, like, in the swift.

And so you've just built this, like, basically communication layer.

Okay. And it's is it is it almost like a, like, a RPC? Like, I know Scott and I have been dipping into, Scott, what's the rust based electron alternative? Tori. I'm blanking.

Tory, t a u r I, for everyone trying to Google it, where it's like, yeah, you can build desktop apps. It's a little bit different. It's actually the opposite of React Native Wes it's your UI is built in HTML and CSS, but your back end is is written in Rust.

Interesting. And you could do mobile apps to us. You could do mobile apps to the story v two now. Obviously, it's a web view. It's Safari web view. But Yeah. The way that that works is you can define, like, a hello in Rust, and you could just call it in JavaScript like it's magic. And Yeah. Is it similar to that? It's basically I mean, at the end of the day, yeah, it's basically

the same idea.

You're just yeah. You just are defining this layer that says, okay. When I call this thing in JavaScript, I want you to do this thing in native.

Okay.

And what about state management? Do you just use do you use Redux? Do you use US Scott? Do you have any opinions there?

I have opinions. Yes. I I mean, like, we've used.

I've I've used Redux plenty.

Wes have clients that use it. Like, I'm comfortable with Redux.

Our personal favorite, is MobX Datree, which is Cool. It's like a, a more strict version of MobX that has, like, runtime, type safety.

And I love it because it makes me feel like, my Rails days, like, active record.

It's very object object oriented feeling.

You have, like, models that you run functions on, and it'll do async functions and stuff.

And then you have properties and stuff. So it's very much like, okay. I have my widget or my user or whatever. And, like, it has a bunch of properties that I that I invoke like an object.

Yeah. And I we just like the the feel of it. And then it's it's all it's all based on the MobX, like, observer pattern. So your components basically becomes an observer and then listens to changes in your store or model or whatever.

Yeah. It it's funny because now it seems like a lot of the JavaScript frameworks in our our world are now going more towards that observable kind of pattern signals in in that. But MobX, has been doing it for a long time. And not only that, but the people who like 1, MobX, but also MobX State Tree, the people who liked and used that seem to, like, really go to bat for it for a long time. We yeah. We've been using it for, gosh,

6 5, 6 years.

And it's it's not a super popular library. I mean, like, we're we're kind of the most vocal ones going to bat for it because Redux really dominates dominates the React Native state management space.

Mhmm. But we love it. Having used like, we we every so often, we'll have a project that uses Redux, and we'll kind of revisit, like, where Redux has come and, like, what it's doing. And we always come we always come back to MobX HD, where it just feels right.

Yeah. What what are some tools and libraries that you install on most projects? Like, besides maybe, like, expo, you get up and running. Like, what do you need?

So for from the developer side so, like, looking in my, like, dev dependencies Mhmm. We use Jest for testing, just like unit testing.

We really love Maestro for end to end testing.

It actually, like, runs the app and, like, does, little flows. Oh, yeah. Like, you could tap on things and swipe it in. To, like, tap on this and, like, put this text in and hit this button and yeah. But it it will actually, like, pull up pull up your device or simulator and do do those things. It's very, like, external to the app. It's not it's not, what is it, black box versus white box? Like, it doesn't have any knowledge of the internals of your app. It's literally just like a it's as if a user were tapping around.

Mhmm. With the equivalent to that in our space would be, like, Cypress or Playwright.

Yeah. Yeah. Yeah.

So that's actually pretty new to the space that most people until a couple Yarn ago used, detox, which which is more like, it it has a little bit of knowledge of your application. And it was always really, like, flaky and kind of brittle, not very much fun to write, and so we've been really liking Maestro recently.

And then for, like, debugging, we have a tool that we, the Infinite Red builds, we maintain. It's called Reacttron, which basically just gives you a a window into your app. Like, it has a a tab for, like, all the network activity. It has a tab for all of the, like, the actions that are happening. So, if depending on whether you're using Redux or ModelX directory, you'll pick a plug in for your state management system, and it will hook in and listen to listen for the actions that are being called and, like Yeah. The state shot snapshots that are so you can see your state at any given time, visually, which is really helpful.

And you can actually, like, run commands and, like, define custom commands and run them like, oh, hey. Reset my entire store or, like, navigate to this Node debugging page that I always need to go to or log in with this user, whatever your little debugging workflows are.

Yeah. Mhmm.

And for auth, you're probably right. Native doesn't have cookies. Right? It's not the browser.

So are you using, like, JWTs and just sending them along on with your requests?

A lot of times. Yeah. Yeah. So if depends on what our back end is using.

A lot of our clients use, like, Okta, Auth0, those kinds of auth providers. But, basically, yeah, most of the time, we'll we'll be given a JWT, and we store that in secure storage. So, like, on the device, there's on Bos, it's the key chain.

On Android, it's something else. I can't remember the name of it. But there's a secure place to store things on your device that's associated to your app.

And so we'll put the token in there and erase it from, like, memory.

So and then, when the app loads up again, we basically fetch it from secure storage again.

Okay. And that's where you put, like, environmental variables as well. Right? Like, I I saw people were just downloading React Native apps and finding, like like, tokens

for everywhere just because it can't see it. It doesn't there's a hole in there. Yeah.

There's there's a lot of misunderstandings about how to keep your mobile app secure, and, basically, the answer is it's not.

So if if you have something that is really secret, don't store it in your app.

That's the answer.

Basically, whenever you can, you should be storing those things on your server, and then having your server control access for the app through, like, through your user.

Anything that the that the mobile app is has access to should be either not secure, like a public token or something, or something that's easily revocable or has a short expiration. Like, things that will not take your entire system down if it is exposed because Yeah. Anyone can look in your binary. Like Yeah.

Yeah. They actually follow a Twitter account that just breaks down Bos apps. Really? People like It's really not hard. It's It's cool. Like shockingly

easy.

I'll I'll send you I'll send you the the Twitter account later because I I don't know it offhand, but they had tweeted out recently.

They're they're like some I don't I don't know if it's OpenAI or somebody. Somebody's do app uses Git Sanity, and I was like, oh, cool. Good to glad to see it.

Yeah. Man. Yeah. I guess, like, even if someone doesn't even crack your your application, like, you're if you put, like, a OpenAI token, that's what everybody was doing. Oh, yeah. And you're making a request from the device to OpenAI, you can you can throw, what, proxy man on, and it will proxy all the requests.

You can spy on it and and see what's going on. Yeah.

Yeah. Don't don't keep secrets in your app, please.

That's great. Actually, I got 1 more question. It's like, Facebook is behind so many of these libraries, but does does Facebook use any any anywhere?

They do. People to maintain it? They definitely do.

I mean, they built it for themselves, basically, and then decided to open source it. But there's pages within the Facebook app and, like, the Instagram app that are React Native. It's definitely not the entire app. It's, like, little little pieces.

And and does does Apple hate React Native? I remember in the early days, people were had a hard time getting their apps approved. That was a long time ago. Does. I they don't because ultimate

at the end of the day, there's no like, it it's a native app. They Yeah.

You wouldn't really be able to tell much difference.

Like, the code that they're getting submitted is not that different from the code that Yeah. Native developer would write. So,

we've never had any problems. Yeah. As long as you're not, like, remote updating it. I know they don't like that. Right? They don't like that. Yarn you? We still do it.

Oh, really? Okay. But, they don't like it.

Yeah.

Expo has a has a system called EAS updates, which does remote updates. And then app center Microsoft app center, which is actually being sunsetted, was the original.

They had, their package called Node push, which does remote updates. And I think they're actually keeping code push around. The rest of app center is getting sensitive, but but, yeah, it it's been around for a while, and I think they're somehow getting around the App Store because people still use it. But

Apple's not a huge fan. I don't think they found a way to outright ban it, though. Yeah. Remember, what was the what was the Adobe one, Wes, when they they didn't allow Flash on the iPhone, and then Adobe made some sort of, like, Flash based Bos app builder. What was that called? They banned that. They banned that

very quickly. Yeah. Yeah. I mean, the App Store is always that you just have to work work around their shenanigans.

Yeah. Yeah. Do you have a, like, like, a telephone you can pick up that's connected directly to somebody at Apple? Or I wish. Are you not that high up yet? No. Wish. No. We we definitely do not.

You we have to wait in line like everyone else.

Oh, man.

Alright. Well, let's we'll have a couple Wes for you, supper club Wes. And I'm actually curious if you use Ios or Android.

Oh, I Ios.

A 100%.

A 100%. Yeah. Just how come? Full

I mean, I've I've I started with Ios, and I've just always been in that universe. And because I, like, I use macOS for work, it I just love that everything integrates, and it's just the UI is pleasing to me. It's very aesthetic and Yeah. Easy to use, and everything is kind of Bos first and Android second.

Mhmm. So everything is supported. It is

very much like that still. Yeah. I I was an Android guy for a very long time, but I used Mac for everything else. And at some point, I was like, I'm I'm really fighting the system

all the time here to get these things to talk to each other. So I did the whole thing. Whenever I try to get my like, I have a bunch of Android devices that I use for development. And anytime I try to get a screenshot from my test device to my computer Yeah. It's just, like, unnecessarily hard.

Like, why Although the so difficult.

The Apple one always breaks on me too. The shared keyboard, I use that every time I post a TikTok video. I I write the caption on my computer, I copy it, and then I try paste it on my phone.

And it stopped working, and it always stops working.

It is getting inconsistent.

Yeah. It's so frustrating. I find that Apple sucks. For me to do it the other direction.

Yeah. It works the other direction. I can copy on my phone and paste on my Mac, and then you, like, look into it, and it's like, try signing out.

Yeah. Reboot your phone. Like, come on. I hate those. I had one of those yesterday with my AirPods, and it was like, you need to dis, disconnect them and forget them and then redo the Bluetooth connect. I'm like, that's not gonna fix. That's the problem.

Yeah. I don't know what's more depressing is stumbling upon an Apple Forms or a Google Forms. Oh, no. I'd say Apple to Apple words. I am not gonna help. Yeah. Those are the worst. The Apple warp are so hopeless.

They're

Wes That's where Wes go to die.

Seriously.

Oh, my gosh. What what text editor do you use for writing React Native apps? Versus Node is

everyone I know who does React Native uses Versus Code. Really? Maybe with there's a couple exceptions, but yeah. It's it's very, very well integrated and supported. And it's almost at this point, it's like the the blessed editor for React Native. Really? Yeah. How often do you have to open,

Xcode?

Let's couple times a week, maybe. I don't like, you don't have to open it to do builds, ex accept accepting maybe once in a while.

It's rare, which is good because it eats up my ram.

Yeah. It's a it's a it's a hog. We had Jen Simmons on it. She gave us a tip that you can install Xcode, install the simulators, which is almost what we need. It's just a web development simulator, and then you can uninstall it. I didn't even know you could do that. Like it's like 400 gigs or something like that. Yeah. It's nasty. Yeah. There are times when you need it, but it's, yeah, few and far between. Alright. Let's move into the last section that we have here, which is, Sick Picks and Shameless Plugs. Did you come prepared with a sick pick? I did.

I read. I did my homework.

Awesome. Good.

Most people do not. What the hell is a sick pick?

Oh, believe me. If there's anything I can read beforehand to prepare for things Oh, yes. Believe I've read it.

Yeah. My sick pick is, for awesome socks, which if your audience is pretty nerdy, they may already know about awesome socks. It's, it's this service started by Hank and John Green, and a subscription service for socks. It's exactly

what it sounds like. This is very very funny. Are you trolling me right now? This is No.

This is very giving current context. To tell the story. This is great. You're not trolling me right now. I am not. K. So let me tell the story. So on, on fry on Saturday, I bought 75 pairs of white socks, all exactly the same. And I I tweeted out, like, just getting 1 kind of sock, and that's it JS is the best, like, life hack ever. It's, like, such a life improvement. And that tweet blew up. 9,000,000 impressions on it. Opinions.

Yeah. So many opinions. Hank Green No.

Quote tweets it.

It says, I strongly disagree or whatever. And, and then and then the next day, he sends me a DM and says, hey. You want 30 pairs of different socks? Because he has he has this, like, company that makes awesome socks. Yes. And, all the awesome. All the money goes towards what is it? Good Scott store.

All of the money goes towards charity.

Yeah.

The socks are very, very nice. They're very comfortable, and it's a little surprise in your mailbox every month. I love it.

That is so funny though. I swear I was controlling you. Yes. Thank you. Down.

This was such a,

a a great moment because of just the we were just talking about timing. It's so incredibly perfect, so thank you for that. Yeah. Like, it's like I tweeted that, like, an hour ago, but right before you came on. That's hilarious. Oh my gosh. No way. Because I follow you on Twitter, so I was like, I'm can't believe I missed this. But yeah. You just it's just this morning. I'll throw the link in the show notes and in the chat for everybody.

That's so fun. Great. Oh, man. I Wes thought for sure you were trolling. No.

Oh, that's great.

That's what about a shameless plug? What would you like to do? Plug.

I'll stick a couple in here if you give me the mic. Yes.

So first of all, my company, Infinite Red Infinite Scott Red, if you're looking for React Native work, we'd love to talk to you. Also, we host, every year, we host Chain React, which is our React Native conference. It's the only one based in the US.

So it's in Portland, July 17th through 19th.

You can get tickets Node. And if you use the discount code syntax, you can get 10% off.

Sorry. How much? 10% off. 10% awesome. Sorry. I oohed over your I know. To you.

Same.

Yeah. So that's yeah. July 17th through 19th in Portland. We'd love to hang out with you.

Amazing. And, of course, React Native Radio? Oh, yes. And how

how could I forget? And, yes, React Native Radio, wherever you get your podcasts, check us out.

Subscribe if if you please.

Wes release episodes usually once a week.

We talk about everything React Native. So yeah. Give us a listen. That is that's it's wild to me that

yeah. Yeah. With 300 episodes on just React Native. Like, Scott and I talk about everything Wes development back end, front end, and whatnot, and that's very impressive that you you can do so much content on it. But it just goes to show how how deep native apps is and how it is. It's literally its own thing. Mhmm.

This is let's say here's a little one little quick thing before we go. I I was really impressed by your Scott red top level domain.

Yeah. That's I I I'm pretty sure our founder went and like, as soon as Scott red became, an available domain,

he, like, went in and snatched it up. Yeah. So here's a question for both of you.

How many color based TLDs do you think exist? Oh, stop. A little bit of stumped.

Yes. How many color based TLDs?

I mean, how many colors are there? I the the color

I'll say 4.

There's definitely a dot black.

There is a dot black. Yeah. Blue? I would suggest a dot blue.

There's a dot red. Oh, that's gotta be dot green. Dot green? No. Really? Yeah. There is. Like, anything eco, like, environmental

Yeah. You're right. You're right. Yeah. So here are some odd ones that you might not expect. There is there's only 7. Okay? But out of those 7, one of them is dot navy.

One of them is

dot navy. Makes sense. Does the navy does the navy use dot navy? I think it's for colors specifically.

There's a dot gold. There's a dot pink.

So you guys got all of them except for gold, navy, and pink.

So We Scott more colors than just red?

So there's black, blue, gold, green, navy, pink, and red. No. Not infinite red. I'm I'm saying just in general. Yeah.

Just now. That's that's a kind of some that's kinda odd choices to me. I I I get many of them, but, yeah, there's no dot yellow. There's no

dot orange. Yeah. Why why some Node purple. Others? Are they gonna add yellow at some point? You got it. It's expensive to to yeah. We have a whole show on how to get your own TLD.

So it it is it's not owned by the government, but it is intentionally meant to target government

Interesting.

Navies, which is like yeah. How many

countries have a navy? US dot navy. Domains.

Canada dot navy.

Yeah. Canada dot navy.

Oh, my gosh. Well, thank you so much, Robin. This has been a blast. Oh, yes. I really enjoyed it. For having me.

Wicked. Alright. Thanks again.