In this episode, Robin, Mazen, and Jon hold down the fort while Jamon is on vacation. They discuss Wordle, and what’s new in React Native 0.67.
In this episode, Robin, Mazen, and Jon hold down the fort while Jamon is on vacation. They discuss Wordle, and what’s new in React Native 0.67.
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.
Todd Werth:
This episode brought to you by Hugs. We could all use a few extras hugs right now. Episode 228, React Native 0.67.
Robin Heinze:
So are you guys playing Wordle?
Mazen Chami:
Yes, totally obsessed with it.
Robin Heinze:
Feels like everybody's playing Wordle.
Jon Major Condon:
Besides me.
Robin Heinze:
Except Jon Major, he doesn't play Wordle.
Mazen Chami:
There are a lot of new spinoffs which are really cool to follow.
Robin Heinze:
I've noticed that. The original isn't good enough anymore.
Mazen Chami:
Yeah, as always.
Robin Heinze:
What spinoffs have you seen recently?
Mazen Chami:
So I've played three others. I've played Nerdle, which is Wordle but with math and it's pretty cool.
Robin Heinze:
How does that work?
Mazen Chami:
You basically have to put together a formula with, I believe it's nine boxes. So, 12 plus 34 equals...
Jon Major Condon:
Yeah. See I already would fail.
Robin Heinze:
Okay. I have to check this out.
Mazen Chami:
Yeah.
Robin Heinze:
Nerdle.
Mazen Chami:
Similar to wordle, Nerdle so math. And then-
Robin Heinze:
Interesting.
Mazen Chami:
... Robin, you led me onto Worldle.
Robin Heinze:
Yeah. So there's one called Worldle which is really hard to say, but it's geography. I think they're all place names.
Mazen Chami:
Yeah. You pick a country and then it tells you how far off in kilometers or miles you are. And it tells you the direction you need to go to get to that country. So if you like geography that's a really cool one.
Jon Major Condon:
Interesting.
Robin Heinze:
I'll have to check that. It seems like making a Wordle clone is going to be the new maker Hacker News clone or Twitter clone. If you're just trying to build a little app.
Mazen Chami:
This morning, I got an article from Mashable of a new Wordle spinoff where you're trying to solve four words at the same time with nine tries. So you have four-
Robin Heinze:
What?
Mazen Chami:
... four grids going on the same time. And when you type the words-
Robin Heinze:
See that's just getting ridiculous. Let's simmer down a little bit.
Mazen Chami:
It's called Quordle.
Robin Heinze:
This is what-
Mazen Chami:
Qu.
Robin Heinze:
... This is-
Jon Major Condon:
Geez.
Robin Heinze:
... what I do at 6:00 AM when I first wake up, original Wordle is about my [inaudible 00:02:28].
Jon Major Condon:
I think I should create one called Gurgle.
Robin Heinze:
Gurgle.
Mazen Chami:
There you go.
Robin Heinze:
Or Girdle.
Jon Major Condon:
Girdle.
Robin Heinze:
Maybe not. Our listeners may have caught on already to the fact that we're missing somebody. Jamon is not here. He is, I think, leaving on vacation with his family going somewhere fun. I think he said something about a cabin. So we're all very jealous and will be very happy when he comes back. But for today, I guess that makes me your host. And do I also get to be the CTO?
Mazen Chami:
Yeah.
Robin Heinze:
Can I-
Mazen Chami:
CTO for the day?
Robin Heinze:
... Can I call myself CT? Yes.
Mazen Chami:
Let's do it.
Robin Heinze:
I'm going to do it. CTO for the day. And of course I'm joined by my loyal Co-hosts, Jon Major and Mazen.
Mazen Chami:
I'll stay [crosstalk 00:03:16].
Jon Major Condon:
I should bow down. I'm not worthy.
Robin Heinze:
That was not a dig at Jamon at all. I promise. Jon Major you live in Janesville, Wisconsin and you're a Senior Software Engineer here at Infinite Red. You're also the Editor-in-Chief of the React Native newsletter. What's up Jon Major?
Jon Major Condon:
Not too much. Haven't been around I think in the what? Past couple episodes I haven't been here.
Robin Heinze:
Yeah, we've missed you. We've missed you. We're glad to have you back on the mic.
Jon Major Condon:
Yeah.
Robin Heinze:
And then of course Mazen Chami. He lives in Durham, North Carolina, and he's a former pro soccer player and coach and also a Senior React Native Engineer here at Infinite Red. How are you doing, Mazen?
Mazen Chami:
Doing well. Got all my games done except for Wordle this morning, so.
Robin Heinze:
Except for the original Wordle.
Mazen Chami:
Yeah. Busy morning.
Robin Heinze:
I'll just do that one later. I took six tries this morning, so hopefully you do better than I did. And before we get into our topic for today, I do have to mention, of course, that this episode is sponsored by Infinite Red. Infinite Red is a premier React Native design and development agency located fully remote in the U.S. and Canada.
Robin Heinze:
If you're looking for React Native expertise for your next React Native project, hit us up. You can learn more at our website, infinite.red/reactnative. And of course, don't forget to mention that you heard about us on the React Native Radio podcast. And also Jamon told me I had to mention that we are, of course, still hiring for senior React Native engineers. Go to career.infinite.red and fill out the form if you'd like to work with us.
Robin Heinze:
So let's get into our topic for today. Today we're going to go over the new React Native release, React Native 0.67 came out not too long ago. And we'd like to just go through some of the highlights so you don't have to read the changelog. We did that for you. We'll go through some of the highlights and just talk about what's new in this release.
Robin Heinze:
Just looking at the blog post that comes out with every release, there's not too much that's huge that changed. I think the biggest thing is that Android date picker was removed from React Native core as part of the Lean Core initiative. So if you need to use the date picker on Android, I think that means you need to import it from a separate package. I don't know what the new package is, but I'm guessing it's React Native
Mazen Chami:
Community probably.
Robin Heinze:
Yeah. Community Android date picker and we'll put that in the show notes. Hey Mazen, what stood out to you from this release?
Mazen Chami:
Not much other than really the date picker, because I feel like that's a breaking change right now. But there is a bunch of other stuff in the deeper changelog other than the blog post. If you are using the action sheet for iOS, you now have the ability to tint your cancel button tint color. I used tint one too many times.
Robin Heinze:
Now what do you think you would tint it to other than red?
Mazen Chami:
I know, right? It seems weird, but I think you have the ability on Android. So it's converging both platforms now to give you that ability. I don't know if anyone-
Robin Heinze:
I see.
Mazen Chami:
... Maybe if you have a-
Robin Heinze:
I'm curious what the use case would be for that.
Mazen Chami:
... Yeah.
Robin Heinze:
Color blind friendly maybe. I don't know.
Mazen Chami:
Yeah. I'm not sure there, but there's that. There is this other one that I've noticed a lot popping up a lot in the current project I'm working in. And they renamed a deprecated library, which I don't know why they would go through the trouble of renaming it instead of just removing it at this point. But keyboard.removeEventListener is now keyboard.removeListener.
Robin Heinze:
So it's a deprecated function, but they renamed it.
Mazen Chami:
Mm-hmm (affirmative). You'll get the warning, you'll get the yellow warning box that it's deprecated and you have to fix the name or else you get an error. So kind of weird, but getting there. I wonder where that's going to go eventually after completely removing it.
Robin Heinze:
Yeah. Well I wonder how long they'll leave it deprecated before they completely... It sounds like they're probably going to support it for a while if they care enough about what it's named.
Mazen Chami:
Yeah. Exactly.
Robin Heinze:
I also noticed image background no respects image style width and height. So if you don't know, image background is a component that puts an image behind all of your other content. Which I remember from the old days you used to have to finagle an image with absolute positioning and it was always wonky. So they introduced the image background component a couple years ago.
Jon Major Condon:
That's actually kind of nice though.
Robin Heinze:
It is.
Jon Major Condon:
Coming from web you have the background image and CSS. So it's nice that there's that in React Native.
Robin Heinze:
Mm-hmm (affirmative).
Mazen Chami:
Have you guys ever used it? I've used it-
Robin Heinze:
I've used it a couple times. I'm pretty sure we use it in Ignite.
Mazen Chami:
Yeah. Well there you go.
Jon Major Condon:
Oh yeah. Yeah. The Bowser.
Mazen Chami:
Bowser. Yeah. Okay, cool. I think it's really nice to just have that watermark, I guess essentially in the background. So yeah, I've used that a bunch of times and I really like that component.
Robin Heinze:
Our designers tend to use it for gradient backgrounds or other textured backgrounds. So it's not like an image image, because that would be pretty busy, but for more subtle backgrounds that are hard to do with just background colors.
Robin Heinze:
So yeah, now image background respects width and height, which apparently didn't before. So those are, I think, the cross platform changes. At least the most prominent cross platform changes. Let's see what's iOS specific.
Jon Major Condon:
I have one.
Robin Heinze:
Sure.
Jon Major Condon:
So remove alerts window when called to hide that was a fix for iOS. So it appeared that it was fixed a while ago and there's a new fix to it. And basically the problem was you had to set the property to yes on UIWindow. And this appeared to be not set to yes and now it is.
Jon Major Condon:
So the remove alert window does get removed. And so basically what was happening when the alert did go away, there was a window that was left that was hidden, but it was capturing all events, so that's now fixed for iOS.
Mazen Chami:
Seems like a pretty good cleanup to help performance and make sure there's nothing hanging on the UI, which is pretty cool.
Robin Heinze:
And we should know that that's actually a change that came in 0.67.1.
Mazen Chami:
Oh, right.
Robin Heinze:
Rather than 0.67.0. But I think we're up to 0.67.2-
Mazen Chami:
2.
Robin Heinze:
... now. So the latest version should have that. I also noticed a fix for how long we wait if the packager can't be reached. It used to be 60 seconds and now it's 10 seconds. So that's a nice little developer experience. So you're not sitting there for a whole minute before you realize that the packager is dead. So that was a cool change.
Mazen Chami:
I have one for text input. Have you guys ever pressed down the space bar to get to move to a different part of your input quicker?
Robin Heinze:
I know you can do that. I've heard that that's a thing, I have yet to develop the muscle memory for that.
Mazen Chami:
Yeah. I use that all the time.
Jon Major Condon:
I don't think I'm aware of this. So you tap the space bar?
Mazen Chami:
Yeah. Let's say you're in the middle of your string or even a multi-line input, which is what this is about, and let's say you want to go down three lines. Instead of using your finger to then tap down three lines, sometimes it's hard to get precisely where you want, so if you press and hold the space bar, what happens is the cursor turns a lighter gray. It looks like it's floating, it's like a ghost essentially.
Jon Major Condon:
Oh, yeah.
Mazen Chami:
And then you can essentially just move your finger on the screen and it'll just move quicker to where you want it to go.
Jon Major Condon:
Got you. Yeah. For some reason when you said space bar originally, I was thinking of my space bar on my keyboard that I use for my MacOS machine. But no, I totally get it now.
Robin Heinze:
Okay. So I pulled open Slack on my phone just to try this. Maybe slack has a different command for this, but-
Mazen Chami:
Interesting.
Robin Heinze:
... when I try to swipe on the space bar, it shuffles through the various auto suggest, like the autocorrect suggestions.
Mazen Chami:
What phone do you have?
Robin Heinze:
iPhone 13.
Mazen Chami:
Maybe that was taken away in 13. Because I have 12 and I'm able to do that.
Jon Major Condon:
Yeah. It works on mine too.
Robin Heinze:
Wait. Oh. Maybe it has to be multi-line.
Mazen Chami:
It doesn't have to be multi-line. That's the pretty cool part of it. Just hold onto it and just-
Robin Heinze:
Oh, wait. Oh, there it is. Oh my gosh.
Mazen Chami:
... Isn't that life-changing?
Robin Heinze:
It's literally like you have a mouse.
Mazen Chami:
Yeah.
Robin Heinze:
That's-
Jon Major Condon:
Yeah. It's so nice.
Mazen Chami:
Exactly. I love that. I use that all the time.
Jon Major Condon:
Mm-hmm (affirmative).
Mazen Chami:
Well coming back to React Native, if you are on iOS 14 and above and using previous version, I guess 0.66 at this point of React Native, you'll notice when you use this feature the cursor, what they called jerks so it doesn't give that... It's not steady. It's almost bouncing once you do that. iOS 13 and below worked fine.
Mazen Chami:
So there is a fix now when you're moving the cursor to have that not animate I believe is what they're doing. So gives that better user experience at the end of the day. So simple change, probably the longest one we're talking about here. But it's a cool feature. If you don't know about it, use it. It helps.
Robin Heinze:
Yeah.
Mazen Chami:
I feel like-
Robin Heinze:
I'll have to start.
Mazen Chami:
... I type faster using it.
Jon Major Condon:
For real. Doesn't Android have that too?
Mazen Chami:
Yes, I believe so.
Robin Heinze:
Of course Android always has everything first.
Jon Major Condon:
That is true.
Robin Heinze:
Then iOS does it better. I don't want to start a phone preference war here, but.
Mazen Chami:
But iOS is better.
Jon Major Condon:
Yeah. Agreed.
Robin Heinze:
iOS usually does it better. Let's see what's next. On iOS looks like they fixed image default source not showing. So, while the image was being downloaded it didn't show the default source it would only show it after it failed. So this fixes it so that it shows it while the image is downloading, which is the point of that prop. It looks like this was a bug introduced just a couple versions ago. And it did work before that, so this fixes that.
Mazen Chami:
I just noticed that you mentioned that it was introduced somewhere between 0.63 and 0.65. I liked that they included that bit because helps me know, if I'm on 0.62, it helps me know this doesn't really-
Robin Heinze:
I don't have to rush to upgrade.
Mazen Chami:
... Exactly, yes. Yeah. That's pretty good. I like that feature.
Jon Major Condon:
Are we on the Android?
Mazen Chami:
Yes.
Robin Heinze:
Yeah. Obviously I don't think we touched on all of the iOS changes, but those are the ones that jumped out at us as being significant. Android had quite a few as well. Looks like setting overflow scroll in a view component style will clip the children in the view container. I think previously it only did that if you did overflow hidden, I believe.
Mazen Chami:
Yes.
Robin Heinze:
And now it does it on overflow scroll as well.
Mazen Chami:
Similar to that about scrolling, I saw one where the ScrollView or I believe all other list, virtualized list related items when you use the scroll to position, instead of actually just scrolling to it if you are at that position, it'll check for it.
Mazen Chami:
So I think that's pretty cool performance. Don't cause an animation if you don't have to. I know it's not much. I mean it's not going to scroll any pixels, but by checking that before moving we limit what's going to happen.
Robin Heinze:
Oh, I see. So if you were already at the position where you were telling it to scroll to, it would run a bunch of logic to try and scroll to that position. So even though there would be no animation-
Mazen Chami:
Exactly.
Robin Heinze:
... it was giving stuff.
Mazen Chami:
It would look like nothing really happened, but something is happening. We're using memory from the app essentially. Fun fact. I am working on rewriting something to use just a native FlatList for a horizontal list. Where if we do something on another page and we come to it, we want to essentially scroll to a certain index.
Mazen Chami:
I'm seeing a lot of bouncing happening and I assume it has to do with this. So I might have to put a check to see are we at that position? Don't scroll to it, so.
Robin Heinze:
Nice little performance improvement there.
Mazen Chami:
Mm-hmm (affirmative).
Robin Heinze:
That's the little hidden thing that could be slowing your app down.
Jon Major Condon:
Oh. This next one is that weird one.
Mazen Chami:
Yeah.
Robin Heinze:
Oh.
Mazen Chami:
Yeah. So I haven't really noticed it, but I thought it was really cool that they found that, someone found this but I don't know who found it, on Android NestedText. If you have an on press handler, it will register the on press for all characters except for the last character.
Mazen Chami:
So let's say we have hello and then within hello we have world nested. And when you click world, we want to fire off some fireworks. If you were to click the D of world, nothing would happen.
Robin Heinze:
Interesting.
Mazen Chami:
So there's a fix for that.
Jon Major Condon:
That's a really difficult one to find. I would imagine it had to have been from the mouse of debugging on a simulator. Because a finger finding that, that's a small finger. That's [crosstalk 00:16:02].
Mazen Chami:
Exactly. For me, I would've never gotten that. Because I feel like half the time I'll be clicking on something and I click the other thing. And it's like, okay.
Jon Major Condon:
Same here. I fat-finger everything.
Robin Heinze:
It's interesting what a different experience we have as developers using simulators and emulators, where we're clicking around with a mouse and typing on a physical keyboard. And it's really easy to forget to use a physical device because the UX can be very different.
Jon Major Condon:
100%.
Robin Heinze:
And this is actually a case where a user probably would never have experienced this bug, but.
Mazen Chami:
There is a GIF in the pull request of it, of showing it actually working.
Robin Heinze:
Really.
Mazen Chami:
So it's pretty cool how you get to see that it doesn't work. I think the person who's just doing a console warn on the click call back, on the on press. And you can see it in the first one not working and then after the fix it actually working, so.
Robin Heinze:
Wow. Well kudos to, what's the author of that one?
Jon Major Condon:
I can't say it.
Mazen Chami:
Can't pronounce it.
Robin Heinze:
Fabriziobertoglio1987. Whoever you are, nice catch. Let's see. Added a new permission to permission Android called access media location. But we should note that it is marked as a dangerous permission in the Android docs. So I think it-
Mazen Chami:
Is that like a fine permission? Like an exact location?
Robin Heinze:
... allows an application to access any geographic locations persistent in the user's shared collection, whatever that means. But it seems like a very invasive level of permission, so use it wisely. But now you can access it through React Native.
Mazen Chami:
What is privacy?
Jon Major Condon:
For real?
Robin Heinze:
What is privacy anyway?
Jon Major Condon:
So Hermes initialization will no longer need an explicit configuration. And so for this one, currently React Native on Android passes in explicit Hermes config which initializes Hermes. But it looks like the upcoming version will no longer need any sort of initialization.
Robin Heinze:
It just works.
Jon Major Condon:
Just works.
Robin Heinze:
Hashtag, it just works.
Jon Major Condon:
Hashtag, just works.
Robin Heinze:
Out of the box. Oh, that's nice.
Mazen Chami:
Yeah. Onto the next one. Another one from our friend fabriziobertoglio1987, another quirky selection of text, but this time nested in a FlatList. The fix is called fix non-selectable text in FlatList. And I believe where he's getting at with this is the changing of the selectable prop on a text view, he now fixed that. So you can actually select a specific piece of text within the FlatList. So another edge case good catch.
Jon Major Condon:
Yeah. This dev is all about precision.
Robin Heinze:
Looks like this person has one more onkeypress event not fired, oh yeah, onkeypress event not fired with numeric keys. I remember seeing that one.
Mazen Chami:
Yeah. Okay Fabrizio.
Robin Heinze:
Is this person a QA engineer? Because it seems like that's something QA would find.
Mazen Chami:
Yeah.
Robin Heinze:
Just go in ham on the keyboard trying to find bugs.
Mazen Chami:
Mm-hmm (affirmative).
Robin Heinze:
But we appreciate the work to make React Native better. Anything else that stood out to us for Android?
Jon Major Condon:
There's one more that we have on the list, align-items baseline for text elements on Android. So that's now fixed. So it appears that before align-items baseline for text elements was just not working.
Robin Heinze:
What does it do? I've never actually used align-items baseline.
Jon Major Condon:
Yeah. So align-items baseline would put the text on the bottom of say like the view versus like there's baseline and there's, what? Start right or start and left.
Robin Heinze:
So is it similar to how you would use start and end versus right and left? Is baseline like-
Jon Major Condon:
Yeah, but it's vertical. Baseline would be vertical.
Robin Heinze:
... Right. Okay. This is the vertical version of that.
Jon Major Condon:
Yeah.
Robin Heinze:
So instead of saying top and bottom you'd say baseline and equivalent for the top.
Jon Major Condon:
Yeah. I can't think of the equivalent right now.
Mazen Chami:
If you look at the PR there's an image of the after and that image is actually very helpful. Where this person has the numbers nine to zero where they're in decreasing font size and where he has the baseline, align-items baseline. And you can see that regardless of the height, they're all aligned to the bottom of the baseline. And if you look at the before-
Robin Heinze:
Oh.
Mazen Chami:
... they're basically just aligned. The view that the text is in is aligned to the bottom of the wrapper view. Baseline will take the text-
Robin Heinze:
Interesting
Mazen Chami:
... to be the bottom. So the bottom of the text.
Robin Heinze:
Today I learned. Okay.
Mazen Chami:
Yeah.
Robin Heinze:
That's very useful. Well, cool. So that is fixed now on Android.
Mazen Chami:
And that's helpful because we do a lot of align heights for different texts, so the ability to just still... Instead of I'm guessing most of the time people would do align-items flex-end or something. And that wouldn't necessarily align have to do some clipping along the way, this fixes that.
Robin Heinze:
Yeah. So this handles the case where you have mixed line heights in the same line basically. Awesome. So I think that hits everything that really stood out to us there. Obviously that was not everything, there was more in the changelog than just those items. A lot of them were more maybe small or really buried deep in the belly of React Native where the average user wouldn't maybe care so much.
Robin Heinze:
So there's definitely more. We'll link the full changelog in the show notes for sure, so you can check it out yourself. But that was everything that stood out to us. Mazen, do we have a weird bug today?
Mazen Chami:
We do. Speaking of all these weird bugs that we've found in this version fixed.
Jon Major Condon:
Mm-hmm (affirmative).
Robin Heinze:
This is, this whole show is the weird bug show.
Mazen Chami:
Yeah. This weird bug comes to us from Lizzi Lindboe who works at Infinite Red. She posted, "Just ran into this issue with Talkback where navigation from the end of a horizontal ScrollView doesn't work correctly if it's nested inside a vertical one." And then she linked to a React Native issue which will link in the show notes.
Mazen Chami:
But from looking at this issue, unlike most weird bugs, I don't think we really have a solution for this yet. I think it's one of those things where if you are working on accessibility, which I think everyone should, keep this in mind and make sure you look into it. One thing to note is this was encountered, and Lizzi mentioned this in the issue, this was encountered on React Native 0.66.4 with an Android 11. So it is on the latest-
Robin Heinze:
And it's not fixed.
Mazen Chami:
... And it's not fixed yet.
Robin Heinze:
Hey React, maybe we'll be talking about the fix for that in React Native 0.68.
Mazen Chami:
Who knows.
Jon Major Condon:
Who knows.
Robin Heinze:
This is your opportunity folks.
Jon Major Condon:
Yeah.
Robin Heinze:
Awesome. Well I think that wraps it up for us today. A nice little short and sweet show for us today. If you'd like to nerd out more about React Native, check out Jamon's Twitch stream, rn.live or youtube.infinite.red. I think he streams on Mondays and Fridays, I believe. And he also tweets every time he goes live. Those streams are really fun.
Robin Heinze:
A lot of times even if he's just doing daily open source maintenance work, it's really fun to just go hang out with him. And he's been doing a great job with those streams. So go check those out. Mazen and Jon Major, where can people find you on Twitter?
Mazen Chami:
You can find me @mazenchami.
Jon Major Condon:
And @jonmajorc.
Robin Heinze:
And of course I'm @robin_heinze with an E at the end. And you can follow React Native Radio @reactnativeradio. As always thanks to our Producer and Editor, Todd Werth, our Assistant Editor and episode release Coordinator, Jed Bartausky, our Social Media Coordinator, Missy Warren, our Designer, Justin Huskey, and our Guest Coordinator, Derek Greenberg.
Robin Heinze:
Thanks to our sponsor, Infinite Red. Check us out at infinite.red/reactnative. And a special thanks to everyone listening today. Make sure to subscribe on all the major podcasting platforms. Just a reminder that we are hiring React Native engineers. So if you're a senior level React Native engineer located in the U.S. or Canada, go to careers.infinite.red. We will see you all next time.