In today's episode, Robin and Mazen talk about some common issues and errors you might encounter when building apps with react native and how to fix them.
In today's episode, Robin and Mazen talk about some common issues and errors you might encounter when building apps with react native and how to fix them.
This episode brought to you by Infinite Red! Infinite Red is a premier React Native design and development agency located in the USA. With five years of React Native experience and deep roots in the React Native community (hosts of Chain React and the React Native Newsletter), Infinite Red is the best choice for your next React Native app.
Helpful Links:
Connect With Us!
Todd Werth:
Welcome back to React Native radio podcast. Brought to you by the NFT crash of 2022. Who could have possibly seen that coming? Episode 234, React Native tips and tricks.
Robin Heinze:
Hey Mazen, how do you feel about variable casing? Do you have a preference?
Mazen Chami:
I do have a preference, but at the same time, I kind of like my like non-preference. So you're probably referencing the Slack message that was started.
Robin Heinze:
Yeah. We had a bit of a Slack, it wasn't an argument, it was a discussion.
Mazen Chami:
Discussion. Yes.
Robin Heinze:
This morning about variable casing. Specifically, how do you handle acronyms in your variable names? Like API, HTTP, URL? Do you leave that all capitalized like an acronym normally would be? Specifically, this is in JavaScript where the standard is camel casing, right, where every new word starts with the capital letter and then the rest of the word is lowercase.
Mazen Chami:
Yeah.
Robin Heinze:
What do you do with acronyms?
Mazen Chami:
I tend to go with capitalizing the first character, at least I have in the past. So fetch Api, only the a in API would be capital, but I did vote for capital A capital P capital I, because I always come back to thinking and feeling that's the better option and easier to read. HTTP is kind of weird if the H is the only one that's capital.
Robin Heinze:
Right.
Mazen Chami:
Now, the one part that kind of throws me for a loop is if the word API or HTTP or URL is the first word in your camel-cased const, do you capitalize it? So let's say your, I guess you wouldn't do it necessarily, you'd probably put fetch at the beginning, but it was, API data, would you do capital API, capital D A-T-A?
Robin Heinze:
Yeah. Because starting it with a capital letter makes it look like a component.
Mazen Chami:
Exactly.
Robin Heinze:
Interesting.
Mazen Chami:
Because if it was API Data, you wouldn't go data from API. You could.
Robin Heinze:
Basically, what the result of this debate was is that it's a very nuanced, it's not black and white. There are cases, cases, no pun intended, there are situations where it makes sense to do it all caps and situations where it makes sense to do it like normal lowercase. It's very strange.
Mazen Chami:
Yeah.
Robin Heinze:
I think the general consensus was we prefer a strict camel case. So lowercase your acronyms.
Mazen Chami:
I think if you look at the voting, it was five to six. So very, very tight.
Robin Heinze:
Oh wait.
Mazen Chami:
Where the all caps won.
Robin Heinze:
What? The last time I looked at it was like six to one.
Mazen Chami:
Robin.
Robin Heinze:
And now it's five to six.
Mazen Chami:
Last time I looked at this thread, there were 10 replies and now there's 45 replies.
Robin Heinze:
We did, to be fair, we did go a little bit off the rails. Once you start getting gifs involved, the conversation's over.
Mazen Chami:
And might I point out the first gif came from one Robin Heinze.
Robin Heinze:
What? No. I am a proper millennial and I love a good gif reaction.
Mazen Chami:
This is a good one. We should put this gif in the show notes.
Robin Heinze:
Anyway, we'll put the epic gift in the show notes. I promise. We should probably get started. Hello. I'm Robin Heinze, your host for the day. Jayman is still, still in Florida. Actually, I think he's home technically now. I think he just got back.
Mazen Chami:
Yeah.
Robin Heinze:
As we record this, he's like just barely back, but he'll be back on the podcast next week, I think. So I'm still your temporary host for the day and friendly software engineer here at Infinite Red. I'm joined by my captivating co-host Mazen.
Mazen Chami:
Whoa.
Robin Heinze:
I searched all the notes for that word and I couldn't find it. So I think it was legit.
Mazen Chami:
You mean you didn't think about it when you were thinking about me for the show.
Robin Heinze:
I mean that, too. That too.
Mazen Chami:
Yeah. I thought so. Thank you.
Robin Heinze:
Mazen lives in North Carolina with his wife and new little baby. He's a former pro soccer player and coach, and is also a senior React Native engineer here at Infinite Red. How's it going, Mazen?
Mazen Chami:
Going well, getting more sleep as the days go by, so can't complain.
Robin Heinze:
Good. That's good. I wish I could say the same. My kids are sick right now, as am I, so that kind of eats into the sleep a little bit. I do have to take a moment to say that this episode is sponsored by Infinite Red. Infinite red is a premier React Native design and development agency located fully remote in the U.S. and Canada. If you're looking for React Native expertise for your next React Native project. Hit us up. You can learn more on our website, infinite.red/reactnative. And of course, don't forget to mention that you heard about us through a React Native radio podcast.
Robin Heinze:
All right, let's get into our topic for today. Today, it's going to be a little bit of a hodgepodge. I think we're going to talk about just general React Native tips and tricks. If you're new React Native, these are some things you might encounter, ways to just generally improve your React Native app and helpful tips for being a React Native developer that we've learned through our, gosh, six to seven years of React Native experience.
Mazen Chami:
Yeah. If you've been developing in React Native for a while, some of these will sound very familiar and some that you'll see them and you'll be like, oh, I forgot that, back again and redoing.
Robin Heinze:
Yeah. Yes. It should hopefully be instructive if you're new to React Native and relatable if you're experienced in React Native. Let's talk about maybe some of those pesky red screens that you might see when you're doing React Native development, especially if you're first starting. I would say probably the most common that you might see right away is the infamous bundle not found, could not connect to development server.
Mazen Chami:
I feel like as things have matured a little bit in the ecosystem, I say that matured and then I come back and say I get this all the time with Android, so I tend to think this is more of an Android one than iOS, but doesn't say it doesn't happen on iOS. For me, the easiest and first place I usually start when it comes to this error, I do the whole ADB trick where you do adb reverse tcp:, it's usually 8081, tcp:8081. And then your Android version usually ends up working at that point.
Robin Heinze:
So yeah. That's specifically on Android, right?
Mazen Chami:
Yes. And if you're-
Robin Heinze:
On a device.
Mazen Chami:
Yeah. On a device. If you're using a physical Android device, that means your Android device can't figure out how to talk to your development server because your ports aren't available to your Android device. So you have to run that little command. It's in the React Native docs. We'll make sure to link it. We also have a nice, helpful yarn script for that command in our Ignite boilerplate as well, if you're using Ignite. So that's one reason you'd see that. React Native does have a lot of nice developer experience features. Mainly when you run it, it will start a packager if there's not already a packager running, so hopefully that would take care of this error for you.
Mazen Chami:
Yeah. I think kind of going back to the whole 8081, I know this is also an issue with Windows machines because 8081 is run by another program, I can't remember the program off the top of my head, so for Android, you specifically have to pick a port other than 8081. And I believe that the docs usually say 8088 or something. I can't remember off the top of my head.
Robin Heinze:
Oh.
Mazen Chami:
It's something very random where you're like, why don't we just use 8082, but I think they just point to 8088 as like a freebee in case other programs are using them. So I think this kind of says, like tells your Android device, listen on this port for my updates, for my bundle so that you can kind of get the live updates. So that's how they kind of find the bundle. Do you see this often on iOS?
Robin Heinze:
I see... I wouldn't say I see it often. Sometimes I'll see it if I've killed my packager and then I go to manually reload my app. That happens relatively frequently.
Mazen Chami:
Yeah.
Robin Heinze:
And then an error kind of related to this is when you get an error about the port being taken, that happens a lot if you have maybe multiple React Native apps running at the same time, which maybe you're doing if you're spinning up new React Native apps to try out new features or you're building that to-do app and other sort of tutorial-style apps. If you have multiple React Native apps, you may get, port is already taken, which just means you have a packager running already and you need to kill it.
Mazen Chami:
On iOS in your info.p list, you'll need the NSAllowsLocalNetworking to be set to true in your XML so that it can actually look at local host when it's searching.
Robin Heinze:
That's true by default, right?
Mazen Chami:
It should be true by default. Yes.
Robin Heinze:
Yeah.
Mazen Chami:
Yeah. So if you're not, if you're getting that with Android, just a quick check in your info.p list to make sure it's still there and maybe hasn't been overwritten.
Robin Heinze:
Awesome. I think a common one that a lot of beginners see is, there's a couple different invariant violations that you'd see a lot, one of them is text strings must be rendered within a component. So if you just have some sort of stray characters in your React Native like TSX file or JSX file, it'll tell you that. Because if you have just random characters, they have to be wrapped by an actual text component. You can't put them directly inside of a view. I also get that error if I've just... if my cat's walked across my keyboard or I've started typing and I didn't know where my cursor was, you'll get that. There's also invariant violation element type is invalid, which a lot of times means it's trying to render a component that wasn't exported properly either. You're trying to import it as a default component, but it's a named export or you're trying to import it as named and it's default. That's pretty common.
Mazen Chami:
So that's one where you would do import file name from path or it'd be import curly brace file or component name from path.
Robin Heinze:
Yeah. Right.
Mazen Chami:
That's fairly common, I would say. The next one on our list is package not installed correctly, unable to resolve module. This is for me, I usually get this when, maybe on newer versions again it's kind of been improved on, but sometimes you're linking or if you do your linking manually, you may have missed a step along the way. So there is something that's missing that you kind of need to go back and reinstall.
Robin Heinze:
Or you've forgotten to run yarn, and you're referencing a package that hasn't been installed or you may need to restart your server after installing new node modules. A lot of times you'll get unable to resolve module errors.
Mazen Chami:
Yeah. I usually just tend to... Oh, but wait, hold on. I think we just figured out Robin only uses yarn and not MPM. Good to know.
Robin Heinze:
That's true. Infinite Red is pretty much a yarn shop. Not an actual yarn shop.
Mazen Chami:
Can't remember last time I used MPM. I think also one thing that I do to kind of avoid this is always kill my server, install or add depending on what your package is and then restart it.
Robin Heinze:
When in doubt, restart.
Mazen Chami:
Yes.
Robin Heinze:
That's a lesson that I learned pretty early on in when I was in code school. Because I mean, if you're new to programming in general, it makes sense that you wouldn't even know that as a concept. So I would fix something and not understand why I wasn't working. And someone was like, oh, hey, you have to restart your real server. Oh, that's a thing. So yeah, when in doubt, restart. If you want to make extra sure that you're completely clean slate, you can pass --reset cash to your start command.
Mazen Chami:
That's always safe to do pretty much all the time.
Robin Heinze:
I pretty much do that by default.
Mazen Chami:
Yeah.
Robin Heinze:
That clears your metro cash, I think.
Mazen Chami:
Yes.
Robin Heinze:
The next one is a command phase script execution failed, which sounds like it's specific to people with M1 Macs, which is starting to be more and more people. If you ask Jayman, if you're not using an M1 Mac, you're basically not a real developer.
Mazen Chami:
Sorry for using my 2016 laptop, Jayman.
Robin Heinze:
Intel is obsolete, according to him. I'll be sure to go, I live just like 10 minutes away from Intel's main campus so I'll be sure to go over there and tell them like, hey, you guys are obsolete. But yeah, if you have an M1 Mac, you may get this command phase script execution failed error, and there is something you can add to your, I think pod file...
Mazen Chami:
Yeah.
Robin Heinze:
... to fix that. And we'll link that in the show notes if you've not familiar with it. So there's also a bunch of other errors that you might get trying to use various features of React, specifically React hooks, which are newish, they are what, three or four years old now.
Mazen Chami:
I'd love to see an app not using hooks these days.
Robin Heinze:
I know. I feel like most apps are using hooks now. They can be somewhat tricky to learn or may be a bit counterintuitive. You can get some errors when you're first trying to use hooks. The one that I still get regularly is invocation order or like conditional declaration. So if you try and put a hook like a use effect, a use state inside a conditional, or if you try and do like an early return before you've declared a hook, so if you do a, if condition is met, return null, and then after that you have a use effect or a use state, you're going to get an error saying that hook, like you can't change the order of your hooks, which just means you always have to have the exact same hooks in the same order every single time your component is rendered.
Mazen Chami:
I mean, that sounds like a common one, too, because you would think that from a performance perspective, coming into a component, I'd want to check my props first and say, if ID is undefined, go ahead and return null because we don't have an ID, we don't have to render, cause like a network bog or just any performance downside. Instead you could just kind of keep your use effect first, and use effect always usually runs on change of your parameters, or if you just don't have a parameter, on mount. And you could wrap whatever is in there checking the ID and then make sure the ID is in one of your parameters, so whenever it changes it'll re-render every single time.
Robin Heinze:
Yep.
Mazen Chami:
Simple fix.
Robin Heinze:
Basically, you want to keep your conditionals inside your hooks in that case.
Mazen Chami:
And you could still have your conditional outside of the hook that still checks and returns null.
Robin Heinze:
You just have to make sure the hooks, yeah, the hooks come before it or always render. You may also get errors about missing dependencies. If your hook uses a particular variable and it's not in the dependency array, you may get, I think they're more warnings, not errors, I don't know how strictly it's enforced, it's not going to be a red screen, but you may get linting errors.
Mazen Chami:
You may get a lot of linting errors, and depending on how your project is set up. I think we worked on a project, Robin, where the entire CI/CD would kind of crash on you if it wasn't included. So-
Robin Heinze:
Yes. Very true.
Mazen Chami:
Depends on how strict your linting is.
Robin Heinze:
Yes. You'll also get errors if you try and call hooks within other hooks. So if you try one I tried to do the other day and got yelled at, was I tried to put, I think a use memo inside of a use callback.
Mazen Chami:
Yeah. I try do that all the time.
Robin Heinze:
And that was not... that's not valid. Yeah. So don't do that. So those are, I mean, those are some errors that you'll probably encounter when you're first learning React Native or even if you're not first learning React Native, as evidenced by the fact that I encountered most of those errors in the last week. But what happens if you get an error that just doesn't make any sense, you don't know where it's coming from, you Google it and there's like nothing helpful, you just don't have a good reason for this error to be happening? What are some things you can do? Here at Infinite Red, we have a command, a custom like bash script called newclear.
Mazen Chami:
I love that name.
Robin Heinze:
What you can... I think Gantt, Gant Laborde, our COO-
Mazen Chami:
Sounds about right.
Robin Heinze:
No, CIO. Gant Laborde, our CIO is the creator of that script. And I don't know if he actually came up with the name. It sounds like something he would've come up with. Maybe it was Steve. I'm not sure. Steve is a former IR member. But it's a punny name. It's spelled N-E-W-C-L-E-A-R. So newclear, but it's when you say it fast, it sounds like-
Mazen Chami:
Nuclear.
Robin Heinze:
Nuclear. And basically what this script does is it blows away everything that is possible to blow away to sort of reset your environment to a pristine state as if you had just set it up or just cloned the repo. Some of the things it does, it clears, it deletes all your node modules and reinstalls. So if you had any outdated packages or things that got into funky state, clears those out, reinstalls, it clears out iOS derived data. Now I don't actually know what derived data is, other than I know it's something you got to clear out if you're getting weird iOS errors. Do you know what derived data is?
Mazen Chami:
I'm just confirming.
Robin Heinze:
I know. I'm Googling it.
Mazen Chami:
I think I know exactly what it's talking about.
Robin Heinze:
This is how much it doesn't impact my daily life. I just sometimes have to delete it. Deleting. So I'm literally Googling, deleting derived data, a well known trick that comes in handy every time Xcode behaves strangely for no obvious reason. That basically sums it up.
Mazen Chami:
So that's like, that's the command of going into your iOS and then doing pod?
Robin Heinze:
No, there's literally a temp folder in the-
Mazen Chami:
Oh, in your library.
Robin Heinze:
Yeah. In your libraries-
Mazen Chami:
Okay. Yeah. Okay, fine.
Robin Heinze:
... directory called derived data.
Mazen Chami:
So yeah, for this one, you'll need to go into your system files, and you kind of go into your user username, and then within library, there's developer Xcode derived data in the structure, and you'll either find your project that you're working on and then delete everything within there, or just kind of delete everything, essentially, since we're restarting it all here, it shouldn't affect things. In the past, I think I've done this once before and I just kind of reset everything completely.
Robin Heinze:
I think you can also, when Xcode is open, you can run the clean command, which I think there's a keyboard shortcut.
Mazen Chami:
Yeah. I think it's command shift K, if you're using a keyboard.
Robin Heinze:
That sounds right. So if you have Xcode open with your iOS project, you can run command shift K. And I think that will clean the build folder as well as derived data.
Mazen Chami:
Yeah. That's always a good check to do before running your project.
Robin Heinze:
Yeah. So in that case, yeah, it deletes derived data, like we just talked about, and it also clears out the build folder. And the build folder just contains the outputted binaries, the installable builds. You will have to run react-native run-iOS again to rebuild after you do that, but it should be a clean, nice clean slate.
Mazen Chami:
So I think that kind of covers the iOS side. Right?
Robin Heinze:
Mm-hmm (affirmative).
Mazen Chami:
We cleared derived data, we clean and then kind of higher level React Native in general, you can restart your Watchman, so restart your server with resetting your cash so that we're all set. You can delete your node modules and reinstall. And we said on iOS you can delete your pods and your pod lock file. And then it-
Robin Heinze:
I don't know if it deletes the pod log. It definitely deletes the pods.
Mazen Chami:
Okay.
Robin Heinze:
Your pods directory, which is basically equivalent to deleting your node modules directory.
Mazen Chami:
Then you'd have to run pod install.
Robin Heinze:
Reinstalls. Yeah.
Mazen Chami:
Yeah. And then you should have a clean iOS build to then rerun and get set up.
Robin Heinze:
And if you're still getting the error after that, I'm really sorry. You may just have to keep Googling or come ask in the IR community Slack.
Mazen Chami:
Yes.
Robin Heinze:
Community.infinite.red. Maybe someone will be able to help you. From the Android side, the equivalent sort of clean function is gradlew clean.
Mazen Chami:
And I believe that's, if you're in the Android folder, it's ./gradlew, one word, all the dot slash one word space clean, and that'll just run a gradle clean.
Robin Heinze:
I'm curious what that command... what do you call that command in your head when you're running it? Do you call it gradle W?
Mazen Chami:
I do.
Robin Heinze:
Because I definitely call it gradlelew.
Mazen Chami:
Gradlelew. That's what I'm going to start calling it.
Robin Heinze:
I don't know if I'm the only one.
Mazen Chami:
I wonder if the W stands for anything.
Robin Heinze:
That's a really good question.
Mazen Chami:
Regardless of what our search comes up with for the name of this gradlew, I think you should just stayed gradle... Oh.
Robin Heinze:
I'm going to call it...
Mazen Chami:
It means great ole wrapper.
Robin Heinze:
Oh.
Mazen Chami:
Boo.
Robin Heinze:
That's boring.
Mazen Chami:
That's very boring.
Robin Heinze:
Great ole wrapper. I will always call it gradlelew in my head, even if nobody else in the world does that.
Mazen Chami:
Now it's ingrained in my head forever.
Robin Heinze:
So yes. Cleaning, cleaning gradle fixes a lot of things in Android.
Mazen Chami:
Yeah.
Robin Heinze:
There's also, I think that's the only thing I know to do for Android other than completely delete, like deleting the app off of your simulator or device.
Mazen Chami:
Yeah. That's the nuclear, not newclear, that's the nuclear option where you just delete the app, delete your entire code like repo.
Robin Heinze:
I have done that.
Mazen Chami:
Yeah.
Robin Heinze:
I have done that.
Mazen Chami:
Done that several times. Now this is kind of just off top of my head. There is also another issue with sometimes your node version being out of sync. And that's kind of like really, really, really deep in the weeds. It could come by you deciding, you get the prompt and you're like, yeah, sure, update my node version, and then all of a sudden you're node, what are we on, 18? But I think React Native is only working up to version 17, I believe, right now. So you could be stuck in that situation where you need to downgrade your node, make sure your terminal is using that new lower version of node, and then running things.
Robin Heinze:
I definitely recommend having a node version manager for managing your environment, because sometimes there may even be differences between two different projects and you need to be able to switch easily. NVM is the most common I think, but-
Mazen Chami:
That's what I use.
Robin Heinze:
It's, I don't know. At Infinite Red it's not as popular. I don't know. A lot of our people use N.
Mazen Chami:
Yeah. I use NVM.
Robin Heinze:
Yeah. I also use NVM.
Mazen Chami:
This is going to start another thread that ends in a gif.
Robin Heinze:
Whatever you use, just some kind of version manager is very, very much recommended. Other than that, oh, Watchman, you'd want to... you run watchman watch-del-all. And if you don't know, Watchman is, it's a library that... I don't actually know. What does Watchman do? See, I'm learning so much. I know all the stuff that you're supposed to run, but I don't actually know why. I think it helps Metro watch for changes in your JavaScript.
Mazen Chami:
Is that for like live loading?
Robin Heinze:
I believe. I mean, yes, I believe so. So it's actually a Facebook package. So I think it was built specifically for React Native.
Mazen Chami:
React Native uses Watchman to detect when you've made code changes and then automatically build and push the update to your device without the need to manually refresh.
Robin Heinze:
Okay. So it's for live reload.
Mazen Chami:
Live reloading, essentially.
Robin Heinze:
But sometimes you can get stale Watchman processes, especially if you've been building multiple apps. That used to happen to me all the time on a client project where they had multiple like Brownfield React Native apps. And so you had to have... you may be running three separate servers for three separate React Native projects, so I was constantly having to clear out Watchman.
Mazen Chami:
And that kind of goes back to the whole port business of making sure you're on the right ports and all that.
Robin Heinze:
Yeah. I can't remember exactly which red screen error it is, but there's one of them where it specifically gives you a list of like four different things to try, one of which is clearing your Watchman, deleting your node modules, clearing your yarn or your Metro cash. All the things that we just talked about, which is helpful.
Mazen Chami:
Do you, as someone who's troubleshooting my error, do I have to go through all this stuff and potentially including what we talked about earlier with the port and reinstalling an app, do you have to do all of this to get your app working, would you say?
Robin Heinze:
If I've been stuck on a particular error for a while, then I basically just do everything I can think of because it just, it ensures me that I'm in as clean of an environment state as I can and that it's not being caused by something transient in my environment.
Mazen Chami:
I would agree with that. And if you think about it from some people might be like, well, what about my production, is my production going to get stuck and all that? No, because when you're doing a new build, it essentially kind of resets everything from scratch for you. So at the end of the day, you're pretty much doing the same thing to kind of get a new build or an updated build on your device.
Robin Heinze:
Those are the main troubleshooting strategies we use. I'll make sure to link our newclear. I think it's actually a package you can install, a global NPM package you can install. So I'll make sure to link that in the show notes. We've talked about errors you might see and then troubleshooting strategies for addressing those errors, but what about preventing errors in the first place?
Mazen Chami:
Yeah. And that's where all types of testing can kind of come into your code. I believe React Native episode 180, testing strategies, tools and frameworks kind of dives deeper into this. So I don't think we necessarily have to go too deep.
Robin Heinze:
Yeah.
Mazen Chami:
But on a high level, there's multiple things you can do to make sure your code is good. First one I'll touch on is just simple unit testing, small parts of your code, individual functions, individual classes. You can even, I believe nowadays, even test your hooks and make sure all that's working as expected. So put in as much unit tests as you can, just to make sure your functions that your apps are calling are clean and you are returning what's expected.
Robin Heinze:
Definitely. It's also, anytime you have a utility file, or if you're encapsulating some of your custom hooks in their own files, that's a good place for unit testing. Anytime where you're doing sort of plain JavaScript TypeScript, that's probably a good place for unit testing.
Mazen Chami:
Another one is integration testing. So what is that necessarily?
Robin Heinze:
Yeah. I'm pretty sure if you ask, each developer will probably give you a different answer about what integration testing is.
Mazen Chami:
Yeah.
Robin Heinze:
We had another one of those epic Slack conversations about testing a couple weeks ago.
Mazen Chami:
Yeah. According to React Natives documentation, at least, when you combine multiple parts of your app together to see them interact, this could be something where you have a page that has a button, and then that calls another component that shows, I don't know, let's say a text. Does the interaction happen correctly between the two when the button's pressed and it sets a state to show this new component that component actually mounts correctly and shows the right value on the screen. That kind of goes hand in hand with component testing. Do they render as expected? Do your on press functions happen as needed? Do you see on the screen what's expected? The package React Native testing library is a really good one for this.
Robin Heinze:
Related to those, there's also the concept of snapshot testing, which maybe a bit controversial. I don't know. Some people think it's not very useful, but it is another option, which is basically tests that take, there's a virtual renderer that renders your component and takes a snapshot, and then compares it to your app's current state. So it's basically a regression. Like, did you break something with the changes you just made? And I mean, it can be a good like sanity check, but it's not as... it's more passive than component testing and integration testing. You're not actively testing something. You're just kind of making sure they didn't change.
Mazen Chami:
Then the last one on the list that's kind of encapsulating all this is end-to-end testing. There's the two popular ones are Detox and Appium. React Native radio episode 189, reliable Detox, kind of goes deeper into what Detox is and how it works. Pretty much what Detox does is you kind of see your app interaction kind of running through. So a series of events happening. In React Native, this is just an episode of going back to old episodes, React Native radio episode 229 with Josh Justice. In the show notes, we kind of link to Josh Justice's talk for the Render Atlanta conference, and in the video, you'll see a really good example of the end-to-end testing kind of running through a scenario, I believe where it mounts the app and it adds a couple to-dos and deletes a couple and kind of runs through that interaction. That's a really good way to test your app.
Mazen Chami:
One of the apps I had built in the past, it's now no longer on the app store, the company has since been bought off and folded, but it was a workout app. And pretty much what we did with Detox was we mounted, we logged into this fake user account that we had set up on the backend. And every day you had to fill out a form. We filled out a mock form. We had different scenarios built out where every path would kind of fill the form out differently, give you different... let's say you just lifted or you just went for a run, it'll input all that, and then give you your recovery workouts. And then the app would run through the workout and then kind of give you... tell you to ice your knee, for example.
Robin Heinze:
Huh.
Mazen Chami:
So we had all those mapped out and it would run through that in Detox. And it was really fun to see it flying through all that and kind of showing you on the screen.
Robin Heinze:
It literally opens up a simulator and you can see it as if like a phantom person is clicking through your app. It's wild.
Mazen Chami:
Yeah. It's really cool. And it's very rewarding at the end, after you build all these end-to-end tests and you see them run through and you get all your green check marks, and even, I mean, you could have everything that we just talked about, unit and integration component end-to-end all happening at once, and once you see all those green check marks happen, pretty much kind of covered as many bases as you can to make sure your app is clean and good to go for the user.
Robin Heinze:
Awesome. Well, I think that kind of covers everything that we are going to get to today. Hopefully this was either helpful or relatable depending on how experienced you are. If you'd like to nerd out some more about React Native, of course check out Jayman's Twitch stream, reactnativelive@rn.live or youtube.infinite.red. He spends a couple hours a couple times a week just doing random stuff in React Native. It's a good time. You can also join our Slack community at community.infinite.red. We have almost 2000 React Native developers in there. Lots of helpful people. If you're stuck on an error that you just can't fix and you've tried running newclear and it's still happening, come hit up our Slack community.
Mazen Chami:
I think I see an error posted every single day, so you're not alone.
Robin Heinze:
Yep. Where can people find you on Twitter, Mazen?
Mazen Chami:
I'm @MazenChami.
Robin Heinze:
You can DM Mazen with your questions too.
Mazen Chami:
Closing my DMs now.
Robin Heinze:
And of course, I'm @Robin_Heinze, and we can find React Native radio @reactnativerdio on Twitter. As always, thanks to our producer and editor, Todd Werth, our assistant editor and episode release coordinator, Jed Bartausky, our designer, Justin Huskey, and our guest coordinator, Derek Greenberg. Thanks to our sponsor, Infinite Red. Check us out at infinite.red/reactnative. And a special thanks to all of you listening today. Make sure to subscribe wherever you get your podcasts. Remember that Infinite Red is also still hiring React Native engineers. So if you're a senior level React Native engineer in the U.S. or Canada, go to careers.infinite.red. We'll see you next time.