Robin, Jon Major, and Jamon talk with Rich Evans about Reactotron, which is a free desktop app for inspecting and debugging React Native apps.
Robin, Jon Major, and Jamon talk with Rich Evans about Reactotron, which is a free desktop app for inspecting and debugging React Native apps.
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 Log from Blammo. It's better than bad. It's good.
Todd Werth
Episode 205, Reactotron debugging state, and more with Rich Evans.
Jamon Holmgren
Hey Robin. You're back. Did you know that we lost half of our audience when they found out you weren't going to be on the episode last week?
Jon Major Condon:
It's true.
Jamon Holmgren
Yeah. I mean, it was like speaking to an empty room.
Robin Heinze:
I'm flattered.
Jamon Holmgren
So what do you think is going to happen when you're on maternity leave? I mean, are we just going to be out of a job?
Robin Heinze:
I think you're going to end up not recording any episodes. Because it's just, there's going to be no inspiration, no spark. It's not going to be possible.
Jamon Holmgren
You need some feedback and if nobody wants to listen. I don't, I don't know.
Jon Major Condon:
It basically be the end.
Robin Heinze:
Who's going to, who's going to make fun of Jamon?
Jamon Holmgren
I feel like there's a line of people that are willing to make fun of me.
Jon Major Condon:
Take a number.
Robin Heinze:
You have to bring some of those people on to fill the gap.
Jamon Holmgren
Of course the people that are speaking to me, I am Jamon Holmgren, your friendly host and also CTO and co-founder of Infinite Red. Of course I'm joined by my striking cohost Robin who is back this week, and Jon Major. Robin is a senior software engineer located in Portland, Oregon, works at Infinite Red and specialized in React Native and making fun of me. Jon Major is another senior software engineer, another React Native engineer, another Infinite Reder. So far he hasn't made too much fun of me because you know, he's new and yeah.
Robin Heinze:
Give it time.
Jon Major Condon:
Eventually I'll specialize in it. Actually I am on a project with Robin now, so...
Robin Heinze:
That's true.
Jamon Holmgren
Oh, great. This is the beginning of the end.
Robin Heinze:
Yes. I'll teach him my ways.
Jamon Holmgren
We do have a guest today and I'm excited to have him on the program. Rich Evans. Rich is a senior software engineer. He also specialized in React Native and is the primary maintainer of Reactotron, which is why we're having him on the episode of course. He lives in Jacksonville, Florida. Is the Jacksonville or Jacksonville Beach?
Rich Evans:
It's Jacksonville.
Jamon Holmgren
Okay. So he's on the Northeast corner of Florida in that giant city.
Robin Heinze:
Is there a a beach there?
Rich Evans:
There's many beaches there. Yes.
Robin Heinze:
So yeah, Jacksonville beach is probably not inaccurate. It's just not the name of the town.
Jamon Holmgren
Well, actually isn't Jacksonville Beach the name of a town?
Rich Evans:
Yes, over on the east side of Jacksonville, there is Jacksonville Beach.
Robin Heinze:
That's confusing.
Jon Major Condon:
It's like Panama City and Panama City Beach.
Robin Heinze:
What, are those different?
Jon Major Condon:
Two different places. Yeah.
Robin Heinze:
So if there's a beach in Jacksonville and you say, "I'm on the Jacksonville Beach," but you're not in Jacksonville beach that could get really confusing.
Rich Evans:
Technically, Jacksonville doesn't really have its own beach. It's like Jacksonville Beach. Then there's Neptune Beach and Atlantic Beach and other like different types of beaches. But Jacksonville itself is kind of just like the encapsulating of all of that and also downtown.
Robin Heinze:
Florida really knows a lot about about beaches because they have a lot of them.
Jamon Holmgren
They do, like the whole state is a beach, right?
Rich Evans:
Basically.
Robin Heinze:
Pretty much all coastline.
Jamon Holmgren
Depending on how high the tide is.
Robin Heinze:
And or swamp.
Jamon Holmgren
Right. A fun fact I've actually swam on, now I don't even know what Beach it is after all of that. But it was in Jacksonville Beach, the town. I actually swam out in the ocean there.
Jamon Holmgren
Rich was at that conference. That was Ancient City Ruby/Rails/React. That was put on like late... It was October sometime, but it was still great swimming. Of course it's Florida. Right?
Jamon Holmgren
So Rich, of course, he lives in, as we said, Jacksonville, Florida with... you have a wife, two daughters, and you have a lot of hobbies behind you. You do some 3D printing and things like that, right?
Rich Evans:
Yes. Although that's not depicted here, but yeah, I do 3D printing. Recently. I've picked up building Legos.
Jamon Holmgren
Yeah, Okay. That's what we see behind you.
Rich Evans:
Yeah. That's that's what you see.
Robin Heinze:
I see a baby Yoda, big Yoda.
Rich Evans:
Baby Yoda, Big Yoda, Stormtrooper, Darth Vader's back there. Darth Vader's helmet's back there too.
Robin Heinze:
Gosh, I love Lego. I'm so excited for my daughter to get old enough for like... She's still into Duplos. She's like not quite old enough for the little Legos, but I'm so excited.
Rich Evans:
You don't have to wait. You can just do it.
Jamon Holmgren
You don't have to wait. You have all the excuses in the world right now. Of course she could... Now she's she's past the like she just like eating stuff.
Robin Heinze:
I think she would be pretty good. I think it's more about the motor skills of getting the tiny bricks pulled apart and stuff. She'd probably get frustrated. Soon. Very soon.
Jamon Holmgren
I'll still have kids young enough to do Legos, but they seem to like...
Jon Major Condon:
Wait, wait, wait, wait. Young enough to do Legos. I don't think there is and age.
Robin Heinze:
The box says age 99.
Jamon Holmgren
Yeah. Well, I don't have any kids over 99, so I'm still good. All right. I should probably get to the paying the bills part of this episode. So this episode is sponsored by Infinite Red. Infinite red is a premier React Native design development agency located fully remotely in the U.S. And Canada. We have years of React Native experience and we have deep roots in the React Native community. We have cool software like open-source software, like Ignite and Reactotron, which we're going to be talking about. We do all kinds of cool stuff. So go to infinite.red/ReactNative to learn more about us. You can also, if you're interested in working at Infinite Red and you're located in the U.S. Or Canada, go to careers.infinite.red. All right. Let's get into the topic for today.
Jamon Holmgren
So Rich found out about Infinite Red and kind of got connected with us when he started contributing to Reactotron. This was, I don't know, this was a while ago, right? Rich, like probably 20... I want to say 2018, 2017.
Rich Evans:
I think it was like more than 2016.
Jamon Holmgren
Was it 2016? That long ago? Wow. Yeah. That's pretty awesome. So Reactotron. We're going to be talking more about that, but you got involved with that and you... Were you new to React Native at that time? Or had you been doing it for awhile?
Rich Evans:
I had been doing it for a little while. I actually started in React Native back before they had Android support even. I started really wanting to find something to help debug and work in what I was doing because I always found it like kind of black boxish at the time. You would always have to turn on remote debugging to get really any type of information out of it. Because you'd have to hook it up to like the Chrome debugger to get your console logs or anything. I very quickly found that doing so also introduced a lot of differences between how it runs without debugging them and with it off because it runs in the Chrome JavaScript engine. So in doing that, I looked around for a tool and I found Reactotron. Started looking at it, started trying it, really liked it. I started contributing to it and trying to help push it forward.
Jon Major Condon:
Was Flipper thing back then?
Rich Evans:
It was not. Flipper came out a couple of years after Reactotron really started gaining some ground. Flipper was actually introduced at the Chain React conference put on by Infinite Red.
Robin Heinze:
Was that the same conference that Darren gave the talk about Reactotron?
Rich Evans:
Yes, I believe it was.
Jamon Holmgren
Yeah. Our Darren Wilson, one of our principle software engineers here at Infinite Red, gave a talk at Chain React 2018 about Reactotron. It was really well received. We'll link to it in the show notes. I think one of the things with Reactotron is, contrary to most things at Infinite Red, we don't actually promote it very well. It's kind of sad because it's one of our coolest things. Let me back up before we get too far in and talk about what Reactotron is. So it is a free desktop app. It works on Windows, Mac OS, and Linux. It is written in Electron and it is designed specifically for debugging and inspecting React and React Native apps. Now it's mostly made for React Native, but it does work for React.
Jamon Holmgren
The reason that we mostly focused on React Native is because React already has tons of tools. A lot of things you can use to inspect state and whatever. Where React Native, the cupboards a little bare there. There's some stuff. Obviously with the Flipper coming on board, it helps and stuff. But really at the end of the day, there wasn't a lot, especially when we first made it. It was made by a guy named Steve Kellock, who originally created it while he was at Infinite Red. He left a few years ago and he had worked... Rich, you had worked with Steve at that time, right? You were working together on Reactotron?
Rich Evans:
Yeah. There was a short period of time that he and I both were kind of contributing to it. I can't remember the exact length of it, but there was a time. Yes.
Jamon Holmgren
Then Steve leaves and Richard's like, I guess this is mine now. Just got dumped in his lap because he was really the top contributor at the time. But what's been awesome is Rich has just continued to support it throughout the years.
Robin Heinze:
So I think one of the reasons for that is that Reactotron, while it's a tool for React Native, is not React Native. So all of us here at Infinite Red that are experts at React Native can sometimes feel a little bit lost in Reactotron and how it works. So I'm curious, Rich, if you can give just like a really high level TLDR, like how has Reactotron built? How does it work? How does it actually like hook into your React Native app?
Rich Evans:
Sure. So the way it works actually differs depending on if you're working with it within a Flipper or the standalone Electron app, actually. So we'll talk about the Electron app first, cause that's kind of where it started. So let's start there. So when the Electron app spins up a WebSocket, a server, your React Native app will actually connect to that WebSocket server and then it just passes messages in between both directions. So you can actually have Reactotron cause change in your React Native app, and your React Native app can pass information to the Electron app. So this would be information like your Redux store information if you're using Redux.
Jamon Holmgren
Rich, this happens even if... So, obviously you have the simulator emulator, but you can actually do it with a device too, right? Like Reactotron will work even if you're running your React Native app on a device, as long as it's close. We're not talking about like in production.
Rich Evans:
Correct. We actually suggest you don't use Reactotron in production because it tries to connect and it does nothing. It tries to open a WebSocket connection to some random IP address or local hosts, which is not ideal.
Jamon Holmgren
It'll look a little suspicious if you leave it in.
Rich Evans:
Yes, if you are on the same network, you can have your real device connect to Reactotron. There's typically a little bit of setup because sometimes we can't detect the IP address of your computer to connect to. So sometimes you have to help it out and give it the IP address. Once you pass that hurdle, it should work on devices well.
Robin Heinze:
I find it really useful.
Jamon Holmgren
As I mentioned, Reactotron, you can use it on React Native and that's generally how we use it at Infinite Red, but there's also Reactotron for React JS. Just briefly. We're not going to go into the React JS side very much, but what would you say is sort of the difference there between the two?
Rich Evans:
In the sense of using the Electron app, there is really no difference because it just connects via a WebSocket you're paired to, and it was pipes to all the data over. We don't do a lot of special things on the React JS side because as you mentioned earlier, the tooling that's available already over there. So it was put together as kind of like, "Hey, we can do this because it's all React." It all just works. It's not really anything that we are trying to push super forward.
Robin Heinze:
Well, yeah. React has the advantage of having Chrome. There's a lot of tooling that's a lot more available for it versus React Native where you're kind of in this little isolated box of your simulator. So you don't have as many tools. So, that's where Reactotron comes in.
Jon Major Condon:
How does a dev use Reactotron day to day from a developer experience?
Rich Evans:
So how I typically would use it, or how I typically do use it. I have it running at all times while I'm developing and working on whatever feature. I have all of that information piping into Reactotron after I haven't set up the initial setup. With all of that data, if I run into a problem, an error occurs or something that I don't expect occurs, I can very easily look at Reactotron and go back and see all of the information about what led me into that situation to help me figure out what happened. Because we're getting a lot of different information in there. As long as you wired it all up, we have network requests. We have information about your state, assuming you're using a MobX-State-Tree or Redux, and you have it all wired up. If you're using things like a Redux Saga, there's information about like what sagas are running, which ones completing, what effects are occurring.
Rich Evans:
So it opens up the door to having a lot of information at your fingertips. If you have it running at all times, you don't run into a situation where like you see a problem and then you have to, "Well, let me launch Reactotron and I'll redo the problem." So the way I try and look at it is it's just something that's always there. Because we don't have to have a debug mode on in React Native, we don't have that overhead and the problems that come along with that. So you can just run it and not even think anything about it.
Jamon Holmgren
Yeah. I really see state management as being sort of the killer feature of React, Reactotron, where you can inspect state and really kind of keep track. You can subscribe to parts of your tree. We use MobX-State-Tree, but you can do this with Redux too. You can subscribe to the particular store that you care about, or even the part of the store that you care about, or even just an individual model that you care about. You can just subscribe to that and say, "Hey, watch this and anything time something changes, I want to see what's going on in there."
Jamon Holmgren
I've had that happen. Like I remember working on one of the few... I don't work on client projects. So, most of my stuff is just helping other people. But in this case, this was like last year, there was a little app needed to have some changes done, nobody was available. So I just took it on to kind of help out. One of the things that I thought was cool is... We're having some problems when you would log in, you'd lose your session. It would just go away and you'd be back to the login screen. I could watch the session and see like the precise moment when the session information went away. That was really, really handy. Because I could just watch just my user. "Hey, look at my user and anytime something changes I want to see what's going on."
Robin Heinze:
Yeah. You can also take snapshots of your state and replay to a particular snapshot. So one of our new devs, Lizzi...
Jamon Holmgren
She just started this week.
Robin Heinze:
She just started this week and we're super happy to have her.
Jon Major Condon:
Hey Lizzi.
Jamon Holmgren
Hey Lizzi.
Robin Heinze:
She was telling a story about a project where her app, they had a really long signup process and she would be working on that part of the app. Instead of having to like repeat this super long arduous signup process, every time she was able to just take a snapshot and then jump back to that point in time, which can save a ton of time as a developer when you're just trying to like iterate.
Jamon Holmgren
Yeah. That's super cool.
Jon Major Condon:
Was she using custom commands with that one too?
Jamon Holmgren
No, actually what's cool about that is... So custom commands, we're going to talk about that for sure. Cause that's a super cool feature of Reactotron, but what she was doing is going to the state tab and taking a snapshot. So you can literally just hit a button and it saves your current state. Then you can then click on that and restore that state back later. So that's all she was doing. It's not a custom command. It's actually a built-in thing for Reactotron.
Robin Heinze:
It's part of the state tab.
Jamon Holmgren
And you can have multiple. So you could be like, "I'm going to go to here and I'm doing something and then I'm going to switch to this other thing and do something." It's very cool. It's a very powerful feature. In fact, we have kicked around some ideas for even expanding it further.
Rich Evans:
I'm pretty sure that Gant a while back added the ability to name the state, your state snapshots. So, if you have a bunch of them.
Robin Heinze:
So like post, post login, post login, or like whatever. Yeah.
Jamon Holmgren
Gant Laborde, chief innovation officer here at Infinite Red and my business partner.
Robin Heinze:
If you don't already know who Gant is, that's...
Jamon Holmgren
He's a big personality, he's hard to miss.
Robin Heinze:
He has his own logo and sticker persona.
Jamon Holmgren
Yeah. He does, mostly...
Jon Major Condon:
And a book.
Robin Heinze:
And a book.
Jon Major Condon:
Two books.
Robin Heinze:
Two books?
Jon Major Condon:
Right?
Jamon Holmgren
Yeah. One that he admits to.
Robin Heinze:
State management, I would say it's probably 60-75% of what I use Reactotron for on a daily basis. The other thing I love is the API or like network call visibility.
Jamon Holmgren
Rich, how does that even work? Is it intercepting something on the... Is it doing it at the JavaScript level, or is it some sort of like Native hook?
Robin Heinze:
To API SaaS plugin isn't it?
Rich Evans:
It used to be an API SaaS plugin and there's still an API SaaS plugin today because that's how it originally started. You would go through API SaaS. There's some hooks in there to hook into, but there was also a way to do it via, in React Native specifically. So this doesn't apply to React Dom or React JS. It connects in and basically monkey patches the JavaScript side. So any fetch call that is going through the JavaScript side is automatically picked up as long as you turn on that piece of Reactotron. Because whenever you set it up and configure it, you can decide what you want and what you don't want. So if you turn that on, it will catch every JavaScript initiated fetch call.
Jamon Holmgren
API SaaS, of course, is another library by having Infinite Red that wraps Axios and allows you to make network requests. It just beautifies, makes it nicer. I think that was another Steve thing. Did Steve make that too?
Robin Heinze:
Yes, Steve made APS last year. Yeah. He was big on putting SaaS after things. He had API SaaS and Redux SaaS and Ramda SaaS. Because it's just special
Jamon Holmgren
How did this not end up...
Jamon Holmgren
Because it's just special SaaS.
Jon Major Condon:
It's saucy.
Jamon Holmgren
Yeah. You can even copy as JSON or Curl and run that.
Robin Heinze:
I use that a lot with backend teams, if I'm like "I have a 500 error," and they're like, "What's the request?" I just like copy as Curl and send it to the API team. Boom.
Rich Evans:
Yeah. Yeah. There is, there's a lot of little functionality that we allow for the API requests. I think you can also copy out as Markdown. So like kind of shows all the information and it's really a nice way to kind of provide whatever information about that API call.
Jon Major Condon:
Rich, I know that this is a Reactotron mainly episode, but talking about Flipper, what is the difference between Flipper and Reactotron? Because I'm fairly new still to React Native. Just not only for my benefit, but I'm sure for others.
Rich Evans:
Flipper is trying to solve a lot of the same problems that Reactotron is trying to solve. It does go about it in a very different way. So earlier, I was very specific when I mentioned that whenever you using the standalone version of the Reactotron app, the Electron version. It's using WebSockets, the reason I was specific in that is that we do have a Reactotron plugin for Flipper. The way Flipper works is you actually have to put a Native library on your app side that it ships with React Native the template that you get with React Native in it these days. It's only wired up when you're in a debug mode. There's other things that go into making sure that it doesn't ship that Native code whenever you put a production bug out there. But with those Native libraries, it actually has a communication method there that it uses to communicate between the Flipper application and your React Native app.
Rich Evans:
So the Reactotron plugin actually utilizes Flipper's communication method. It's kind of the same. But I actually honestly don't know under the covers if they're using like WebSockets or whatever they're using under the covers there, but basically it changes how the communication works and it actually introduces some Native code stuff on your React Native app to facilitate that communication. But the actual intent of Flipper is very similar. It has a lot of the same tools. You have the ability to go in and see network requests and stuff. They even have your React layouts tool that you may be familiar with from the React Chrome plugin. Also, I think it's on the Firefox plugin, but I don't use Firefox, so I don't know. They are trying to provide a lot of the tools that are more React specific. They also have a plugin system, which is what we utilize to allow Reactotron to exist. There's other plugins out there that are trying to, and potentially are doing a good job. I'm not sure I haven't used them, but trying to solve a lot of the same problems that Reactotron is.
Jamon Holmgren
Fun fact. The Flipper team asked us to build a Reactotron plugin when Flipper first came out with plugins. It ended up being the first plugin built for Flipper because they knew that a lot of people use Reactotron and it did bring a different kind of direction to Flipper than... They both have a lot of value.
Robin Heinze:
I haven't used Flipper a ton just because I I've used Reactotron since the first day I ever started learning React Native. So it's very sort of ingrained in my workflow. But the sense that I get is that Flipper has the ability to offer more on the Native side of debugging. Like you can get crash logs and other things that Reactotron wouldn't be able to see because it's really just interacting with the JavaScript layer. But the trade-off, of course, is that Flipper is much more integrated into your app, and you have to link it natively and install it as a pod and all of that. Whereas Reactotron is just like a config file and then you run it and it works. So there's trade-offs there.
Jamon Holmgren
Yeah. And Flipper also takes longer to compile when you have Flipper installed. Because of the way that it's set up on the Native side. So, if you are okay with that and you need the extra insight into your app, then it's totally fine, but it will essentially double your compile times on the Native side.
Rich Evans:
The one thing to probably point out here is you can actually have both of them work at the same time. So if you have a large team of developers and some of them may prefer Flipper, some of them may prefer the standalone Reactotron. You can actually have Reactotron work in both the plugin form in Flipper and also the standalone Electron app. Everything's completely fine. So it's not one or the other.
Jamon Holmgren
It all plays together.
Robin Heinze:
Inception.
Rich Evans:
Yeah, exactly. It's not like a one or the other type of situation. If your team wants both, then you can have both. Since it is shipped with the React Native template, Flipper is just kind of there already, you actually have to do work to go take it out if you don't want it. So really there's no harm in leaving it there and you can still utilize Reactotron if that's suits your fancy.
Robin Heinze:
Like you said earlier, Reactotron is so low profile. You can just have it running in the background all the time and you barely notice it until you need it. Then it's there and it has all the information.
Jon Major Condon:
I don't think I close it to be honest.
Robin Heinze:
I close it when it... Sometimes it'll lose connection or something, like stop reporting of it. Then I just like close it and reopen it. But for the most part, it's running all the time.
Jamon Holmgren
So, I'm kind of older than you folks here. I do what I like to call old school debugging, which is basically dropping console logs everywhere. I know you all do that too, but...
Robin Heinze:
Hey, good news Reactotron does that too.
Jamon Holmgren
Exactly. It actually enhances your console logs. There's a certain way you can actually set it up where you can do like console.tron.log.
Robin Heinze:
I never realized that it wasn't the default, that it doesn't just work that... Because it's set up that way in Ignite. So all of our Ignite projects just do that today.
Jon Major Condon:
Wow. Today, I just learned that it's not the default.
Robin Heinze:
And I'm on a non-Ignite project at the moment. I was like, "Wait, I can't just do console drop." So I still need to go in and set that up.
Jamon Holmgren
Yeah, exactly.
Jon Major Condon:
I seriously just learned that it's not the default.
Jamon Holmgren
It is the default in Ignite, but you have to set that up. There's documentation about that in the repo. But what's cool about it though, is you can do things like log important. So instead of just log, you can do log important and then it shows up in your list. You can also do filters to filter for just the types of logs that you are looking for. When you log a more complex object, then you can actually drill down into it. It's very similar to the Inspector in Chrome, or other other browsers. I use that all the time. I'm not a very sophisticated man. So I just throw that in there and see what's going on.
Robin Heinze:
The nice thing though, is that it's part of the rest of your Reactotron timeline. You can see like all the different things that your state is doing. The sagas are running or actions are running or whatever, and you can see where the log fits into all the rest of it.
Jamon Holmgren
That's a good point.
Rich Evans:
You can actually... And I've done this in most of the projects I use Reactotron with. You can monkey patch console.log to actually ship it to Reactotron. So that way you don't even have to do like console.tron.log or anything like that. You can just do console.log and ends up in Reactotron.
Jamon Holmgren
That's cool.
Robin Heinze:
Interesting. See that I wish I had known that when I was doing my web, my React Native web project, because we always.... the web side would complain when there was a trauma. So that's good to know.
Jamon Holmgren
Just unify the two.
Rich Evans:
Yeah. Because we usually, what I do is I keep the reference to console.log. So that way I still call it, but I can also call the Reactotron.display and provide all of the arguments and...
Robin Heinze:
Wow.
Rich Evans:
So I get it in both places if I want it there.
Jamon Holmgren
So let's also talk about custom commands because these are super cool. You can actually drop in some code into your app. So like normal, like a function or something that does something, whatever it is. You can set up a certain state like, "Hey, automatically log me in." Or you can reset the navigation to like everything's reset back to nothing. Or these are all like developer workflow things usually. The way that you do that is you register it as a custom command and then it literally puts a button in your Reactotron app that you can click.
Rich Evans:
Yeah. And you can actually also bring in arguments with it. I think it's really low-level support in that you can only bring like a text argument in. But if you wanted to pass in something, you can also define the customer command to take in arguments and then that would end up on your React Native side and you'd be able to take that information and do whatever you need to with it.
Jamon Holmgren
Robin, what's an example of a custom command you've used on all your apps?
Robin Heinze:
I used to use a custom command when I was developing a screen that wasn't hooked up to anything yet. So I would use a custom command to bring up that screen. I also use it to clear the MobX-State-Tree if it gets like... Because when you're developing and you're adding properties to your models or moving them or changing them, you can get your state in a kind of a funky place sometimes. Sometimes you just want to like clear it and we use it for that. We use it for logging. I've used it for logging in a specific user or making a specific API call if I haven't hooked that up to a screen or a button or anything yet and I want to make sure that the API call is correct. Oh yeah, I've done that with custom commands.
Jamon Holmgren
That's awesome.
Rich Evans:
You can also actually unregister custom domains too. So if you really wanted to, you can make them contextual based upon where you are. So if you have like a component MOUNT or a useEffect these days...
Jamon Holmgren
Mind blown.
Rich Evans:
You can register a command and then if you're using hooks and you're using useEffect, you can return a function which gets executed on MOUNT. Then unregister that command. You can have the commands that are very contextual, if that's what you want as well. I've never personally done it, but it can happen.
Jamon Holmgren
That's awesome. Rich. We're going to have to, like..
Robin Heinze:
This is why we need to get Rich to talk about Reactotron a lot more. Because I don't like... I started doing the research for this episode and I swear, I learned about like six features that I didn't even know existed.
Jamon Holmgren
It's so true. It's so true. Reactotron has a lot of capability that, even we inside Infinite Red, don't like totally utilize. You can also do custom plugins. We're not going to go deep into that, but that is something that's available. For example, if you want to support a different state library than MobX-State-Tree or Redux, you can just bring in your own custom plugin to do that. That's not like super difficult. The way that they're set up, they're fairly... You can actually just follow along how the Reactotron Redux plugin is set up and map it to a new state management library.
Jamon Holmgren
There's another small, but kind of cool feature called image overlay. The way that that works is you can bring in an image and overlay it with kind of opacity, like alpha channel, over the top of your screen. This allows you to align things on the screen, get real pixel perfect, et cetera. So that's one that's kind of fun. I don't know how often you folks use that feature, but it is in Reactotron. Some people love it.
Robin Heinze:
You mean everyone doesn't like resize their envision mock-ups so it's exactly the right size and then put your simulator right next to it. And then... Nope, just me.
Rich Evans:
No, that feature was an interesting one. It got born out of a conversation between Steve and I, where we were talking about designers and how it can help the designer and developer workflow. I've used it lightly. I don't use it everyday, because it's not every day that I'm trying to get pixel perfect UI, but it is helpful for sure.
Jamon Holmgren
The last one feature I have on my list is the Storybook integration. I believe that's just for turning on and turning off Storybook, is that correct?
Rich Evans:
Yeah. Basically it allows you to toggle between the Storybook and your regular app via Reactotron. I don't know that I ever got around to actually hooking that up in Ignite. Basically it was trying to solve the problem where... I think it's this way this to this day. In Ignite, there is a buoy that you literally just go in and flip it to turn on and off Storybook.
Jamon Holmgren
Then, remember not to commit it when you...
Rich Evans:
Yes.
Jamon Holmgren
That has actually been changed. Now it's part of the dev menu. We've registered with the dev menu. So you can bring up the dev menu and hit a button and it will actually switch between Storybook and not.
Rich Evans:
Oh excellent.
Jamon Holmgren
But that doesn't work with Expo if you're spinning up an Expo app. You still have to use a buoy in there because they don't let you mess with the dev menu unfortunately.
Jamon Holmgren
Now there's a future feature. It's something that we were exploring a little bit, Rich. We have not talked about this publicly anywhere. This is the only place that you're going to get a sneak peek about this. Rich and I were playing around with the concept of doing a Repel or a console that... And everybody's like, "Well, big deal. You can run JavaScript and inspector or whatever." No, this runs on your device in your app. So this code would actually run in Hermes or in JavaScript core in your app with the context of your app available. Which is really cool. It's like eval inside your app. Rich, you got it to kind of work, right?
Rich Evans:
Yeah. I haven't touched it in a while. I need to revisit it and actually flesh it out a lot, a lot, a lot. It's actually technically available. I can't remember the key command but there's like some special key command and...
Jamon Holmgren
Don't give it out. I don't want people messing up here and blaming us.
Jon Major Condon:
Send the DMs.
Rich Evans:
But basically...
Jamon Holmgren
It's an Easter egg.
Rich Evans:
Yeah. It is a little Easter egg. So there's a key.
Jamon Holmgren
Even the creator doesn't remember.
Rich Evans:
I don't remember it. I have to look at the code, but basically it opens up a new little UI. There's not much to the UI, just kind of takes over Reactotron, the standalone app, to look like a console. You can just execute arbitrary JavaScript. Be warned though, you can execute any JavaScript, including invalid JavaScript and it will crash around.
Robin Heinze:
If you're so inclined, take this as a challenge to go look through the Reactotron source code, which is open sourced and freely available, and find the right key combination to unlock this Easter egg. Maybe it'll be a feature someday.
Jamon Holmgren
I think it's cool because those custom commands where you can do things, which are still very valid and important, but you could actually do that on the fly as your app is open. You can go in there and manipulate variables and whatever that you're in a particular scope. Hopefully, at some point we would even let you like CD into objects, sort of like change directory, but for objects and that sort of thing. It's like PRI. If you have used PRI, which is a Ruby thing, lets you kind of like navigate through your app's virtual space.
Robin Heinze:
That's what I was going to say. You stole it.
Jamon Holmgren
Stole your thunder. Okay. We are way over time here unfortunately. There's so much more I'd love to talk with Rich about, but so we're going to skip the What's New with React Native newsletter. If you want to check that out, John Major is the senior editor of that or editor in chief is what we call you. So go to ReactNativenewsletter.com.
Jamon Holmgren
I had a weird bug this time, but we're not going to get to it. So, I'll save it for next time. It's kind of an interesting one. I was working with Mazin on. Mazin is another new developer here at Red.
Robin Heinze:
Hi Mazin.
Jon Major Condon:
Hey Mazin.
Jamon Holmgren
It was a kind of interesting one with FlatList, but we'll save that for next time. So, where can people find you John Major online?
Robin Heinze:
@JohnmajorC anywhere and everywhere. Almost anywhere and everywhere.
Jamon Holmgren
Robin. Where do people find you?
Robin Heinze:
I'm @Robin_Heinze on Twitter. Don't look for me on Instagram.
Jamon Holmgren
I am @JamonHolmgren on Twitter, GitHub, et cetera. You can also find React Native radio @ReactNativeRdio. Rich, are you on Twitter? I don't think you're on Twitter.
Rich Evans:
Technically, I am , but I don't actually post anything. So there's no reason they're following me.
Jamon Holmgren
The guy that works on the coolest stuff at Infinite Red does not post anything about it. So, I guess I'll just have to read about it. Take all the credit like a normal CTO does.
Jamon Holmgren
Thanks so much for joining us today, Rich. It is awesome to have you on here. There's, like I said, so much more to this. We're going to hopefully post more blog posts or videos about what Reactotron can do and also maybe release some new features at some point. It's been sort in a status for awhile, but I'm hoping to push it forward.
Rich Evans:
That would be awesome.
Jamon Holmgren
As always, thanks to our producer and editor, Todd Werth, our transcript and release coordinator, Jed Bartausky, our social media coordinator, Missy Warren, and our designer, Justin Huskey. Thanks to our sponsor. Infinite Red. Check us out. infinite.red/ReactNative. A special thanks to all of you listening today. Make sure to subscribe. Also, check out Reactotron. Go to infinite.red/Reactotron, all one word. No there's no SaaS in that. It's not Reactotron SaaS. It's not React SaaS. It's just Reactotron. Steve must've lost on that one. Check it out. You can also see it on GitHub and explore the code there. Reminder, we are hiring careers.infinite.red. See you all next time.
Robin Heinze:
Bye.
Jon Major Condon:
Bye.