Mazen and Jon Major quiz Jamon on his new library, react-native-colo-loco, which is a library that lets you colocate your native components with your JSX/TSX components.
Mazen and Jon Major quiz Jamon on his new library, react-native-colo-loco, which is a library that lets you colocate your native components with your JSX/TSX components.
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 nobody. Who writes enough urine tests? Nobody. Episode 221. React Native Colo Loco. Collocate your Native Modules with your JSX.
Jon Major Condon:
Before the show, Mazen and I were actually talking a little bit about some really... I found this fascinating. Some mentoring that you're doing, Mazen, but it's for code students, right?
Mazen Chami:
Correct.
Jon Major Condon:
In Gaza?
Mazen Chami:
Yeah. So there's a code academy out there called Gaza Sky Geeks, which I believe is sponsored by Google for Startups.
Jon Major Condon:
Oh, that's cool. And it's a really interesting thing because of the conflict that is inherent I guess, in that whole region. And I remember we were talking about it and I was just like, "Well, maybe you can do it in person sometime." You're like, "Eh".
Mazen Chami:
Yeah. Not possible from my….
Jon Major Condon:
Not because you're scared of it or anything, but literally you might not be allowed to.
Mazen Chami:
Correct. Yeah. And based on the blockade in Gaza too, it makes it a little bit hard for the students going through it, as they're looking to graduate and try and find jobs. Most of the time they have to go through remote opportunities.
Jon Major Condon:
Yeah. Totally. And I think your wife is Palestinian?
Mazen Chami:
Correct. And I'm Lebanese by origin.
Jon Major Condon:
You're Lebanese and that complicates things for that whole thing. And then also you're actually going to be teaching it in Arabic. Is that correct?
Mazen Chami:
Yes. This will be the first time I will be doing a technical talk of any sorts in Arabic. Now they do speak English, but majority of them only speak Arabic, so I have to stick to Arabic. And then-
Jon Major Condon:
Yeah. So how good's your Arabic?
Mazen Chami:
I'm fluent in it. I've just never had a technical talk in Arabic. So you wouldn't know how to talk about hooks and all that kind of stuff right in Arabic.
Jon Major Condon:
Right. Yeah. Well, so this is my American ignorance coming out here, but I would assume that you would just use the English words for things like hooks?
Mazen Chami:
Correct? Yeah. I'm also going to demo a React Native app. And I would still code in English because that's how they've been coding and that's what they've learned. I just think when it comes to explaining concepts, it would have to be done in Arabic rather than in English.
Jon Major Condon:
Right. Yeah. That's fascinating. And I assume, I guess for me, it's just really cool that they get a chance to have contact with what... To them is probably a very exciting opportunity, a software developer in the United States who's working on really cool stuff and has all this experience, but it's also cool for you because you get a chance to connect into that community which is pretty marginalized. So yeah, it's really cool, I don't know. To me that really stood out as something that I... I don't know. I guess, if I knew another language, I know a little Finnish, but I don't know much. And I know a tiny bit of German, but not much. But both of those communities are already pretty technically advanced. They probably don't need me to speak to them, and a lot of them speak English too.
Jon Major Condon:
So how did they find you?
Mazen Chami:
So I've been doing mentoring for a while now. And just recently there was an article, I believe it was in the New York times highlighting Gaza Sky Geeks as an organization. Because they did get this large funding from UNICEF recently. And when I saw that, it piqued my interest. I looked at their website and I saw that they were asking for mentors. And like I said, I've been mentoring for a couple years now at a local code school here in Durham. And I felt like this would probably be a more rewarding for me to do, especially with the whole Arabic aspect of it.
Mazen Chami:
So I reached out to them, they emailed me back within a day of sending that email and we set up a call and once they heard my background, the guy was like, "Actually hold on, you have React Native experience." I pulled the class out of the 25 cohorts members, 17 replied to his email if they'd be interested in a React Native course, and they were all like, "Yes. Let's have this tomorrow."
Jon Major Condon:
Wow.
Mazen Chami:
So he was like, "I want to bring you on as a mentor for a specific student, and then I also want you to give this crash course." So I'll be giving the crash course towards the end of the month.
Jon Major Condon:
That's awesome.
Jon Major Condon:
Well, you're going to have to let us know how that goes, because that's super cool.
Mazen Chami:
Yeah.
Jon Major Condon:
So I guess I should do intros. I'm Jon Major Condon, your host and friendly CTO of Infinite Red. And I'm joined today by my awe inspiring co-hosts Jon Major and Mazen. Jon Major Condon is a senior software engineer here at Infinite Red, lives in Janesville, Wisconsin, also editor in chief of the React Native newsletter. How's your Arabic, Jon Major?
Jon Major Condon:
It's getting there.
Mazen Chami:
No. It's not. Not at all.
Jon Major Condon:
All right. Fun fact, we actually have two people at Infinite Red who speak Arabic. Because Harris, who is another co-host sometimes on the podcast also speaks Arabic, which is pretty cool. I don't know if you two have talked at all, Mazen. Spoken in Arabic or anything, but I think that's neat.
Mazen Chami:
Yeah. We did once. And I've reached out to him about giving this talk in Arabic and see if he'd help me out.
Jon Major Condon:
Oh yeah. That's cool.
Mazen Chami:
Smart.
Jon Major Condon:
And that's of course, Mazen Chami, lives in Durham, North Carolina. Former pro soccer player and coach, and is a senior React Native engineer. Also here at Infinite Red and also a mentor, which is very cool. I like that. I of course have taught junior developers over the years and it's always super rewarding. This episode is sponsored by Infinite Red. We are a premier React Native design and development agency located fully remote in the US and Canada. If you're looking for React Native expertise for your next React Native project hit us up. You can learn more on our website, infinite.red/reactnative. And don't forget to mention that you heard about us through the React Native Radio podcast and also you can come work for us. We are hiring. So if you're a senior level React Native engineer located in the US or Canada, go to careers.infinite.red and fill out the form, looking forward to hearing from you.
Jon Major Condon:
All right. Let's get into our topic for today. So the title of the episode is React Native Colo Loco. Unless I change it, I guess before we publish. I think it's going to be React Native of Colo Loco. And so let's talk about this new package that I made.
Mazen Chami:
Yeah. I'll get it started here. I do like the name Colo Loco, maybe because every time I read it, I usually emphasize the Loco part. So Jamon, tell me a little bit more about the inspiration behind this package and what prompted you to create it. Because I know this is not the first one that you've done.
Jon Major Condon:
Yeah. And I guess it's funny, because I was just talking to Lizzie, one of our developers and telling her that I don't feel very creative these days. I don't feel like I come up with a lot of new ideas and whatnot. And literally the next week or actually no, it was the same week because we were at our offsite, our team retreat, and we were discussing building Native Modules. And I don't even remember who I was talking to, but I was like, wouldn't it be cool if you could just drop your Swift and Kotlin files right next to your JSX and TSX files. And React Native would pick up on those and link them in automatically, and you wouldn't have to really think about it. You just put in .swift, like mycomponent.swift and it just loads it up and you have it available in your JavaScript or your TypeScript. So that idea just led to me, starting to hack on it.
Jon Major Condon:
I get in these moods where I'm like, "This is a cool idea. I want to see if where it goes." And then I just start hacking on it, and if I see progress, then I get energized by that. And so my mind was just working on it the whole week. It was like, I had a background process just working on this and I actually made some progress there at the team retreat.
Mazen Chami:
As someone who was there, I was a witness to Jamon's wheels turning and the whole time we'd be having a conversation and Jamon just staring into the distance, thinking about what he could do next.
Jon Major Condon:
So true.
Jon Major Condon:
Well, cool. So I heard that you're doing this on your Twitch live stream, and for those who do not know, Jamon has a live stream on Twitch.
Jon Major Condon:
Yeah. You can go to rn.live and it'll go right to it. If you don't have Twitch by the way, you can go to youtube.infinite.red, and what do you call it, multicast it over to YouTube as well. And a lot of people do join via YouTube instead.
Jon Major Condon:
Nice. And so you mentioned that Copilot has a pretty big role in helping you here. So do you want to go through and talk about it more?
Jon Major Condon:
So GitHub Copilot is amazing and I don't talk about it very often, but it is honestly an incredible innovation. And I think that a lot of Twitter developers think it's just a toy. But I'm telling you right now, just as a secret to the 5,000 people who subscribe to this podcast, it's not a toy. It's a real serious tool. It's really cool. And in order to build this, I had to use several languages I haven't used in a while or haven't used at all. And not only that, but I was doing some funky stuff with it. And GitHub Copilot really made a difference. It allowed me to explore things. I don't know. Honestly I was able to do basically what I would call comment driven development, where I could write a comment and it would attempt to write the code and I could tweak it from there. It was so funny. At the end of the time together that we were working together on this in the team retreat, someone, I don't remember who, was it you, Mazen? Someone wrote on a sticky note, "Copilot's co-pilot." And put it on me. And another person put, "Press this tab to code." I think it's actually more accurate than I want to admit. It is amazing how much of this code that Copilot wrote.
Jon Major Condon:
This makes so much more sense now because when I was looking through the code, I saw so many comments more than usual when looking through Source Code. And I was going to say that it's a awesome thing that you did that because again, you don't see that that often.
Jon Major Condon:
Yeah. It's amazing because you just give it hints and it will pick up on those and go from there. I don't know. We could do a whole episode on GitHub Copilot I think, and it's amazing.
Mazen Chami:
So I know you said you used Copilot heavily in a new language that you hadn't used. What is Colo Loco written in?
Jon Major Condon:
So it's really three scripts. One is a Ruby Script, which I've done Ruby. I did Ruby for five years, so I know Ruby pretty well, but I also haven't done it for over six years. Not extensively, at least. And so that gets triggered in the pod file. So you basically drop in some coding into your pod file and when you run pod install, it will run the Ruby Script. And basically what it does, what the Ruby Script does, is it goes in, and it looks for any .h, .m, or .swift file. So that would be Objective-C or SWIFT files. And then it goes into your Xcode project file and adds those. It links those in. And what's really cool about Xcode project files is that they can link in Source Files from any location.
Jon Major Condon:
They don't have to be in a specific location. It's different for Android, but for Xcode, I could just simply add them. There's a RubyGem, which is like an npm module, but for Ruby that allows me to manipulate those. It's already included in CocoaPods, so I didn't have to add any new dependencies. And then essentially, you just run pod install and it will link up all of your Native files that are co-located. That's where the Colo Loco thing comes from. Co-located with your JavaScript JSX and TSX files. Now that was Ruby, but I also had to write a script for Android. And Android has Gradle, and Gradle is generally written in Groovy. Not Ruby, not Kotlin, it's Groovy.
Jon Major Condon:
Now, you can use Kotlin as well, but if you just spin up a new React Native app, it's going to have a Groovy Script. Now, I've never used Groovy before. So I actually leaned on GitHub Copilot quite a bit to give me hints on how to write this. It was sometimes wrong. It would actually put in Python code. The Ruby stuff, it was great at. I honestly barely wrote any of that. I just wrote comments and they would stuff. And it was amazing at Ruby. But on Groovy, it would basically drop in what it thought, and then I did a little bit of research and stuff. But on the Groovy one, now this is kind of interesting. There isn't a project file that you can add these Kotlin or Java files to. But what you do is we did essentially a hard link. So it's like a symlink, but it's a hard link.
Jon Major Condon:
To the file system, it's like the file. It looks like the file and dropping into the right position in the Android project and also modify a few files to instantiate these classes and make sure that they're available to you. So a little bit complicated, but like Jon Major said, it's very well commented if you go through those two scripts and you can see what's happening. They're not super long either. I mean, I don't know. I don't have it right in front of me, but they're like 100 lines of code each.
Mazen Chami:
Yeah. And first you mentioned there were three scripts. So I'm assuming the third one would be a set-up script of sorts.
Jon Major Condon:
Yeah.
Mazen Chami:
What was the function of that script?
Jon Major Condon:
So when I was writing out the documentation, I noticed that there was a lot of nitty gritty stuff you had to do and you had to drop in certain files in certain locations. And it just felt like it was getting in the way of the coolness of what Colo Loco could do for you. And so I was like, okay, I want it to be punchy. You get in there, you can just run a script and then you can just start working with your Kotlin files or your SWIFT files. So what happens is once you add React Native Colo Loco, you can just run npx install Colo Loco. And it will actually go in there and patch the right files for you and add everything in where it needs to be.
Jon Major Condon:
And it works surprisingly well, especially with an ignite project, or a vanilla React Native project. And that is actually written in JavaScript, it runs via Node. So you're just running npx, and I was in my element there because obviously I've been doing a lot of JavaScript the last six years.
Mazen Chami:
Cool. And you said it's available via npx. So I'm guessing this is now released. Is it version 0.99 or what?
Jon Major Condon:
Yeah. No. It's I actually did release the 1.0 in the last live stream. So I've been hacking on this for a couple weeks now and yeah, it seems to be working pretty well overall. I'm really curious to see how this affects things.
Mazen Chami:
Cool. How do you think this might change Native Modules in the future specifically? You mentioned this be in ignite.
Jon Major Condon:
And I guess for you guys, how often do you go in and write Native Modules right now?
Mazen Chami:
Not very often.
Jon Major Condon:
Pretty rare.
Mazen Chami:
Yeah. Very rare.
Jon Major Condon:
Yeah. And so part of that is that you don't necessarily need to, and that's great, but also part of it is because it's kind of a pain, so you generally avoid it.
Jon Major Condon:
Totally.
Mazen Chami:
Yeah. It's pretty cumbersome.
Jon Major Condon:
Right? You're having to dig deep into the Android folder structure, you got to make sure you instantiate things properly. You got to make sure that... You're always looking up documentation, you're deep in Stack Overflow. You're like, the documentation, isn't all that good. In fact, in a recent React Native radio episode, actually two of them, we talked about iOS and Android Native Modules. And it's just pretty cumbersome. So I'm really just trying to reduce I guess the friction to writing a Native Module. And it's not just Native Modules, there's also Native UI Components as well.
Jon Major Condon:
So you can create a view manager, which essentially instantiates a view, and then handles setting properties on that view. So you can do Native Components as well and just require Native Component and bring it in, and use it like a JSX React Component writing your code. So the idea here is make it easier, make it more simple. And then also since it's co-located, you can put the files right next to where they're used. Which is nice, because it's like, rather than, oh, hey, this JavaScript module or component or whatever requires this Native one, which by the way, is in two different places, somewhere else in your project, and deep inside the Android folder, deep inside that iOS folder. And it just makes things harder. Where if you can just have mycomponent.swift, mycomponent.kotlin, and mycomponent.tsx, right next to each other. You've got everything you need right there and you can just pull it in.
Jon Major Condon:
And it's kind of a cool idea. So my idea here and what I'm hoping to see how this changes, is that Native Module become a seamless part of writing React Native apps rather than a friction full part. If that's a word.
Mazen Chami:
Yeah. The linking aspect, usually is what deters me mainly, because you never know where you could go wrong. And most of the times I lean towards manual also just because they have more steps and you can make sure you didn't miss a step in order to get it working. But again, this just seems like it's taking a lot of that load off of the developer.
Jon Major Condon:
Yeah. Exactly. And I agree. I want to know what's happening there, but if you commit everything before you install Colo Loco and then just run it, you'll find out what it does. And it's pretty straightforward. It's not doing much.
Jon Major Condon:
Yeah. So after checking this out and seeing how easy it is going down this Colo Loco path, it seems like one would be Loco to not use this. So there has to be some got yous.
Jon Major Condon:
Yeah. Good question. So there are some got yous.
Jon Major Condon:
Okay.
Jon Major Condon:
One is, it is not available on Expo, of course. Now, that may change in the future because there are some cool Native integrations with Expo. And I actually think that... I don't know, I should probably talk with the Expo folks and tell them, "Hey, you should just integrate this by default. So you can build Expo apps with co-located Native Modules." I think they'd actually like it. But also it's not really set up for ... It's more set up for I guess I would say more one-off stuff. I think you could probably build some more complex Native logic and have more files and stuff like that. But it's really more set up for you're going to have a few files, not necessarily a whole thing.
Jon Major Condon:
It's also on the Android side, it's assuming you're building everything under your main package and not multiple packages and stuff like that. If you start getting pretty complicated, you probably still want to work within your Android folder. The other thing is it makes it really easy to not use Xcode and not use Android Studio. You never have to open them generally speaking, if you're using Colo Loco just out of the box. But Android Studio and Xcode do bring some things to the table. They're going to bring certain code completion and things like that.
Mazen Chami:
I was just going to say that. Working in VS Code, you have to know what you're typing, essentially. Whether it's Objective-C Java, Swift or Kotlin, because Xcode and Android Studio so give you the prompts auto-fill and all that kind of stuff. Now maybe there's a VS Code plug in out there that does that for you, I'm not familiar with it.
Jon Major Condon:
Right. GitHub Copilot.
Mazen Chami:
GitHub Copilot?
Jon Major Condon:
Oh, well that's part of it. Yeah.
Mazen Chami:
Exactly. Yeah.
Mazen Chami:
Yeah. If you don't have any of those and you're just a developer who wants to put together a text view or something of yours, or even just a regular like Jamon did in his example, you have to know what you're typing because you're not going to get the auto-fill that we're so used to with TypeScript and VS Code these days.
Jon Major Condon:
Yeah. So I think you can work through that. The other thing here is, you can still open Xcode and by the way, now it's right in your project. So Colo Loco may have linked it in, but now Xcode just treats it as any other file. And when you make a change to that file in Xcode, it will change in VS Code as well. You'll see the change in both sides. So you can have that open Android Studio the same way, because it's a hard link when you go in there and open the file, it changes in both your app folder next to your JSX, TSX and in the Android folder. Changes in both locations. So that definitely will... It means that it's not a real limitation, it's just something you need to be aware of.
Jon Major Condon:
Okay. So then when it comes to Android Studio and Xcode, what are some cases where you would open up those two? Like if I wanted to include an asset into one of those Native Modules, would I have to open up one of those two?
Jon Major Condon:
Yeah. That's a great point, Jon Major. And for now that's definitely what you would do. You would add it the normal way you'd add your assets the way you did before. It's possible, then in the future, we could add some helpers to just somehow pick up on, Hey, this image or other asset needs to be auto linked in automatically. And then that would be a cool idea. Not something on my radar right now, but if someone were to be using Colo Loco, and be like, "Hey, I really need this." I mean, I'd the help on it.
Jon Major Condon:
Awesome.
Mazen Chami:
Yeah. I'm going to go back to the whole documentation part and just be like, "Good job, Jamon on that." Very detailed.
Jon Major Condon:
Thank you.
Mazen Chami:
I went through it and it was pretty much just copy paste. Didn't run into any issues, it built for me and it said, "Hi, Jamon." So it was perfect. I even went further and changed it to a text view with props.
Jon Major Condon:
Oh.
Jon Major Condon:
Nice.
Mazen Chami:
And it worked seamlessly. Again, I didn't really have anything... It took just a couple minutes to make those changes. Again, I had done that in the past, so I had some code to refer to. And yeah. Didn't have to open up Xcode and Android Studio and wait for them to build the million times they do build and all that stuff. It was revolutionary, I think it. It was great. Thank you for the documentation. Please document stuff more, people.
Jon Major Condon:
Yes. Comment driven development. Copilot
Jon Major Condon:
Comment driven development. Yeah. And documentation too.
Jon Major Condon:
Yes.
Jon Major Condon:
On stream, I did spend a lot of time on documentation. And I also did some things like in... So here's an example. I didn't have to do this, but one of the things I do is I parse the files and I try to figure out what class name you are using within your Native Modules. And I match it up to your file name and make sure that you included the same file name as your class name. It's important for how we do things. So just a little and make sure I have a good error message when it doesn't happen. Just trying in even like the setup script, hopefully it does a good job. You can run it multiple times and it won't mess up your project.
Jon Major Condon:
If you already have things integrated manually, it will detect that and it won't try to make changes to it. I'm not saying it won't totally, it could totally screw some things up. But this thing is probably more manually tested than a lot of things I've put out in the past. But I do think that good documentation is super important even for something as simple as this. I tried to make it so that someone who maybe didn't know Native Module development or components could actually jump in here and actually make some progress in a way that made them feel good. And I also like to, where I can, make the documentation very accessible. So an example of this is it's all one page. You can just hit command F or control F and search the README and you'll find stuff in there.
Jon Major Condon:
So yeah, I really wanted it to... I guess I want this to do well. I want this library to do well, and I know one way to do that is to have a good experience for the developer when they get into it.
Jon Major Condon:
Well, as of right now there's 15 stars. So please go and star it.
Jon Major Condon:
I haven't? Now, by the time this comes out, I think that will have changed, I haven't actually promoted it much other than on my stream.
Jon Major Condon:
Oh yeah. That's right.
Jon Major Condon:
So I do have a blog post that I'm going to release, and I have a set up video that I'm going to release. I may do a promo video that goes on Twitter as well, and try to get the word out there about this. I think that once people try it out, if they have any need for Native Modules or components at all, I think they're going to find it quite interesting.
Jon Major Condon:
Agreed.
Mazen Chami:
Make it 17 stars. It just went up.
Jon Major Condon:
Nice.
Jon Major Condon:
Hey, there we go.
Mazen Chami:
That's awesome. Yeah. Thank you for also doing Kotlin and Swift. What were your thoughts about them?
Jon Major Condon:
Yeah. So that took actually a lot more work than I thought. And it was because it wasn't as straightforward to, I guess, find Swift examples for one thing. And also, how do you set things up that actually I went down a long rabbit hole before I figured that out. And Kotlin was a little bit similar as well, where there were... In fact, I got to thank you, Mazen, for your repo, which you have Dive into Native-
Mazen Chami:
Updated.
Jon Major Condon:
Updated. Yeah. So you're doing a blog post with Gant Laborde, and you're updating our examples that we had for Native integration to Swift and Kotlin. And I was able to go in there and get a lot of ideas out of your repo. And that actually was probably my best help out of everything. So honestly, that was really nice.
Jon Major Condon:
But one of the cool things is that I actually integrated it with ignite. I integrated Colo Loco by fault with ignite our boilerplate. And in the process of doing that, I upgraded ignite so that Kotlin and Swift are supported out of the box. So when you spin up a new non expo ignite app, it's going to come with Kotlin and Swift support right away. You don't have to think about it. And it comes with Colo Loco. So you can literally just drop in a .kt file into your structure, and next time you run on Android, it's going to be available through your Native Module's import or requireNativeComponent.
Jon Major Condon:
Good stuff. So is there any feature enhancements on the docket?
Jon Major Condon:
Honestly, right now, I'm just more worried about stability and making sure that it works the way that I would expect it to. And I want to see people use it in a real project and give me feedback. That's the main thing for right now. The idea that you had, Jon Major about linking assets, is a cool one. And that's something we could think about in the future. Although there may be some tooling out there already that does it, and we could combine the two. So that's the main thing, but for now, I'm considering it done other than bug fixes.
Jon Major Condon:
Awesome.
Mazen Chami:
But it also link in the show notes just a nine minute video. So that's how long it takes. Nine minute video that you did Jamon, showing how Colo Loco works in a project to create exactly what's in the README, essentially. So nine minutes from spinning up an app to adding in your .h and m, Files and your Java files and then building and seeing them come through. So be sure to check that out too.
Jon Major Condon:
Yeah. I think that's going to be something. If you go through that, watch that, I think you'll see the benefit of where Colo Loco will come in handy.
Jon Major Condon:
Cool. Well, that was a lot of fun and I'm looking forward to seeing what people think about that. Definitely tweet to me. If you try it out, let me know what you think about React Native Colo Loco. Today I think we have a weird bug, don't we? It's another [Mark 1 00:28:20] isn't it?
Mazen Chami:
Yeah.
Jon Major Condon:
I love the Mark 1s.
Jon Major Condon:
Mark 1s are the best. Mark Klicker, who's been on the program before, he posted a weird bug. And he says, "Have you ever had a text input where you're typing, and then you go to submit by pressing a button and the button doesn't fire. It's on press handler, but instead it just closes the keyboard?"
Jon Major Condon:
He says, this is likely happening because somewhere in the component hierarchy, there's a ScrollView around your components. ScrollViews are always the gesture handler's first responder, unless you tell it not to be, or that it should only be the first responder if the gesture event wasn't handled by one of its children. Then he mentions a property called keyboardshouldpersisttaps.
Mazen Chami:
That's a ScrollView property.
Jon Major Condon:
On the ScrollView, okay. And if you set it to handled, and remember, this has to be for any ScrollView. So if they're nested like two or three deep, you need to make sure they all have this.
Jon Major Condon:
So if I'm understanding this correctly, this is for when someone wants their keyboard to persist when there's a tap outside of their keyboard, when there's a ScrollView wrapped around components. Right?
Jon Major Condon:
I guess essentially, your button won't work how you want it to, unless your ScrollViews say, keyboardshouldpersisttaps. Otherwise the scroll view acts like... It basically intercepts the tap.
Jon Major Condon:
Right. Okay. Yep.
Mazen Chami:
And it will close your keyboard.
Jon Major Condon:
It'll close your keyboard, yeah. And you need your button to be the first responder. The first thing that reacts to the tap.
Mazen Chami:
And something Mark also mentions, if you have multiple ScrollViews, each one of these need to have this prop also for your button to happen.
Jon Major Condon:
Otherwise they hijack it.
Mazen Chami:
Yeah.
Jon Major Condon:
Right. It just bubbles up.
Jon Major Condon:
Yeah. And he just struggled with this for a while and thought he would let us all know about that. He also links to an article and says that, "It really helped me wrap my head around keyboardshouldpersisttaps in what each value actually does. And this is on codevscolor.com. We'll link to that in the show notes.
Mazen Chami:
This is another bug where I wonder how long it took him to, to figure it out. And now that he's got it similar to the one we had last time with the time.
Jon Major Condon:
Right? Yeah. No. I know. These ones... That's why I want to surface these weird bugs, so people know, they'll remember vaguely, like, "Hey, I remember hearing this on React Native Radio" and hopefully it saves people some time. Cool. Well, fun episode. Where can people find you Jon Major?
Jon Major Condon:
@Jon Major C.
Jon Major Condon:
Cool. And Mazen?
Mazen Chami:
@ Mazen Chami.
Jon Major Condon:
I'm Jamon Holmgrem, @ Jamon Holmgrem on all the different places. You can also tweet @reactnativerdio, @reactnativeR-D-I-O. A quick scheduling note, we will be off for some of the holidays. So you may not see some episodes come out during the holidays. We'll be back in 2022. We have some really cool guests lined up, including one from Facebook who's going to be talking about the new architecture. Looking forward to that one.
Jon Major Condon:
We have a bunch of other stuff. By the way, the new architecture may impact Colo Loco. We may end up doing Turbo Modules and stuff like that with Colo Loco. Currently not handling that yet. It's still on the bridge approach. But yeah, look for more content around that. As always thanks to our producer and editor, Todd Werth, our assistant editor and our episode release coordinator, Jed Bartausky, our social media coordinator, Missy Warren, our designer, Justin Huskey, and our guest coordinator, Derek Greenberg. Thanks to our sponsor, Infinite Red, check us out at infinite.red/reactnative and a special thanks to all of you for listening today. Make sure to subscribe on all the major podcasting platforms. Say that 10 times fast. React Native Radio is the name of this podcast. Reminder, we're hiring. Go to careers.infinite.red. We'll see you all next time.
Mazen Chami:
See you.
Jon Major Condon:
Bye-bye.