It’s been a while since we’ve done a “We React to News”! In this episode, we react to Shopify’s FlashList, Callstack’s Reassure, and more.
It’s been a while since we’ve done a “We React to News”! In this episode, we react to Shopify’s FlashList, Callstack’s Reassure, and more.
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 us. It's been a while. We're back. Rejoice. Episode 243, We React to News.
Jamon Holmgren:
I'm really excited because I'm going to actually get to see both of you in person next week, which is going to be really fun.
Robin Heinze:
Yay.
Mazen Chami:
In 3D.
Robin Heinze:
In 3D. I have never met Mazen in 3D.
Mazen Chami:
Yeah.
Jamon Holmgren:
Is that true?
Mazen Chami:
Yeah.
Robin Heinze:
That's true.
Jamon Holmgren:
Well, I mean, you were at Chain React though Mazen, right?
Mazen Chami:
Correct. But I don't think.
Robin Heinze:
I don't know. I don't think I met you.
Mazen Chami:
I don't think I met Robin. Maybe in passing.
Robin Heinze:
I was not so much with the mingling and the networking.
Jamon Holmgren:
That kind of surprises me, Robin. You're such a social butterfly.
Robin Heinze:
I know.
Jamon Holmgren:
That'll be fun. The reason actually is because Robin, you weren't there last.
Robin Heinze:
I was not at the last.
Jamon Holmgren:
I had an alt team retreat.
Robin Heinze:
That's right. It was last fall. I was on maternity leave.
Jamon Holmgren:
Yeah. So we'll get a chance to see each other. Hopefully illnesses willing.
Robin Heinze:
Yes.
Mazen Chami:
And flight delays willing.
Jamon Holmgren:
Flight delays, oh man.
Robin Heinze:
Oh my gosh, yeah. I hope no one gets stranded in an airport on their way,
Jamon Holmgren:
Right? Yeah, no kidding.
Mazen Chami:
I won't mention the name of the city, but I'm stuck in, I would be stuck in a city. I would not want to.
Detroit.
Robin Heinze:
Now everybody's.
Jamon Holmgren:
Oh, Detroit.
I've only flown through Detroit once, and the thing that stuck with me was I got dropped off at the end of this one terminal. I could see like, it was just, it was, it was so long that they had to account for the curvature of the earth, just about. It was ridiculous. And I had to run all the way to the other end. It was like 20 minute, you know, what do you call that? Standby. No, sorry.
Mazen Chami:
Layover.
Jamon Holmgren:
20 minute layover. Yeah. Thank you. I can't think today. And I barely made it to the other terminal. They were just finishing up. It was weird, such a long terminal.
Mazen Chami:
I've never had good experiences at Detroit and Houston actually for that matter.
Jamon Holmgren:
Yeah.
Mazen Chami:
But both have been coming to the country from an international flight. So that may have been why.
Robin Heinze:
The domestic terminal might be better.
Mazen Chami:
Who Knows, but as long as I make it to my final destination is all that matters.
Robin Heinze:
Jamon and I are fortunate enough to get to drive and not have to deal with flying.
Jamon Holmgren:
Yeah. Because we're doing that here in the Portland area, over at Skamania lodge. For those of you in the Pacific Northwest, you may know where that is.
Robin Heinze:
Now see it's okay for us to tell everyone where we'll be because by the time this comes out, it will be over. So we won't have any stalkers.
Jamon Holmgren:
That's true.
Mazen Chami:
Yeah. They'll be like fans outside.
Robin Heinze:
Paparazzi.
Jamon Holmgren:
It's fun though. I really enjoy the whole experience and we will have everybody for the week. It's great.
Robin Heinze:
Oh, it's so much fun. I'm so excited.
Jamon Holmgren:
With that said we do have a podcast to do so I'm Jamon Holmgren, your host and friendly CTO of infinite red. I'm located in the Pacific Northwest with my wife and four kids. I am joined by my meritorious. Co-hosts Robin and Mazen.
Mazen Chami:
Definition.
Jamon Holmgren:
Robin Heinze.
Robin Heinze:
Full of merit.
Jamon Holmgren:
Yes, full of merit. Yes. I mean, yes. It's a loaded word because it's been used in so many weird ways, but I'll just use it in the most positive way. Robin is a senior software engineer at infinite red. She's located west of Portland, Oregon with her husband and two kids and has specialized in React Native for the past five years. Also joined today by Mazen Chami, also a co-host. Mazen lives in Durham, North Carolina, with his wife and newborn boy. He is a former pro soccer player and coach, which I love because then we can talk sports. For some reason, so many devs just don't like sports. Actually, Robin, there are certain sports you like, like college football or something?
Robin Heinze:
Watching.
Jamon Holmgren:
Okay.
Robin Heinze:
I don't play any sports.
Jamon Holmgren:
Okay.
Robin Heinze:
There's not an athletic gene pool in my family.
Jamon Holmgren:
You know, my daughter, my 14 year old daughter, sorry to pause Mazen's intro here. But my 14 year old daughter did not like any sports. Then my wife put her into a tennis camp for summer and she loved it. She absolutely loved it. It was like she said, "it was like her favorite week ever. It was just so much fun." In fact, last night we actually set up a net on the back patio, which isn't super big, but it's probably, I don't know, 20, 25 feet long by maybe 14 feet wide or something. It's got some size to it and we were batting. You don't say batting. We were racketing.
Mazen Chami:
Badminton, maybe?
Jamon Holmgren:
No, it was actually tennis ball and tennis rackets. But like across a net.
Robin Heinze:
I think they call that a rally.
Jamon Holmgren:
Rallying. Okay. We were rallying last night. It was really fun. She did hurt her wrist at the last day. It's been slowly healing, but yeah, she just loved it and she's never done any sports before. So yeah, that was kind of cool.
Robin Heinze:
I see. I did play tennis.
Jamon Holmgren:
You did okay? Did you like it?
Robin Heinze:
I enjoyed it, but I just wasn't good at it. So when I tried to be on the tennis team, they're like, mm, you can hang out with us.
Jamon Holmgren:
Oh.
Robin Heinze:
And condition with us if you want. But we won't let you play any matches because you're not good enough.
Jamon Holmgren:
Yeah. See, that's see at our high school and this is actually one of the cool things. They have a no cut team. So if she tries out, she'll make it. So she will get a chance to actually play.
Robin Heinze:
That's nice. I feel like that's so important. I really hate how much high school sports demoralize kids.
Jamon Holmgren:
There are a lot of people who are like, oh yeah. You know, like kids are being coed and they're they need the competition.
Robin Heinze:
Participation trophies.
Jamon Holmgren:
Yeah. Yeah. Yeah. I get some of that. I probably even said it myself to some degree, but you know what, at certain ages, it's actually more important that they get the experience then that we filter out the weak. You know what I mean?
Robin Heinze:
Yep.
Jamon Holmgren:
That can happen later. You know, like when they go try out for the college team, like I did and get cut.
Robin Heinze:
Believe it or not being part of the team and learning teamwork skills and participating is more important than maybe winning all the things. Anyway. That's a whole can of worms.
Jamon Holmgren:
Mazen, what do you think, you've played at a very high level?
Mazen Chami:
I totally agree with that. I do think that maybe you could pick maybe high school specifically where that should be the case because again, everyone's, you know, you're in school with friends and all that kind of stuff. So high school would be great for that environment, and if someone really wants to take it to the next level, there's always the opportunity to play travel or club. Whatever it's called.
Jamon Holmgren:
Yeah.
Mazen Chami:
In your area.
Jamon Holmgren:
Yeah.
Mazen Chami:
So I think I'm totally for it, and I see a lot of high school. High schools specifically, trying to be over the top with it, and they're just kind of messing with the kids a lot, in my opinion.
Robin Heinze:
Yeah. I feel like so many people who played high school athletics, especially in the US, but probably abroad as well. They have these horror stories of coaches who just were like, I mean, I don't know. I have stories myself, like from high school where they would just make decisions that were anti kid, pro them basically. You know.
Mazen Chami:
I was very fortunate. My high school coach was one of the primary reasons where I got to where I was in my career. So I got lucky in that regard. And he had the same mentality also.
Jamon Holmgren:
And that was in Nigeria?
Mazen Chami:
Correct yeah. He was actually an American PE teacher from Charlotte, North Carolina.
Jamon Holmgren:
Really? Not far from where you are now.
Mazen Chami:
Nope.
Jamon Holmgren:
Which leads me back into your bio.
Robin Heinze:
Yeah.
Jamon Holmgren:
Mazen is the Senior React Engineer over in North Carolina, also here at Infinite Red. I honestly would talk about this, like the whole podcast, but we do still have a show to make here. Sorry Mazen.
Mazen Chami:
No you're good. Cut you off on that. 20 minutes later.
Jamon Holmgren:
I know. This episode is sponsored by Infinite Red. Just go to infinite.Red/reactnative. I'm going to skip all that because you know, we got to get moving.
Robin Heinze:
We know.
Jamon Holmgren:
We know, Infinite.red. Let's get into our topic. We are actually doing a, "we react to news" episode, which we haven't done in a while.
Robin Heinze:
No, it's been,
Jamon Holmgren:
It's been a while.
Robin Heinze:
It's been a while. There's been a lot of news.
Jamon Holmgren:
There has. So we're going to have to probably, we're only going to get to a few of these things, there's a whole big list, but we'll give it our best. What is the biggest news Robin that has come out, in your opinion?
Robin Heinze:
Well, there's, I've heard buzz pretty much everywhere. Everyone's talking about a new package from Shopify called FlashList,
Mazen Chami:
FlashList.
Robin Heinze:
FlashList, which is a performant alternative to FlatList, which is native, like React Native core. Everyone is just buzzing about it. Super excited because it's supposed to speed up your lists enormously.
Jamon Holmgren:
It's kind of a drop in replacement, right? Like you can kind of swap it out with just minimal changes.
Robin Heinze:
Right. There's, there's a few things that are different or missing that they acknowledge in the documentation. But for the most part, yes. It's a drop in replacement.
Mazen Chami:
It's also kind of a little bit harder than a drop in replacement for section list also.
Robin Heinze:
Yeah.
Jamon Holmgren:
It's doable.
Mazen Chami:
There's a little bit of a couple caveats.
Robin Heinze:
One of our devs just did it successfully.
Jamon Holmgren:
Correct. Yeah.
Robin Heinze:
Last week.
Mazen Chami:
So it's possible. You just might have to dig into the documentation a little bit deeper.
Robin Heinze:
They have a section in their documentation now about how to implement section list. I think there's a guide. I don't know if it's new.
Mazen Chami:
Based on the pictures based on the gifs or gifs. However you say it. Of what it looks like. This is very exciting, because I'm actually on the same project, Robin, you and I worked on,
Robin Heinze:
They have a lot of trouble with their lists.
Mazen Chami:
Yeah. And that was something we spent a long time trying to troubleshooting and fix.
Robin Heinze:
And there's only so much you can tweak.
Mazen Chami:
Exactly.
Robin Heinze:
There's so many levers. You can pull
Mazen Chami:
At that point it was like we would try and pretend when they were four or five pages away from the bottom to then fetch and reload. And that caused issues.
Robin Heinze:
Which, I mean, you just introduce more problems because you're like, are you optimizing for the amount of cells that it's rendering ahead of time, but then those trigger more network requests, which make it slow.
Mazen Chami:
Exactly. It was a double edge sword at the end of the day. And this just seems like a great replacement for all that kind of stuff.
Robin Heinze:
Yeah. Based on the examples in the ReadMe of what it looks like, it looks phenomenal. Just like endless scrolling with no gaps.
Jamon Holmgren:
Yeah. That's fantastic. It's kind of about time that we, that we got improvement, I think way back in the day. And I don't know if either of you used the predecessor to FlatList, which was
Robin Heinze:
ListView.
Jamon Holmgren:
ListView.
Robin Heinze:
I did use ListView and my first.
Mazen Chami:
Very briefly.
Robin Heinze:
My first project.
Jamon Holmgren:
Yeah. Which obviously it had its own limitations. That was pretty, pretty rough. And I feel it's probably a Testament to flat lists API that they kept the same API.
Robin Heinze:
Yeah. It's a good, it's a good API that we found like what works.
Jamon Holmgren:
Yeah. And people are used to it and they're fine with it. There's nothing wrong with it. Just use the same API, but make it fast.
Mazen Chami:
Feel like if we had this podcast then, we would be announcing FlatList the same way.
Jamon Holmgren:
We probably would have.
Robin Heinze:
Are you tired of using ListView?
Mazen Chami:
Yep.
Robin Heinze:
Flatless was a huge innovation when it first came out. It was so it was very exciting.
Jamon Holmgren:
So I wonder if the React Native side of things, if they're going to maybe take some lessons from FlashList and bring it back to FlatList, that's an interesting topic. I don't know. It's just kind of how I'm reacting. We are planning and we're actually in talks with Shopify to get a guest on here to talk about FlashList. So I'm excited to go into that at some point.
Robin Heinze:
Yeah.
Mazen Chami:
One other thing to note about it, is it's built with reanimated and gesture handler. So packages we've highlighted, and actually spoken with the people that are working on it. And that's great to see that's in there, and if you click on, I think we're going to add it to the show notes, a Tweet that kind of shows how you can use them together and has a really cool feel of you're scrolling through a list, you click on something, it animates the page and then you kind of swipe it away if you've used the.
Jamon Holmgren:
I'm looking at right now. And yeah. I agree. Like when we.
Mazen Chami:
If you've used the Etsy app, it's very similar to the Etsy app where we can do that kind of stuff. I know Etsy's built in native, that's a pretty cool, pretty cool thing to highlight. An open source package is using other open source package, packages to bring you a very optimized and highly performant experience.
Robin Heinze:
Yeah.
Jamon Holmgren:
And that's probably why it won't come back to FlatList is because, Shopify is free to kind of select from third party libraries where the core kind of has to stay core.
Robin Heinze:
Yeah. Which is, I mean that, it's kind of sad that's true.
Jamon Holmgren:
Yeah.
Robin Heinze:
But I understand that there's only so much the core team can build into React Native core.
Jamon Holmgren:
So moving to our next thing,
Mazen Chami:
Just a quick thought on that it, maybe this would now introduce FlatList and all these other lists to move into the community. So kind of the lean core initiative, to keep React Native a little bit leaner so that as a developer, we can choose between FlatList or FlashList.
Jamon Holmgren:
It's true.
Mazen Chami:
Just something I was thinking about where if this initiative, more packages kind of came out to improve the core React Native would then React Native, go even leaner by pulling out some of this stuff to then give you the ability to come and go. Cause I mean, now we're talking about packages that have all of React Native that has FlatList and FlashList.
Jamon Holmgren:
Sorry.
Mazen Chami:
FlatList and SectionList. And then now we're adding in another package. When in turn we could get rid of FlatList and SectionList for that. Although they might be a dependency for each other. I did not look into that.
Jamon Holmgren:
Yeah, no, that's a good point.
Mazen Chami:
Yeah.
Jamon Holmgren:
Moving to our next thing on our list, our friends over at Callstack released Reassure. And so, I'm kind of excited about this one because it combines two things that are very necessary for quality apps. Testing and performance measurements, me-metrics. That's pretty cool. They have a cool website about it. You can go to callstack.com/open-source/reassure. Robin, what's this all about, you looked into this.
Robin Heinze:
So Reassure is a automated performance testing library, specifically regression testing. So it measures the average rendering time of the components in your app or the ones that you set up tests for, and then checks those for regressions each time you run the test. It's compatible with CI and it's the first. It seems pretty innovated it's the first time I've ever seen performance specific regression, like automated regression tests, Callstack developed it for a client who then agreed to let them open source it. The client was called Entain. Not someone I've heard of, but they're partnering with them on it.
Jamon Holmgren:
Yeah, that's really cool.
Robin Heinze:
So it was, it was built for a real world application and now they're sharing it with all us.
Jamon Holmgren:
Yeah. That's awesome. I love doing that with our clients when we get a chance to open source stuff, because like Ignite actually came out of two projects where we were kind of piloting the stack and we had two clients. So it's really cool. You essentially set up, I'm looking at the code example now. You set up a scenario, which is just. It's stuff like. Get a button, find a text label, fire a couple of events. Pressing the button, and then you check that text label to see if it changed the count. Then you can run this measure performance function on a component and you can run it multiple times. So you can run it like 20 times and run that scenario, and then it would average that out and let you know if at the end of the day your component got slower.
Robin Heinze:
I will note that it works on top of Jest and React Native testing library. So you have to have both of those set up in order for this to do its thing, because it's basically.
Jamon Holmgren:
Yeah.
Robin Heinze:
Setting up a React Native testing library test or event, and then measures the performance of that render. So you have to have both of those in your Amp.
Mazen Chami:
So is this almost a different way of comparing what we talked about in the past for the Flamegraph and Flipper?
Jamon Holmgren:
Yeah,
Mazen Chami:
But I'm assuming more quote unquote stats based
Robin Heinze:
Probably. I'm not sure how it works under the hood, obviously, but I mean the Flamegraph is based on like milliseconds of render time per component or like tree
Mazen Chami:
Scene.
Robin Heinze:
Node. Yeah. So I'm guessing this is using that
Jamon Holmgren:
And this is only JavaScript. This won't do any real rendering. Just like React Native testing library. It'll just run the component.
Robin Heinze:
Right. You'll have to mock anything that's native.
Jamon Holmgren:
So it won't catch everything that's performance related, but it will catch issues with your logic that introduce a lot of slowness.
Mazen Chami:
That's cool.
Jamon Holmgren:
All right. Then we have React Native Keyboard Controller. Let's see. Who's the author on this one.
Mazen Chami:
Yeah. This might be hard to pronounce. His name is.
Jamon Holmgren:
Kirill.
Mazen Chami:
Kirill Zyusky
Jamon Holmgren:
Zyusko. Zyusko.
Mazen Chami:
Zyusko.
Jamon Holmgren:
Yeah.
Mazen Chami:
UHC Georgia.
Jamon Holmgren:
Okay. That's cool. So Mazen and you looked into this one. What is React Native Keyboard Controller.
Mazen Chami:
So this is a package that pretty much works identically for iOS and Android. I've had a lot of issues in the past with keyboard management in general and it's just thrown a lot of issues. So this is a nice concise package that kind of puts them all together and make sure that their appearance is all good. And again, he's using Reanimated. So that's where this theme of Reanimated keeps popping up.
Jamon Holmgren:
Yeah, no kidding.
Mazen Chami:
The Events, keyboard will show, and keyboard will hide, are available on Android. In the past they weren't available there. So it kind of exposes it on all platforms. So it makes it real good to handle that. So again, we're offsetting the logic and handling of our keyboard to this third party library to basically make it all concise and in one spot for us, and has some good documentation on how to use it. And it's very straightforward.
Jamon Holmgren:
Yeah. This looks really good. And it's something I think we've needed for a long time because keyboard always seems to be. I put out a tweet, like "terrify a React Native developer in five words." And there were a few that mentioned keyboard avoiding.
Robin Heinze:
Keyboard avoiding scroll view.
Mazen Chami:
Yeah, exactly. This eliminates all that, which is great. And then he handles all the like quote unquote edge cases that you see in the React Native docs for Android. Like window soft input mode, just resize and all that kind of stuff are all handled. So, that's great.
Jamon Holmgren:
Yeah. Nice work by Kirill this. And it looks like he just released it a few days ago, which is awesome. So go check that out. React Native keyboard controller. We'll put a link in the show notes as well. Our friends over at Formidable came up with a thing called React Native Zephyr, and it is a tailwind CSS inspired styling library for React Native. And they kind of mentioned that Tailwind is really more built for the browser. And so they,
Robin Heinze:
Sorry, CSS based.
Jamon Holmgren:
Right. And so they kind of take some of the ideas of Tailwind, but then bring in React Native Experience to do something more React Native focus. So what do you think of this Robin? I know you looked at this one.
Robin Heinze:
I think it looks really cool. It's very different than anything I've ever used, but looking at the examples, it seems really full featured, really straightforward to implement. And it's sort of, it takes care of a lot of the styling and theming boiler plate that you have to do. If you install this package and then you just right off the bat, you have things like light mode and dark mode. You can just sort of add these classes to your components for really common things. You can add a flex one class. A justify center class. Without having to define those styles.
Jamon Holmgren:
Yeah.
Robin Heinze:
Over and over again for every component. I know most of our apps have like a hundred different style sheets that have container flex one.
Jamon Holmgren:
Yeah.
Robin Heinze:
So you can add them as classes, which seems really helpful, really handy. So yeah. I'd be curious to use it on something and see how it looks, but yeah, it looks really cool.
Mazen Chami:
It's also Typesafe. So there's a lot of Intelsense there, which is really, really cool.
Robin Heinze:
Yeah. That's very helpful. I mean, it's nice to be able to just like start typing and it'll show you everything that's available to you.
Mazen Chami:
Yeah.
Jamon Holmgren:
And they're using template little literals from Typescript on that, which is a really cool thing. I've been seeing some stuff on Twitter about that. Played with it a little bit, allows you to have more than just, "Hey, this is a string" or "Hey, here is a predefined set of strings." It's like, you can kind of compose strings, which is cool. Awesome. Yeah. Good work from Formidable over there on that. We also saw another thing from Formidable, which I think is really cool. They're coming up with some cool stuff lately. And I actually had one of the creators of this come on my live stream, Rn.live the other day, but it is React Native Owl. And that is visual regression testing. Mazen what's the big deal with React Native Owl.
Mazen Chami:
It's really cool. End to end testing automated framework testing. Think Detox just much in my opinion, much cooler. And it kind of handles everything very seamlessly.
Robin Heinze:
So it seems like, is it a combination of Detox testing and storybook like snapshot testing
Jamon Holmgren:
Sort of. Yeah. So basically, and we had, I had this when we were doing Ruby motion back in the day, there was a thing called Motion Juxtapose, which did almost exactly the same thing. In fact, I gave him some ideas during our stream on stuff he could do based on Motion Juxtapose, but essentially it will generate, it will create screenshots at certain points as you're kind of going through your app and then it will diff them and it will look for changes like, problems, or maybe not problems, but changes. And then it will, if everything looks like it lines up like between the last time it ran it and now it will pass. If there are some changes, it will generate a diff image and show you like, it'll create this HTML document where you can go look at it and it'll have like on the left, it'll have the previous image. In the next it'll show you the new image. And then it'll show you the diff image. So you can see like
Robin Heinze:
Literally snapshots, cause storybook snapshots are code diffs basically.
Mazen Chami:
Yeah.
Robin Heinze:
They take the tree, the rendered tree and compare it. But it's just comparing code.
Mazen Chami:
This is visual.
Robin Heinze:
Whereas this is literally taking screenshots. That's cool.
Jamon Holmgren:
It's more useful than the snapshot test, because you could actually refactor your JSX and still end up with the same result.
Robin Heinze:
Yeah. That was one of the frustrating things about Storybook is that if you change the structure or if you rearrange the white space or something,
Jamon Holmgren:
Yeah. Now it fails.
Robin Heinze:
Now it fails, but this is actually looking at the end. It's a true integration test.
Jamon Holmgren:
And if you're too lazy to write a good full suite of tests. I really like visual regression testing because it's sort of a, it's like a smoke test. If you can get to this screen and show what you're seeing there, something must have gone. Right. You know, like it seems like it, you know,
Robin Heinze:
I wonder how brittle it could be.
Jamon Holmgren:
We're going to have to find out, cause I'm actually, I really want to use it on a project. I loved using motion juxtapose back in the day. That was like my go-to tool for testing really. And I want to use it in a a future thing. They have some other ideas that they're coming up with. They're still developing it. But I got to say, when I did the React Native Live with Rob Walker, who's one of the creators of React. React Native Owl. It just blew my mind. It was awesome. Go check it out. We'll put the link in the show notes to the, to the YouTube recording of that live stream. But it is, it was a lot of fun and they have a lot of ideas. They're, they're going to continue to push this, push this forward.
Mazen Chami:
Correct me if I'm wrong. Is this very similar to Percy? Percy was actually announced at Chain React. The one I attended, which is kind of.
Jamon Holmgren:
Visual testing as a service?
Mazen Chami:
Yeah. I briefly remember. I believe it was Carly?
Robin Heinze:
Can you Google it? The only thing that comes up is the talk at Chain React
Mazen Chami:
Chain React
Jamon Holmgren:
Thereispercy.io
Robin Heinze:
I Was there.
Mazen Chami:
Yes.
Robin Heinze:
If I Google React Native Percy.
Jamon Holmgren:
Yeah.
Mazen Chami:
My, my
Jamon Holmgren:
I'm curious if they still support it or not.
Mazen Chami:
What I briefly remember. Yeah. There's V two. That just came out. It looks like, recently, but what it sounds like is you can tie this to your CI/CD pipeline and it'll run the test for you and get back to you on if it passed.
Jamon Holmgren:
Yeah. It probably is similar. I kind of forgot about Percy to be completely honest.
Robin Heinze:
I mean, from their docs, it looks like React Native isn't their focus anymore. It's just React JS.
Jamon Holmgren:
Yes.
Mazen Chami:
I remember her saying that it was React JS specific and that her and someone else that was working on it were creating a.
Jamon Holmgren:
Yeah.
Mazen Chami:
React Native Percy package to be handled.
Jamon Holmgren:
Now it makes sense.
Mazen Chami:
Again, I'm thinking this was 2019,
Robin Heinze:
This was like 5, 4, 3 years ago.
Mazen Chami:
So who, who knows if they actually got around to finishing that React native Percy.
Jamon Holmgren:
Yeah.
Mazen Chami:
Package.
Jamon Holmgren:
Now one cool thing about visual regression testing as well, that we actually found out on stream is that the images that it generates, if you accept them, if you accept the image change, like you can update the snapshot when you do a poll request, it will show you the before and after of the visual.
Robin Heinze:
Which is really cool.
Jamon Holmgren:
It's basically doing your screenshots for you. Yeah.
Mazen Chami:
Yeah.
Jamon Holmgren:
So you can go look in the diff and the file diff and you can actually see images and, oh, before it was this, after it's this.
Robin Heinze:
Well, and GitHub will show it to you as an image.
Jamon Holmgren:
Yeah.
Robin Heinze:
And not just like a bunch of code diffs.
Mazen Chami:
And that would be really cool to see the evolution of your app as you know, as you're evolving and creating new screens.
Jamon Holmgren:
Oh yeah.
Robin Heinze:
Yeah, it would be like breadcrumbs to see how your app has changed. It's really cool. In a lot of ways.
Mazen Chami:
Genuine side note, we should integrate this into Ignite right now. And then when the new version of Midnight comes out, we see how we've Evolved.
Jamon Holmgren:
Spoilers. We have a new version of Ignite coming. It's true. And I mean, we only integrate things into Ignite when we, when, like if we've tried it out on a project and it, and it works really well, but I want to get to that point with ignite. I want to get to the point with...
Robin Heinze:
Well, we're starting, we'll be starting in a couple new projects or I guess we did just start one,
Jamon Holmgren:
We will.
Robin Heinze:
But we'll be starting a new one here pretty soon.
Jamon Holmgren:
Yep. Looking forward to maybe getting some of the stuff in there. Lastly, and I want to get to this one as well. We have a new library from one of our own, from Infinite Red.
Robin Heinze:
Yeah.
Jamon Holmgren:
Infinite Reds, Leon Kim, who is, yeah. I don't know. He's worked with us for eight, nine years, something like that. So Leon's an awesome guy. And he released React Native Perspective, correction image view. So it's an image view component.
Robin Heinze:
A bunch of math. Cause he's really smart.
Jamon Holmgren:
That is correct. It is true. It's an image view component that corrects the distorted, a distorted image with its corner points.
Robin Heinze:
The reason for developing this library was for their project, which involved Users scanning like a, I think it was an ID or some kind of card. So they would have to scan it. And it would be maybe not totally straight or wonky. And so they would have to correct it to make it perfectly square.
Jamon Holmgren:
I think Evernote does this in their, like if you scan stuff in every hour, does that same thing.
Mazen Chami:
Bank of America could use from the library because that's like, every time I'm taking a picture of a check, it's like, "lay it flat." It is flat, but the camera isn't getting it flat.
Jamon Holmgren:
So perfect.
Mazen Chami:
Correct it please.
Jamon Holmgren:
It's cool. And like Robin said, it's a lot of math. Leon has a master's degree in computer vision. So he is actually imminently qualified for this sort of thing. But yeah. I mean really cool. Go check it out. It has seven stars. So give it a few more stars.
Robin Heinze:
Can I star it? I'm going to go star it right now.
Jamon Holmgren:
Yeah, go star it.
Robin Heinze:
I just starred it. It's eight stars now.
Jamon Holmgren:
Nice
Mazen Chami:
Nine.
Jamon Holmgren:
Yeah so that's pretty much it for the news that has come out. There's some other stuff. I know that Expo SDK 46 is coming and we're going to probably do an episode on that. New versions of React Native, but we've done full shows on that. So we don't need to necessarily go over that here. So yeah, that's another We React To News. If you'd like to nerd out more about React Native, you can join my Twitch stream at Rn.Live. You'll see cool guests like Rob come on with cool libraries. We just explore them. It's fun. It's, it's a lot of fun. And I've been doing it mostly on Fridays now during the summer. I've haven't been doing too many Mondays, just been too busy.
You can also check out our new Twitter community, RnTwitter.infinite.red, and go to community.infinite.red for our slack community. There are over 2000 React Native developers in there, and you can find Robin on Twitter, Robin_Heinz, you can find Mazen @MazenChami. You can find me @JamonHolmgren and our show is @ReactNativeRDIO. 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. Make sure to subscribe. We will see you all next time.
Robin Heinze:
Bye