In this episode, Jamon, Robin, and Jon highlight some of the new additions that you can expect to see in the newly released React Native v0.65.
In this episode, Jamon, Robin, and Jon highlight some of the new additions that you can expect to see in the newly released React Native v0.65.
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!
Jamon Holmgren:
Okay, I need to hear the story. Jon Major was talking about this incident that happened before we started recording and I'm like, "Okay, wait no, we need to do this for the audience. We need to share this with the audience." So I actually have not yet heard this story but I heard the first few seconds and I'm like, this is cool.
Jon Major Condon:
It's a really good story.
Jamon Holmgren:
Yes. Jon Major.
Jon Major Condon:
Public embarrassment.
Jamon Holmgren:
We're going to embarrass you in front of 5,000 people.
Jon Major Condon:
I love it.
Jamon Holmgren:
You bought a truck, right?
Jon Major Condon:
Yes.
Jamon Holmgren:
Did you buy the right truck, Jon Major?
Jon Major Condon:
I did not.
Jamon Holmgren:
Let's hear the story.
Jon Major Condon:
I did not. So I'll try to keep it short. I went to the dealership and I bought a truck and about a month later, I figured out, it's the wrong truck. I was laying in bed about midnight and it was just pouring rain out. Carrie, my wife, she looked over to me and she's like, "Hey, something about the max towing package." And then I kind of remember now thinking about, on the sticker there was the towing package but I don't know if it was the max towing package. So I rushed down to the truck-
Jamon Holmgren:
At midnight.
Jon Major Condon:
In the rain at midnight, pouring rain and I pop open the glove box and I look at the sticker and I just wanted to cry because it had the towing package, not the max towing package.
Jamon Holmgren:
What's the difference? What are you missing out on here?
Jon Major Condon:
So I'm missing out on quite a bit of payload for the truck itself and then the trailer capacity also. So it was like, I want to say few hundred pounds in the cabin that I was missing out on and then few thousand pounds that I was missing out on for towing a trailer. So yeah, that was terrible.
Jamon Holmgren:
Okay so back up here a second because, first off what truck is it? What year? What kind?
Jon Major Condon:
Yeah, it's a 2021 F150.
Jamon Holmgren:
Ford F150. Okay. And had you already looked at a truck that had everything you wanted and then just went to the wrong one on the lot?
Jon Major Condon:
Yeah. That was exactly it. Exactly.
Jamon Holmgren:
Oh no. It's a beautiful truck. I love the color. It's like this gray color, not just not gray, does have a little blue in it?
Jon Major Condon:
It's called metallic but it's technically green and if you are standing pretty far away it does look like a metallic like a grayish color.
Robin Heinze:
Now when you first said you bought the wrong truck what I pictured in my head was like, you meant to get the extended cab and you got the crew cab instead and I was like, Jon Major, how did it take you a month to realize
Robin Heinze:
That this is the wrong truck? The towing package makes a little more sense because you can't see it.
Jamon Holmgren:
Yeah that's true. To be honest, when I bought my Jeep Wrangler, I have an '07 the four -door, the Unlimited Jeep Wrangler. I'm not the type that does a ton of research before I do well, anything, but the Jeep Wrangler, I didn't research a lot. I found out actually just recently I've had this for five years now, I found out recently I could have ended up buying something that looked identical but that had almost no towing capacity whatsoever. It's like the difference between 2,500 pounds of towing capacity for 700. So 700, you can pull maybe a jet ski or something, that's it.
Jon Major Condon:
I think your tractor could-
Jamon Holmgren:
I think my tractor could pull more but I somehow randomly chose the one with more towing capacity, so my accidental purchase worked out in my favor, in your case not so much, unfortunately.
Robin Heinze:
So now what do you do? What's the plan.
Jon Major Condon:
Yeah. So thankfully I went back and I basically was super level-headed and I said, "Hey, I made a mistake," and they were cool about it and they're going to fix it. So they're actually taking it back to the truck full price for what we paid for it.
Robin Heinze:
Wow.
Jon Major Condon:
It's Kunes Automotive so anyone who's listening, definitely go check them out.
Jamon Holmgren:
In Milwaukee or-
Jon Major Condon:
In Delavan.
Jamon Holmgren:
Wisconsin.
Jon Major Condon:
Not too far away from me. Delavan, Wisconsin.
Robin Heinze:
Hey, they got some free advertising out of the deal.
Jon Major Condon:
I know right, for real. So they're taking the truck back and most likely I'm building an F-250 and it's actually pretty much the same price. It's kind of crazy how you can go from F-150 to F-250 a lot more towing, a lot more power and it's basically the same price.
Jamon Holmgren:
I mean everybody wants an F-150, so that's probably the price. My dad has one.
Robin Heinze:
And they're so strapped for used cars right now that they're probably like, hey this is actually probably a good deal for us because now we get a barely used.
Jamon Holmgren:
So let me say welcome to automotive radio to all of our listeners. Instead of normally sports radio. I actually had a sports intro but I'm not going to touch that one today.
Robin Heinze:
We talk about a broad variety-
Jamon Holmgren:
Go Bucks.
Jon Major Condon:
Go Bucks.
Jamon Holmgren:
Olympics are starting today but let's move along. Let's go through, I'm Jamon Holmgren, I am your host, your friendly host, your friendly CTO from Infinite Red. Friendly most of the time, especially after I've had my coffee. React Native core maintainer of MobX-State-Tree, data4 and sometimes I tow things with my Jeep Wrangler. I'm joined by my extravagant co-hosts extravagant obviously because he bought an F-250 Jon Major. Jon Major lives in Janesville, Wisconsin. He's a senior software engineer here at Infinite Red, editor in chief of the React Native newsletter and big Kunes Ford fan now, I guess, right? How you doing Jon Major?
Jon Major Condon:
I'm doing pretty good. A lot better now.
Jamon Holmgren:
Yeah, sounds like it. Robin is a senior software engineer located in Portland, Oregon also works at Infinite Red. How are you doing Robin?
Robin Heinze:
I'm doing pretty good. I did not just purchase-
Jamon Holmgren:
An F-250.
Robin Heinze:
Incorrect truck so I'm doing good on that front.
Jamon Holmgren:
What do you drive Robin?
Robin Heinze:
We have two cars. We have a Tesla model Y and we also have a Subaru Outback.
Jamon Holmgren:
You really couldn't get more Portland than that, right?
Robin Heinze:
It's true and they're both white.
Jamon Holmgren:
They're both white, okay. Yeah honestly, my Jeep Wrangler kind of stands out when I drive down there but I live out in the country so.
Robin Heinze:
Yeah you need the four-wheel drive, lifted experience.
Jamon Holmgren:
Not really to be honest, it's mostly a good hauler but let's talk about our sponsor really quick, Infinite Red is a premier React Native design development agency. I'm going to cut this short because we've already spent way too much time on our intro. Hit us up infinite.red/react-native if you need help with your next project and don't forget to mention that you heard about us through the React Native Radio podcast. Let's just jump into our topic. React Native v0.65 is landing soon, it probably will have already landed by the time this airs so we're trying to get ahead of the curve a little bit and try to get some content out there about it so people will be wondering what's 0.65 all about. So we did the work for our audience going through the release notes.
Jamon Holmgren:
Jon Major, you counted up, how many changes did you count up in the preliminary change log?
Jon Major Condon:
Yeah, there's a lot, there was about 298ish.
Jamon Holmgren:
Wow. Almost 300 changes.
Jon Major Condon:
Yeah.
Robin Heinze:
So we read through the diff so you don't have to.
Jamon Holmgren:
Exactly. We want a pat on the back for that.
Robin Heinze:
Even though there'll be a nice blog post from React Native doing exactly the same thing where you would like kudos.
Jamon Holmgren:
It was different though. It was different reading through that. There were a lot of things that they probably wouldn't mention in the change log.
Robin Heinze:
If you ever want to learn more about React Native and React Native internals, try reading through a change log diff sometime.
Jamon Holmgren:
It's pretty interesting.
Robin Heinze:
The amount of stuff we had to look up, I've never heard of that in my life was significant.
Jamon Holmgren:
Yes. So let's just dive into it. We're not going to go through all 298 or whatever of them but we did hit some of the highlights here. So first off they're upgrading to Hermes 0.8 so from what we understand, there's a new garbage collector. Can someone explain what a garbage collector is?
Robin Heinze:
Well Jamon every week someone comes to your house and takes away the stuff that you have thrown away.
Jon Major Condon:
Facebook is kind of getting into all parts of our lives here, right? So garbage collector is where let's say you define a new object or something. You just, constant, my object equals and then you put the curlies and you put your properties in and everything and when you're done with it, it needs to free up that memory, wherever that was in your RAM so the garbage collector then goes through and there are different strategies for garbage collectors. So in this case, they came up with a new concurrent garbage collector. They call it Hades, I guess appropriately using Hermes and Hades. It really reduces the garbage collector pause times because actually a lot of garbage collectors will actually pause the app and then sweep through all of your memory and then mark stuff as ready to be overwritten basically.
Jon Major Condon:
A lot of times you can't tell, those little pauses you just can't tell that they're happening but in this case in 64 bit devices, it's up to 30 times shorter and 32 bit devices up to 14 times shorter and it's concurrent. So Hermes is getting better, faster, more performance, they're doing a lot of really cool stuff.
Robin Heinze:
Harder, better, faster, stronger.
Jamon Holmgren:
P90X or what was it?
Jon Major Condon:
I was thinking of Kanye West.
Robin Heinze:
Or Daft Punk.
Jon Major Condon:
Yeah.
Jamon Holmgren:
That is Hermes and Hades. Also internationalization support, Intl actually on Android so they're expanding its capabilities as well. Smi pointer compression. I think what it essentially does is reduce the amount of memory that Hermes is taking when it's kind of like it's compressing some of the information that's being stored by the engine so using less memory and they set up to 30% compression. So that's another benefit there. Another performance fix in Hermes 0.8 performance drop using cloneDeep of Lodash. So Lodash is now going to be, when you're doing a deep clone, it's going to be more performance and a lot of people use Lodash. Do you use Lodash?
Jon Major Condon:
I haven't used actually in a while.
Jamon Holmgren:
Yeah. Okay.
Robin Heinze:
We started using Lodash instead of Ramda. We just introduced Lodash to our client that we're working with right now.
Jamon Holmgren:
It's a super popular library so that's good.
Robin Heinze:
It's just like an extension of JavaScript-
Jon Major Condon:
It really is, like it's JavaScript's standard library.
Jamon Holmgren:
Okay. So beyond Hermes so that's a good one. If you're using Hermes, you're going to get a lot of benefits from Hermes 0.8 and actually I think 0.8.1 is out and maybe even 0.8.2 is coming out as well.
Robin Heinze:
It may be 0.8.1 that actually lands in React Native 0.65. We're not sure yet because it hasn't happened.
Jon Major Condon:
It's not finalized. Yeah.
Jamon Holmgren:
Another thing in your Podfile, they actually replaced flipper_post_install with React Native postinstall. So you don't have to go in there and enable and disable flipper_post_install when you have flipper installed or not, React Native postinstall will automatically detect if flipper's installed.
Robin Heinze:
A little developer experience improvement.
Jamon Holmgren:
Exactly. Yeah. That's kind of nice. There's a lot of small things, very small things, standardizing APIs, root tag context. So the root tag it kind of gives you a reference to the root. They call it a surface. Anyway, we'll link to the documentation in the show notes but it used to be-
Robin Heinze:
Documentation actually says that you probably won't need to know what this is. Most people using React Native won't need to care about it but-
Jamon Holmgren:
I think it comes more into play if you are mounting multiple React Native instances in your app.
Robin Heinze:
Like a Brownfield app.
Jon Major Condon:
It's like once you set it you just forget about it.
Jamon Holmgren:
Yeah, and so unstable root tag context is now becoming root tag context, basically it's becoming more mature and more stable, it's coming and then text now takes on press in and on press out. Text already had on press, right?
Robin Heinze:
Yeah. Text already had on press. Normally you would just wrap a text component in a pressable but there are cases, rare cases where you actually want the text itself to be pressable and so there was always an on press prop on texts but now there's just a little bit more of that pressable experience with on press in an on press app.
Jamon Holmgren:
So yeah just a little quality of life there for the text component gives you a little more flexibility. There are some internationalization enhancements, not anything super big but accessibility, there are actually many improvements.
Robin Heinze:
Yeah. There's quite a few sort of small developer quality of life improvements and accessibility user improvements.
Jamon Holmgren:
What are some examples of what landed?
Robin Heinze:
So on Android, TalkBack now announces unselected if you've changed the accessibility state selected property to false.
Jamon Holmgren:
So you could have some sort of a component that you're in a selected state and then when you change it to unselected, selected false then-
Robin Heinze:
It'll announce that it's been unselected.
Jamon Holmgren:
Okay. That seems important.
Robin Heinze:
Yeah. So that's an Android change. There's a few other things like disabling the accessibility state when the touchable or touchable without feedback are disabled.
Jamon Holmgren:
So that would come into play, like you're disabling something and then it automatically tells the accessibility features that, hey this is now-
Robin Heinze:
Yeah, exactly. Some small things like that. There's some new examples on the accessibility API page for that. I've been in search of a lot of accessibility examples recently for the project we're working on so that's cool.
Jamon Holmgren:
Little bit of a teaser, we are planning to do a full accessibility episode in the future and Robin and Mazen and Jon Major are all, Mazen is one of our-
Robin Heinze:
Do they know? They don't know who Mazen is.
Jamon Holmgren:
I shouldn't just assume. So Joe, everybody knows Joe. Yeah Mazen's one of our developers. Robin and Jon Major though, you all know and they're working on a project that has a lot of accessibility requirements and so we're going to have a whole episode about that once we're ready to kind of dive into that but we're not there yet. Yeah. And so we also have removed AccessibilityInfo.fetch is screen reader enabled instead. So these are things that I feel like a lot of these things might hit libraries more than your typical kind of app development but then I don't know, maybe they will. I guess you'll find out when you're working within your current app.
Robin Heinze:
Yeah. But it's nice to know that they're sort of constantly trying to improve the surface area of accessibility features in React Native.
Jamon Holmgren:
Yeah, exactly. That's really important. There's also another thing here. This is moving beyond the accessibility side, add a sticky header hidden onScroll option to keep the sticky header hidden during scrolling but the problem is very-
Jon Major Condon:
Self-explanatory.
Robin Heinze:
When you scroll hide the sticky header.
Jamon Holmgren:
Is this something-
Robin Heinze:
That's some good naming-
Jamon Holmgren:
Right exactly. And only slide in when scrolling up. So this is kind of an interesting one. I think this is a fairly common affordance, having the header slide out of the way when you're scrolling down and then when you scroll back up then it actually comes back into view.
Jon Major Condon:
And I believe you can invert that as well.
Jamon Holmgren:
Okay. That's interesting. That would be a little bit less common, I would assume.
Jon Major Condon:
Unless Safari with their search, I believe it has in the new update that's coming, search is coming to the bottom of the screen and not the top of the screen anymore.
Jamon Holmgren:
Really? More reachable, I suppose but-
Jon Major Condon:
Yeah, I guess so.
Robin Heinze:
Is there a reverse option for that? Like if you only want the header to appear while you're scrolling? I don't know. I feel like iOS Safari does that. I feel like if you're statically just sitting on the page, you can't see the, I guess it's a footer and you have to scroll in order to get the footer to show up.
Jon Major Condon:
It's complicated.
Robin Heinze:
It is.
Jamon Holmgren:
We do have more customization of styles for the date picker on iOS so I don't know how often you have to update your date picker. Actually do you often, for dates are you building custom components usually or are you using the date picker?
Robin Heinze:
I've libraries for the most part that probably use date picker iOS but I don't think I've ever used date picker iOS directly.
Jamon Holmgren:
Yeah, so now there's a prop for the date picker styles on date picker iOS. Flipper has been updated by our friend Michel Weststrate to 0.91.1. Facebook seems allergic to going to 1.0 but 0.91 for Flipper.
Robin Heinze:
Yeah. I don't think it's ever going to happen at this point.
Jamon Holmgren:
Reminds me of a game that I bought pre-release for back in 2014, it is still an alpha and actively developed the whole time, it's called Star Citizen.
Robin Heinze:
It just seems like a fear of commitment.
Jamon Holmgren:
I mean, what their problem was they took on too much. They took on this massive, we're going to make a whole world and you can explore any part of it or sorry not a world, a universe and by the way, we have all these ships and I don't know, they're still an alpha, I literally bought on Kickstarter pre-access in 2014.
Robin Heinze:
That sounds like No Man's Sky.
Jamon Holmgren:
Yeah. Except for No Man's Sky somehow has actually delivered somewhat. You can play Star Citizen but-
Robin Heinze:
It took them a while.
Jamon Holmgren:
So anyway, 0.91, I don't really know what's the difference, I guess there's iOS build support for i386, use_flipper will no longer need custom overrides to build with Xcode 12.5. There's some Xcode 12.5 fixes for sure in here. There's also remove data as a prop for virtualized SectionList. So you really shouldn't be passing data in anyway, you pass it in sections.
Robin Heinze:
Right, each section has data but the list as a whole shouldn't have data.
Jamon Holmgren:
Yeah, that makes sense and I don't know, I don't think anybody, maybe people are using data but that's not what a virtualized SectionList is for. By the way, if you're not familiar with VirtualizedList, it is basically the underlying functionality underneath FlatList and the virtualized part of it is kind of interesting because it allows you to basically, it optimizes so as things scroll off the screen, it reuses those cells. If it scrolls off the top of the screen, it'll then pop the cell down to the bottom. This is how normal table views work in iOS. It saves memory. It allows them to kind of keep the performance high without having to, let's say that you had a list with 9,000 things in it, you don't want to be rendering 9,000 cells and so it'll only render what's on the screen and a little above and a little below. So it's all smoke and mirrors but that's what a VirtualizedList is. It's actually very helpful, if you're in a situation where you need a lot more control over what's happening, I would recommend looking into VirtualizedList. It's not that hard.
Robin Heinze:
Also known as FlatList and SectionList.
Jamon Holmgren:
FlatList and SectionList are based on it and they use it under the hood but VirtualizedList gives you more control basically. So I have had to use it before I liked the underlying thing. TextInput has a few changes, our notes just say generic description. The description in the change log was generic. It just said refactor. Okay. Yeah. The code does look nicer. I noticed a comment that said, this is a hack that has been removed now so maybe it's not a hack anymore. TextInput component has been refactored. Keyboard no longer inherits from Native EventEmitter so actually there's a lot of EventEmitter listener changes. Robin, you want to go through some of that?
Robin Heinze:
Yeah. There's a general movement away from things like remove event listener, remove subscription and instead you return a call back from this subscription call. So if you're subscribing or adding a listener, you return a call back and that's your removal rather than having to separately call remove and so there's a bunch of different changes that sort of bring things up to date with that new pattern.
Jamon Holmgren:
Yeah. There were a lot of commits that had to do with that, which is nice. It's like it really standardizes the API in that area.
Robin Heinze:
Right. So in this case, keyboard no longer inherits from Native EventEmitter so that makes it so that it's no longer implementing remove all listeners, remove subscription,
Jamon Holmgren:
Dev settings also have a similar change and then dimensions.addeventlistener now returns an event subscription which allows you to clean that up. There were some things like React context when it's destroyed, they did a better job of cleaning up the listeners on those. They deprecated accessibility, info.remoteeventlistener. Basically it just a lot of event listener subscription API standardization cleanup. So that that's cool. Not super exciting but it's yet another-
Robin Heinze:
It's good. We want major releases to have not super exciting changes because although it's less fun, it means the library is really stable.
Jamon Holmgren:
Yes, exactly. A
Jon Major Condon:
And it's nice that you don't have to really think about it. It just happens in the background.
Jamon Holmgren:
Exactly.
Robin Heinze:
If you miss the release, if you don't think about it or don't upgrade right away, you're not going to get super behind on really critical functionality and changes, which is good. It's really good for long-term stability.
Jamon Holmgren:
Yeah totally. There's a log box improvement. Won't collapse all stack frames if every frame will be collapsed. So just a little developer experience thing there. LogBox of course is the newest sort of error page screen that pops up when you have a problem so there was some sort of an issue there they fixed. Removed remaining references to library loading, we are doing all fast refresh now. Are you sad that library loading is gone?
Robin Heinze:
No, I don't have any particular attachment to it. Fast refresh sounds way cooler.
Jamon Holmgren:
It does. Yeah. Blazing fast refresh.
Robin Heinze:
There you go.
Jamon Holmgren:
Does it work okay? I don't know. I've run into some issues before.
Robin Heinze:
I've found that it works well for the most part. I tend to by force of habit just hit reload, manual reload when I switched back to my simulator most of the time but for the most part fast refresh seems to work great.
Jamon Holmgren:
I bet it would be more useful when you're just styling stuff. Probably less so when you're trying to fix a store or something or event emitters and whatnot. Okay makes sense.
Robin Heinze:
Also definitely turn it off, when you pull a new branch or install node modules.
Jamon Holmgren:
Yeah, you want a full refresh there.
Robin Heinze:
It'll sit there just fast refreshing every second because the files change.
Jamon Holmgren:
This one's kind of an interesting one. I think you've run into this Robin. You know that error that pops up when you are, it just pops up on Android sometimes. Setting a timer for a long period of time i.e. multiple minutes is a performance and correctness issue on Android as it keeps the timer module awake and timers can only be called when the app is in the foreground.
Robin Heinze:
Yeah, I've been getting that warning randomly in my apps since I started doing React Native and I'm not using a timer. I'm not implementing a timer but it's usually it's a third-party library and you can't really do anything to fix it so you end up just suppressing that particular yellow box error.
Jamon Holmgren:
Well they removed it entirely in 0.65 so that's not going to be even a thing anymore.
Jon Major Condon:
You won't have to worry about it. I mean, the justification they said is just that basically there wasn't really a way to suppress it and sometimes you have to do this. So yeah.
Jamon Holmgren:
But be aware of that, that it could be if you set really long timers.
Robin Heinze:
If you're actually setting a timer and you're setting it for a really long time, maybe think about not doing it.
Jamon Holmgren:
Yeah do something different. They fixed nested FlatLists not firing onScrollDragEnd and on momentum methods. I feel like, I know the aforementioned Mazen and I had actually worked on an issue with FlatList and I feel like maybe this was happening to us. We ended up finding a different solution but this is a big one. Nested FlatList, we do that all the time. Our screens I think are well, they are scroll list, I guess they're not FlatList or ScrollView as I should say.
Robin Heinze:
I mean, it's a bit of an anti-pattern but it seems like there's cases that come up pretty frequently where you need to do it. Sometimes I'll have horizontal scrolling within a vertical scrolling page or collapsible components within a parent scrollable and then each sub-component needs to scroll too and it's something that you do occasionally and so you need it to be able to work.
Jamon Holmgren:
So this has nested FlatLists though so maybe it's just referring to FlatList instead of ScrollView and if that's the case then that's probably less common. Nested FlatList, that's an interesting one. I don't know if I've ever done that. I was thinking of nested ScrollViews when I first saw this.
Jon Major Condon:
I mean, I have a nested SectionList or a SectionList with a FlatList in it but the FlatList is horizontal-
Jamon Holmgren:
Okay, that actually makes sense. All right. Well this would affect that. There's also another improvement first press not working after pull to refresh. So I don't know if I've ever run into this but that could be-
Robin Heinze:
That was an iOS specific fix by the way.
Jamon Holmgren:
Yeah. So that's iOS specific there. So nice fix there. Also builds on Xcode 12.5 obviously iOS only and that includes running React Native projects with Xcode 12 and release on the iPhone simulator. So Xcode 12.5 is the latest version and they made sure that it was working okay on that. And let's see, what else is there? Removed iOS 10 and tvOS 10 support. That is interesting. I don't think it's going to be, I don't know, maybe some people are going to have a problem with that but that's-
Robin Heinze:
What are we on now? iOS 13?
Jamon Holmgren:
iOS 14.
Robin Heinze:
14.
Jamon Holmgren:
Yeah.
Robin Heinze:
iOS 10 is pretty old.
Jamon Holmgren:
iOS 10 came out in 2016. So that's five years old. It's probably time to get with it and move forward.
Robin Heinze:
I need to go check the iOS version on my mother-in-law's phone and make sure it's not iOS 10.
Jamon Holmgren:
Every time that my mother-in-law comes over, she hands me her phone because she knows I need to back it up and-
Robin Heinze:
Clear the cache.
Jamon Holmgren:
Clear things, upgrade to the latest and then we sit around and visiting until it's done, which could be awhile.
Robin Heinze:
That's the only reason she comes to see you Jamon.
Jon Major Condon:
That's why family get togethers.
Jamon Holmgren:
It's fine. Actually I was just over there last night and they're wonderful people. Fix race condition on the initialization of React root views. That's basically all I saw as far as really kind of, I don't know things that caught my eye, like you said Robin, it's nice to see a bunch of release notes that aren't big exciting changes. All of a sudden we have a whole new component that we need to swap out our old ones for.
Robin Heinze:
It would make for a way more interesting episode but in terms of actually using React Native, I'm glad that the releases are pretty boring and not boring, no offense. They're boring in a good way.
Jamon Holmgren:
Boring in a good way. It's getting better. So from my perspective, it looks like React Native 0.65 is going to be a relatively less painful upgrade. Does that seem like it to you both?
Robin Heinze:
I would guess so. I don't think, the only breaking change is the Hermes upgrade.
Jon Major Condon:
Hermes and then also that flipper_post_install change and that [crosstalk 00:29:16] Native postinstall, that's a pretty easy change. I guess we'll have to see. Of course this episode will air probably after it's been released, if not then it'll come out fairly soon. It's not totally finalized so there is a possibility something else will come in but I've been watching the core team conversations in Discord and there isn't really anything else that's on the list that needs to be merged in at least not anything major. Sometimes they're bringing in little fixes here and there but it's pretty locked down and then they just need to write up the release notes and get this version cut but then yeah, hopefully this episode helps people kind of understand what's in it. We're going to be doing every release, major release, we're going to be, well major I guess 0.65 that type of release, we're going to be doing an episode just about that release just so you folks don't have to go and read 300-
Robin Heinze:
Unless you want to. It's an educational experience-
Jon Major Condon:
Sure is.
Robin Heinze:
If you don't want to do it, we'll do it for you.
Jamon Holmgren:
Jon Major, is there anything new with the React Native Newsletter? When was the last one that you sent out?
Jon Major Condon:
The last one would have been this past Tuesday.
Jamon Holmgren:
Okay.
Jon Major Condon:
Yeah.
Jamon Holmgren:
And anything cool in there or I guess people can just go check it out too reactnativeradio.com-
Jon Major Condon:
React Native Newsletter.
Jamon Holmgren:
Sorry-
Jon Major Condon:
But yeah definitely go check out that one.
Jamon Holmgren:
React Native Radio, that's just in my head, reactnativenewsletter.com. Yeah. So anything special in that episode?
Robin Heinze:
Episode?
Jon Major Condon:
Edition.
Jamon Holmgren:
Edition. I can't talk today. I'm sorry. It's just, at least I didn't buy the wrong truck, that's all I can say.
Jon Major Condon:
That hurt. Let me bring it up. I got it right here. So one thing that I found interesting was the first link in the newsletter, which is about code splitting in React Native applications. From my research code splitting is a thing that is not done yet. So currently I think it is in beta, it's not stable but code splitting, it is coming. It's coming.
Jamon Holmgren:
Code splitting?
Jon Major Condon:
Yes. I believe Callstack is working on it.
Jamon Holmgren:
Interesting.
Jon Major Condon:
I think it's called Re.Pack.
Jamon Holmgren:
Re.Pack okay.
Jon Major Condon:
Yes. Re.Pack that's it.
Jamon Holmgren:
That's interesting. I didn't think code splitting was a thing in React Native because it's sort of just one bundle and Hermes obviously does sort of on-demand loading and stuff like that.
Jon Major Condon:
Yeah. So go check out the first link. I mean, check out all the links but the first link talks about the code splitting.
Jamon Holmgren:
Right. That's very interesting. Better tooling would be a really cool within some of the bundlers and stuff like that. Metro for example, just doesn't have quite the insight, I would love to do a Metro episode to be honest and really dive into that. Does anybody have a weird bug today? Actually, I'd like to talk about the aforementioned FlatList bug that I was talking about and that Mazen and I worked on. So we had this FlatList and we were trying to animate a button at the bottom to come up from the bottom of the screen when you were sitting still on the list but then if you started scrolling down, it needed to duck out of the way, needed to animate down out of the way and it was taking forever and it would like start going down really kind of choppily. It would go down in a little ways and then sometimes wouldn't go down at all.
Jamon Holmgren:
It was just a real problem and so we were trying all kinds of things but what we finally did was we just stripped everything out of the onScroll event entirely and then just logged onScroll and we noticed that, before we did that, we did it logged onScroll and it was firing every 400 pixels or something onScroll only firing in the first 400 pixels which was like way too late. We needed to know right away. When we stripped everything out, then it was firing like you expected, every 40 pixels and then we were like, okay so something in our code is causing onScroll to not fire as often.
Jamon Holmgren:
Well, it turns out we were tracking whether it was animating or not in a set state which was re rendering the component, which was interfering with onScroll and so changing that from a useState to a useRef because we didn't really need to change anything we just needed to track. Is this currently animating or not? And so we put that into a ref and said is animating .current = true or .current = false and just making that one change smoothed out the onScroll. So that was kind of an interesting one. I think sort of the moral of the story when you're running into issues like this, I like to just strip everything out and add stuff in slowly until you observe the issue pop back up again and that's the approach that Mazen and I took and it led us to the right solution from there but that was kind of an interesting one.
Jamon Holmgren:
All right. So let's go ahead and wrap up today. Where can people find you Robin on Twitter?
Robin Heinze:
I'm @robin_heinze.
Jamon Holmgren:
And Jon Major?
Robin Heinze:
@jonmajorc.
Jamon Holmgren:
And you can find me @jamonholmgren. You can find React Native Radio @reactnativerdio. You can find the newsletter @rnnewsletter, is that right?
Jon Major Condon:
For Twitter-
Jamon Holmgren:
Yeah for Twitter, I think it's @rnnewsletter.
Jon Major Condon:
We'll go with that.
Jamon Holmgren:
If it's someone else, sorry. We are professionals here. Don't try this at home. Thanks everybody for joining me today 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/react-native. Special thanks to all of you listening today for bearing with us through all of this and learning with us. Reminder Infinite Red's hiring senior React Native engineers in the US and Canada, go to careers.infinite.red and we will see you all next time.
Robin Heinze:
Bye.
Jon Major Condon:
Bye.