React Native with Robin Heinze

at the end of the day, there's Yeah. Don't don't keep secrets in your app, please.

countries have a navy? US dot navy. Domains.

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.

The socks are very, very nice. They're very comfortable, It also they they storing those things on your server, and then having your server control access

Yes. How many color based TLDs? Wes, let's talk about that then. So

and it's a little surprise in your mailbox every month. I love it.

and then and then the next day, he sends me a DM and says, hey. You want 30 pairs of different socks? 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, your your business logic

So it it is

So We Scott more colors than just So it can, like yeah. It's

all exactly the same. And I I tweeted out,

No.

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.

ex accept accepting maybe once in a while.

started by Hank and John Green,

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

but does does Facebook use supported ones. But I I often think both Bos features that are, like, a little niche. Like, I was trying to build,

It's rare, Okay.

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

to my computer Yeah. It's just, like, unnecessarily 50 or 60.

impressions on it. Opinions.

if you use Ios or Android.

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,

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

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

how come? Full

on fry on Saturday, I bought 75 pairs of white socks,

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.

every year, we host Chain React, which is our React Native conference. It's the only one based in the US.

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

intentionally 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.

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

like, it it's a native app. They Yeah.

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.

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

Xcode?

easy.

Awesome. Good.

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

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

Sick Picks and Shameless Plugs. Did you come prepared with a sick pick? I did.

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,

how could I forget? And, yes, React Native Radio, wherever you get your podcasts, I'm not a fan of cascading anything.

Because he has

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 a has a system called EAS updates, which does remote updates. And then app center

Subscribe if if you please.

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.

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.

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

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

It is getting inconsistent.

How many

was the original.

it's this service

Canada dot navy.

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

It says, I strongly disagree or whatever. And,

Quote tweets it.

which is good because it eats up my ram.

I'll say 4.

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

Interesting.

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

A 100%. Yeah. 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.

Oh, yes. Believe I've read it.

Same.

Yeah. Canada dot navy.

Let's we'd love to talk to you. Also, on the cloud, and then this swift stuff, and you're gonna render this Bos component, like, in the swift.

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

Alright. Well, let's we'll have a couple Wes for you,

and a subscription service for socks. It's exactly it's all it's all based on the MobX, like, observer

One of them is

on,

I mean, how many colors are there? I the the color it's not quite the same as CSS Flight, but it's, like, based on Flex.

everything is supported. It is the same.

he has this, like, company that makes awesome socks. Yes. And,

Navies, which is like yeah. How many

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

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

from my test device diverges the most.

is behind so many of these libraries,

not that different from the code that Yeah. Native developer would write. So,

all the awesome. All the money goes towards what is it? Good Scott store.

Like, why Although the so difficult.

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.

any any anywhere?

Expo has The new architecture is until recently,

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

you can you can throw, what, proxy man on, and it will proxy all the requests.

Wes release episodes usually once a week.

Microsoft app center, which is actually being sunsetted, The platforms basically do what you tell them.

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

Yeah.

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

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

They're

A 100%.

what it sounds like. This is very very funny. Are you trolling me right now? This is That's great. Actually, I got 1 more question. It's like, Facebook

All of the money goes towards charity.

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

the system

up. 9,000,000 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,

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.

we host, most of for everywhere just because it can't see it. It doesn't there's a hole in there. Yeah.

Yeah. My sick pick is, if you're not actually using the the primary Expo SDK.

Oh, that's great.

There's definitely a dot black.

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.

Infinite Scott Red, if you're looking for React Native work, They do. People to maintain it? They definitely do.

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

it's not owned by the government, but it is

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

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

This was such a,

supper club Wes. And I'm actually curious

Mhmm. So And more often with the ones that are going from end to end testing.

pink.

Sorry. How much? 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

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

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

I started with Ios, and I've just always been in that universe. And because I, like, I use macOS for work, 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, But, ultimately, it's it's sort of a variation of CSS Flexbox. It's to write for web. So it's like it's a layer in between Our personal

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 are new architecture ready, basically.

like, Okta, A lot of our clients use, like, sent messages from JavaScript So that's actually pretty new to the space that most people until a couple Yarn ago used, I mean, I've I've and using it to render 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.

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,

You have, like, models that you run completely shared Mhmm. Applications. Oh, wow. That's fine. Unless you're doing something really crazy my Rails days, like, active record.

that observable kind of pattern

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

It actually, like, runs the app and, like, red? through, like, through your user.

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, is it almost like a, like, a RPC? Like, I know Scott and I have been dipping into, if I have a bunch of

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

which basically just gives you a hard.

So if if you have something that is really secret, You we have to wait in line like everyone else.

around.

like, external to the app. It's not it's not, 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.

do those things. It's very, And then you have properties and stuff. So it's very much like, okay. I have my complex, and, like, define custom commands and run them like, oh, hey. Reset my entire store or, like,

for the app write for all 3 platforms. It introduces that 3 platform a screenshot

and just sending them along on with your requests?

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

Anything that the that the mobile app is

changes in your store or model or whatever.

And so we'll put the token in there

has access to should be either object which if your audience is pretty nerdy, they may already know about awesome socks. It's, I think layer.

dominates the React Native

like, it it has a little bit of knowledge of your application. And it was always really, like, flaky and kind of brittle, like, like, environmental long nested configuration that says, like, okay. If this is your the URL, parse that, get the thing, and then, like,

like like, tokens

I've I've used Redux plenty.

has a short expiration. Like, things that will not take your entire system down if it is exposed because made an app without without separating the 2. But there are UI patterns that Android users We really love Maestro for

you should be

6 5, 6 years.

So from the device to OpenAI,

detox,

is MobX Datree, which is Cool. It's 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 good or maintained or whatever.

signals in in that. But

And then for, like, debugging, And so you've just built this, like,

commands

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,

revocable or the benefit that you get is from a business perspective.

functions on, and it'll do async functions and stuff.

And you can actually, like, run plenty

Yeah. They actually follow a Twitter account that just breaks down Bos

favorite,

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 still have it be compatible with libraries that are not using the the new architect.

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.

apps. Really? People like It's really not hard. It's It's cool. Like shockingly

Yeah. Anyone can look in your binary. Like I mean, need to

Mhmm. We use Jest for testing, which which is more from the developer side static set of native packages, and you couldn't change it.

There's there's a lot of misunderstandings about how 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 you can write apps using React Native. Like, Microsoft has state management space.

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

like a, a more strict version of MobX that has, like,

MobX,

or something that's easily an available domain, 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 I'm trying to think who I can talk about

a

object oriented feeling.

Yeah. Yeah. Yeah.

and erase it from, a a library from the community, which may or may not be stick You wouldn't really be able to tell much difference.

are you using, like, JWTs

Yeah. Mhmm.

does, the,

we'll be given a JWT, four is what just came out. Wow. And I would say probably around, like, so, like, looking in my, like, dev dependencies they don't like it.

Yeah. And I we just like the the feel of it. And then it's

so you can see your state at any given time, 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, is one of the bigger ones that they support. I mean, macOS and Windows, you can have a full native environment on your machine.

a tab for,

So and then, 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.

those kinds of auth providers. But, basically, yeah, most of the time, we'll we have a tool that we, the Infinite Red builds, I I love.

runtime,

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

visually, which is really helpful.

and we store that in secure storage. So, like, on the device, there's on Bos, it's the key chain.

And I love it because it makes me feel like, Auth0, is totally is totally fair game. Because I mean, it the React layer 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,

Basically, whenever you can,

is whatever you want it to be.

NFC,

you know, things like that.

do you use Redux? Do you use US Scott? Do you have any opinions there? 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.

working group,

Most packages that have native components like your camera and your, 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 Like, the code that they're getting submitted is

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

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

basically communication built by somebody in the community.

is to go back. And it's a very, like, option that they had would run-in Chrome.

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

And what about state management? Do you just use 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

knowing that 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 you're doing so with fewer people and less time I read. I did my homework.

and what's on the other side

because of the new architecture being about, like, how the JavaScript and the and the native, It's very object like, use this component or call this method it's that's actually not an easy question to answer, because it's it's 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 Oh, I Ios.

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

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,

When Apple first announced, check us out.

a legacy Bos We got to the point where a window into your app. Like, it has a so we're on version 70 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.

React Native was changing a Scott,

little graphical thing.

for new and old architecture kind of existing together,

it's been a struggle.

were not break like, they they didn't break anything. They've really gotten past the point where you're adding new

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

big enterprise companies that are choosing to use it

a lot of older React Native apps, or do they see that JS just being like a drop in

need a lot of updates.

I was a bad choice because

I went I've been looking

changes because of the way So you'll deep link into the app, and there'll be a listener 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, It, like, the next day.

you'll write some ESLint code that basically intercepts those messages and says, okay. When this is called, you're gonna do 90%

maybe. Oh, wow. That was early days. Yeah. And

painless as possible. Like,

do a lot of

fingers crossed, just work?

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

There's quite a few now. I mean, obviously, none are as

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,

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

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

We hear that a lot from people that come on the show where they're either doing WASM or they're,

Okay. And it's is it 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

app launcher and productivity app.

like, spelunking and discovery and research Wes when things like, memory.

This is the curse of being a developer

to try to understand this new architecture business for a little while. You go to the new architecture

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.

like, a workout tracker for myself, and I ended up giving up because

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

doing something in a service worker or or they're doing, like, a electron Wicked. Alright. Thanks again.

the watch integration meant to target government Yeah.

or,

is written in Rust.

on the Mercari app where there was a a page that had this, like, specific, like, parallax major update, like, version updates, Node. And if you use the discount code syntax, you can get 10% off.

And it just it opens the door for a lot of new performant changes, like don't store it in your app.

Really? Wow. It it it really is just

call the their package called Node push,

React Native macOS and React I know. React

and Android app and trying to recreate the exact experience to keep your mobile app secure, and, basically, the answer is it's not.

So that's interesting that they've totally

now that they feel that it's

there is no bridge for this type of thing? Or what happens if the bridge

Scott, what's the rust based electron alternative? Tori. I'm blanking.

stable and mature.

And in order to to build Raycast extensions,

The package the Bos package that they were using did not already have a React Native

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.

you can see evidence of that with just the number of

support, and I don't know about watch. But, yeah, the possibilities are endless.

every now and then, you you hit upon something.

there's I think there's, like, fire called Hermes, a a really common saying you'll you'll hear, because what it's doing is it's actually taking JavaScript

bit of that is you can use JavaScript.

Bluetooth Oh, man.

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

So the answer was that we maintain. It's called Reacttron, something that you wouldn't actually use for a serious app. And it still kind of has that reputation even though it's evolved

over the lifetime of that course, I got a lot of

I'm curious if there's other platforms that React Native can run on.

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

fixed that. Yeah. They've kind of married those 2

know. I'm just curious about, like, talking more about the bridging to to native APIs because,

you know, things like that that that have native components, Wes what EXO is is a suite of

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,

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

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.

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.

Because native native libraries And it's it's not you can absolutely do that. I mean, that's Yeah. That's I I I'm pretty sure our founder went and like, as soon as Scott red became, And like you said, they expo is really great for

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

Okay.

the Vision Pro

It's really very stable now, and there's Yarn ago, we sort of 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 all the React 18

Man, what about other platforms that React Native can can run on? Because, like, there's obviously Bos and Android. Those are the 2

using

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

components or, like, completely changing component APIs.

things really slowly, and you can turn on the new architecture and

Trying to get at, like, a fire stick support

communicate.

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 not very much fun to write, and so we've been really liking Maestro recently.

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.

any platform enjoyable Okay. For React Native. And they have removed that entirely and come up with this thing called I think it's JS, when you get errors and things go wrong.

Yep. Like, somebody

and even, like, expo is changing a lot. I released the course. Version 10 or something like that.

I know I know this is, like, early days. A lot of people, like, mentioning any minor update would break their app completely.

and it basically just defines this little interface.

What happens if 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 and, she's also the cohost or host of the React Native radio podcast. So we're we're doing a little,

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.

But from the store and just, like, inspected their binaries to see what packages were installed, to see who JS using Expo and React Sanity, physical analogy, It it was JavaScript core, and, yeah, it was on Bos, it was the Safari

it adds a URL based navigation no super popular mature like, rendering UI components that would be using the DOM

Expo type safety.

but it was not URL based. Until recently, So React Native does not use CSS at all. It actually uses Wes have clients that use it. Like, I'm comfortable with Redux.

configuration that you need, it will go into your app to that page, to that record with whatever, partly because it lets you pattern. So your components basically becomes an observer and then listens to wrapper they call it, 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 UI engine. It's called Deno.

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

a library called React navigation, of tools. It's a lot of different things.

system,

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? And have have you used these before?

don't have a farm. Yeah. Pointed at them. Yeah. Oh, man. Okay. So I'm trying to understand, 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.

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 a back end developer. And so it's just normal to me that column is the default.

Oh, okay. Is that what And it stopped working, and it always stops working.

So Wes That's where Wes go to die.

that changes when you when you go from tab to tab?

which means that it maps scrolling.

it the answer used to be no. Okay. We use a Seriously.

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

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

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

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.

loading up a web view?

it's a good question, and it's a really common

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

UI views. It's like actual native Well, that's it's because

misunderstanding of of what React Native is. So first and foremost, React Native is native. That's kind of not secure, like a public

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

like, and it's just when your tech is not working, you're like, I know somebody didn't do this. Yeah. Yeah. I know.

Yeah. Yeah.

Robin,

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.

syntax. Sign up and get 2 months for free. Sentry presents this podcast. So,

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.

and how it's different than just a typical

views.

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

Head on over to century.ioforward/ 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.

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

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

But we make Oh, really? Okay. But,

like, that would be better than 0. And in our experience, it's it's usually way higher than that. So

of the way they And it's just every component is past a style CSS. CSS equivalent. Okay. Yeah. Both. But we we use React Native styles, which stick for consistency.

you're gonna be able to share a ton of what you're writing.

iOS and Android and then also web about adhering to those platform differences, yeah, you you're gonna have to have some conditionals, Native Windows. It's so ironic to me that Microsoft is the one that maintains React Native Mac OS.

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,

React TypeScript DOM, which is coming down the pike, actually comes in. React Native for Wes, it sort of limits

weird or scary.

extra stuff. And so people felt like, oh, this is just like a tool for novices or

POC or

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? They have done a lot of work to make the transition as if someone wants to put in the work, you can target any platform because it's just an abstraction layer, 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 So for

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

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, That is so funny though. I swear I was controlling you. Yes. Thank you. Down.

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

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

write an app and have it literally have it run on Wes, Bos, and Android. Yeah. We had Node from Tomaguie on, and,

So a build pointing to a development server that's live. So you can do your native development or your local development They had, 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

the Bos and Android directories, which are the actual, like, native apps that run and there's a ton.

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

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

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

the subset of the DOM that you can use. So you're not just, like, able to call any, like, experience for developing.

really, half the time.

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

fully native and did a whole React Native rewrite,

understand what Expo has become because what it used to be was

And when you're iterating on features down the line and maintaining the app, object.

on your devices,

a lot different than what I remember in a very positive way. It's come it's come a long way.

like, we use it all the time to be able to a, it's something it's a a package that they built so that you can use the React Native, 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 like, a a full fledged, like, it I just love that everything integrates, production app, That's the answer.

There's still people even in the React Native world that couple times a week, maybe. I don't like, you don't have to open it to do builds,

very well maintained, well documented

apps for on and then the

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, in React Native.

You can write the same app in just like unit testing.

to to download a development build.

build, like, a one off, like, supported as Bos and Android and web. But, like, tvOS it's of course, it's not gonna be a 100% and Bos users expect from their apps. Yeah.

image, all those, 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

come with React Native like, all the network activity. It has a tab for all of the, like, which does remote updates. And I think they're actually keeping code push around. The rest of app center is getting sensitive, but core, instead of sort of picking a primitives, view,

complex mature production level

and sort of papers over some of React Native's rough edges and gives you a much more 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 You just have to to build the right layer in between.

a must have?

big companies. And I'd say, like, we usually achieve, like, 85,

there's

starter app or something. Yeah. It had very limited capabilities when it came to native libraries and token or something,

But it's pretty dang it's impressively close in our experience. Like, we've built, like, we've built 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,

But also because and this is where the native look and feel because, like Mhmm. What you're getting is ultimately native.

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.

and with the ability to share because had a React Native app running in the Vision OS, that Okay. Is is going opening a native app and then going several screens inside.

you can basically scan a QR code with your phone

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

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.

service. But they did Mhmm. He actually, like, pulled down a bunch of apps

basically a tool that made it easy to

right once deploy anywhere,

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

and they they have managed to maintain that. Yeah. Mercari is one 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 Yeah. So many opinions. Hank Green No.

So it's not it's not a 100% write once to play anywhere, but, beyond what it was in its early days.

continuous native generation, c n g, which means that There's a dot red. Oh, that's gotta be dot green. Dot green? No. Really? Yeah. There is. Like, anything eco, Yeah. Yeah.

a lot beyond like, what you'd write in Swift or Kotlin. It's just a lot of a lot of people are relying on React Native for their, like, Basically, like, the image would zoom in a particular way as you Scott, and it was a very specific, we had to build it ourselves. So we had to build what's called a config plug in, which is basically

you know, when you get into it, you do end up going down paths

Oh, there's they built in compatibility native Yeah.

packages. And you can actually use those independently library. I mean, like, we're we're kind of the most vocal ones going to bat for it because Redux really dominates widget or my user or whatever. And, like, it has a bunch of properties that I that I invoke like an object.

that we know of. I think, have an entire suite of of libraries

Twitter lite was actually 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.

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 Mhmm.

of Android specific components and React specific components.

So you can do those really

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.

system.

HTML tag willy nilly, like, oh, add in a marquee or And it has all these systems now for

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.

and that's the point where you diverge from unwriting JavaScript. I'm comfortable with it.

and Temagui sit on top of yoga? Like, do they translate to either CSS or yoga?

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

Now I need to make a button. I need to make a layout. I need to, And what are some apps that people might not know are React Native that are things that are are pretty commonly used?

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.

Yeah.

So,

yoga directly or

its own Right? So you'll have the JavaScript side, which is what your React Native app will actually call, like,

Yeah. The UI is kind of where it which we helped them with

you want to make a UI,

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

Nothing is cascading, which if you'd asked

how does that work between Android and Bos? Do the platforms take over a little bit of the styling themselves?

styles for this type of thing, you're either writing

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

is

do React Native Wes

Oh, that's great. That that's all you know. So if you're writing

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 React Native and then the DOM.

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, 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,

go into a column. And I I was never truly a a web developer before I started React Native. I was if you have your app installed and you've set up all of the deep linking the actions that are happening. So, are generated, 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

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

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

quite honestly, I think a lot of your your skill set would

switchy switch, little podcast here. Cross summer edition.

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,

this thing this podcast, but we are usually talking about it in regards to

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

looping over things, fetching data, all of that stuff

in

UI layer, which is the things that you touch and the things that you see,

that is not running. Like, there's no divs

happens

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

JavaScript on a separate thread. But the actual

Yeah. I I remember when it first came out, and and you can tell me if this is still the case, but it's

components. That's Okay. And what's the what's the benefit of of using React Native over something like

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?

Wes. They wrote their own engines called Hermes.

the debugger in memory.

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 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,

that would be what would happen by default if you just

pure about So first of all, my company, Infinite Red

Interesting. Did did I hear that React Native was

You do have to sometimes, is you Yeah. When your 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

different 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 making it easy to to do builds even if you don't

The headers are usually left justified instead of centered and don't totally 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%,

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.

take into account Oh, man.

which is really fast and really awesome.

features than the Chrome engine.

UI patterns

Like, things like like Android.

engine, I believe. But, So, like, there was there was one

fewer So what you're seeing in your app is,

and things like that. Like, where where buttons are placed. Like, there's slight differences like that. And if you wanna be really the same idea.

JavaScript interface, which lets c plus plus

the bridge,

really define what it is.

So this is does this relate to all to the new architecture of React Native? Is that a related discussion? 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?

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

when everyone else did pretty much.

lag

a any given React, new developer probably couldn't have told you the same answer.

And,

to native and vice versa. And so there was this little bit of

Ultimately, Oh, yeah. Yeah. And the React Native JavaScript engine was had You can get tickets They have their own, like, 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, for awesome socks, Wes write some JavaScript code and then some ESLint code, on the platforms. I mean, like, if you wanna make your 2 apps exactly the same,

actually ins like, hold a JavaScript

which asynchronously, They've been they've been working hard to, the third party libraries that are used by a lot of people was their reasoning for doing it. But now that they're now that it exists,

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

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,

React 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 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,

And

was called. And then you have some sort of We talk about everything React Native. So yeah. Give us a listen. That is that's it's wild to me that

packages that have npm installed,

hooks that I've written and maybe a couple React,

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.

figures out what URL was