773

May 24th, 2024 × #react#mobile#javascript

React Native with Robin Heinze

Discussion on building native iOS and Android apps with React Native

or
Topic 0 00:45

Introduction to React Native

Scott Tolinski

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

Scott Tolinski

Yeah. Yeah.

Scott Tolinski

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.

Scott Tolinski

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?

Guest 1

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.

Guest 1

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.

Topic 1 02:33

React Native renders native UI components

Guest 1

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

Guest 1

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

Guest 1

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

Topic 2 03:31

Benefits of React Native - faster dev times, share code

Guest 1

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

Guest 1

You can write the same app in half the time.

Guest 1

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.

Scott Tolinski

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.

Scott Tolinski

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

Guest 1

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.

Guest 1

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

Guest 1

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.

Guest 1

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.

Guest 1

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,

Guest 1

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.

Guest 1

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.

Guest 1

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,

Scott Tolinski

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

Scott Tolinski

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?

Guest 1

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.

Guest 1

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

Guest 1

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.

Guest 1

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.

Guest 1

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.

Scott Tolinski

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

Guest 1

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.

Guest 1

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.

Guest 1

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.

Guest 1

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

Guest 1

So you can do those really complex mature production level

Scott Tolinski

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.

Guest 1

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.

Guest 1

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.

Guest 1

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.

Topic 3 14:14

Expo tooling enables native development without full env setup

Guest 1

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.

Guest 1

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.

Guest 1

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

Topic 4 16:52

New React Native router enables URL-based navigation

Guest 1

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.

Scott Tolinski

Mhmm.

Topic 5 18:15

React hooks work in React Native minus rendering

Guest 1

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.

Guest 1

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

Guest 1

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

Guest 1

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

Guest 1

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.

Guest 1

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

Guest 1

Nothing is cascading, which I I love.

Guest 1

I'm not a fan of cascading anything.

Guest 1

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

Guest 1

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

Scott Tolinski

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.

Scott Tolinski

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

Guest 1

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.

Guest 1

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.

Scott Tolinski

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?

Guest 1

The platforms basically do what you tell them.

Topic 6 21:18

Styles declare native styles, similar to CSS

Guest 1

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.

Guest 1

Like, things like like Android.

Guest 1

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.

Guest 1

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.

Guest 1

Okay.

Guest 1

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.

Guest 1

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.

Guest 1

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

Guest 1

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.

Topic 7 23:30

React Native has its own JS engine - Hermes

Guest 1

when everyone else did pretty much.

Scott Tolinski

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

Guest 1

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

Guest 1

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.

Guest 1

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

Guest 1

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.

Guest 1

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.

Topic 8 25:10

New React Native architecture improves perf

Guest 1

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

Scott Tolinski

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

Guest 1

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

Guest 1

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.

Guest 1

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.

Guest 1

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.

Guest 1

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

Scott Tolinski

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?

Guest 1

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.

Guest 1

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.

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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

Guest 1

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

Guest 1

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.

Guest 1

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.

Guest 1

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

Guest 1

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

Guest 1

Yeah. Yeah.

Guest 1

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.

Guest 1

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.

Guest 1

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

Guest 1

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

Guest 1

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

Guest 1

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.

Scott Tolinski

Trying to get at, like, a fire stick support

Guest 1

Oh, man.

Guest 1

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.

Scott Tolinski

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

Guest 1

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.

Guest 1

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.

Guest 1

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

Guest 1

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

Guest 1

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.

Guest 1

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.

Guest 1

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

Guest 1

the same idea.

Guest 1

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.

Guest 1

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

Topic 9 37:23

State management via MobX or Redux

Guest 1

I've I've used Redux plenty.

Guest 1

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

Guest 1

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.

Guest 1

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

Guest 1

It's very object object oriented feeling.

Guest 1

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

Guest 1

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.

Guest 1

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.

Scott Tolinski

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,

Guest 1

6 5, 6 years.

Guest 1

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.

Guest 1

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.

Scott Tolinski

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?

Guest 1

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

Guest 1

We really love Maestro for end to end testing.

Guest 1

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.

Scott Tolinski

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

Guest 1

Yeah. Yeah. Yeah.

Guest 1

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.

Guest 1

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.

Guest 1

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.

Guest 1

Yeah. Mhmm.

Guest 1

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

Guest 1

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.

Guest 1

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.

Guest 1

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

Guest 1

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

Guest 1

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

Guest 1

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

Guest 1

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

Guest 1

That's the answer.

Guest 1

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.

Guest 1

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.

Scott Tolinski

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

Topic 10 44:09

Don't store secrets in React Native apps

Guest 1

easy.

Scott Tolinski

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.

Scott Tolinski

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.

Guest 1

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

Guest 1

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

Guest 1

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.

Guest 1

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

Guest 1

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

Guest 1

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

Guest 1

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

Guest 1

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.

Guest 1

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

Scott Tolinski

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

Guest 1

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

Guest 1

You we have to wait in line like everyone else.

Guest 1

Oh, I Ios.

Guest 1

A 100%.

Guest 1

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.

Guest 1

Mhmm. So everything is supported. It is

Scott Tolinski

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

Guest 1

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.

Guest 1

It is getting inconsistent.

Guest 1

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

Scott Tolinski

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.

Guest 1

Wes That's where Wes go to die.

Guest 1

Seriously.

Scott Tolinski

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

Guest 1

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,

Guest 1

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.

Guest 1

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

Guest 1

I read. I did my homework.

Guest 1

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

Guest 1

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

Guest 1

Yeah. So many opinions. Hank Green No.

Scott Tolinski

All of the money goes towards charity.

Guest 1

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

Scott Tolinski

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

Scott Tolinski

This was such a,

Scott Tolinski

Oh, that's great.

Guest 1

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

Guest 1

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.

Guest 1

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

Guest 1

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

Scott Tolinski

Same.

Guest 1

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

Guest 1

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

Guest 1

Subscribe if if you please.

Guest 1

Wes release episodes usually once a week.

Guest 1

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

Scott Tolinski

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.

Guest 1

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

Scott Tolinski

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

Scott Tolinski

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

Guest 1

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

Scott Tolinski

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

Guest 1

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

Scott Tolinski

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.

Scott Tolinski

One of them is

Guest 1

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

Scott Tolinski

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

Scott Tolinski

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

Guest 1

So We Scott more colors than just red?

Scott Tolinski

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

Scott Tolinski

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

Guest 1

Interesting.

Guest 1

countries have a navy? US dot navy. Domains.

Guest 1

Canada dot navy.

Scott Tolinski

Yeah. Canada dot navy.

Scott Tolinski

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

Share