Jon Major, Mazen, and Jamon do an overview of what’s involved with building Android native components and hooking them up to the JavaScript side of React Native.
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 a squirrel holding three sticks, a carrot and a Britney Spears album. Episode 214, React Native Android Native Components.
Jamon Holmgren:
So, Mazen, I'm hearing a rumor that you got some new wheels. Is that true?
Mazen Chami:
Yes. Just the other day, I picked up, six months later, picked up a Tesla Model Y.
Jamon Holmgren:
So, you got a car attached to those wheels too then, is what I'm hearing?
Mazen Chami:
Yes.
Jamon Holmgren:
Okay. That's a pretty good deal.
Mazen Chami:
The wheels came first, and then six months later the body came.
Mazen Chami:
Pretty much.
Jamon Holmgren:
Now I'm waiting for the charger cable.
Jon Major Condon:
The charger cable, yeah. You got to flip it. Oh, no, it's not an apple car. If it was an apple car, you'd have to flip it over and plug it into. Yes.
Jamon Holmgren:
But yeah, no, that's cool. Have you, I'm sure you've driven it.
Mazen Chami:
Yeah. Yesterday was the first day I took it on the highway, and used the autopilot feature, which was pretty cool.
Jamon Holmgren:
Hm-mm.
Mazen Chami:
Really nice how we've come from no cruise control, to cruise control to adaptive cruise control to now, pretty much driving you without having your hands on the wheels.
Jamon Holmgren:
Right. Does it make you nervous at all, or you feel pretty secure?
Mazen Chami:
I felt pretty secure. There was a point when the lane actually ended, and it merged safely, there was a car, it slowed down, waited for the car to pass and kind of moved in.
Jamon Holmgren:
No way.
Mazen Chami:
So, that was pretty cool.
Jon Major Condon:
That sounds scary.
Mazen Chami:
Yeah.
Jamon Holmgren:
It does. I would've been, okay, I'm taking over.
Mazen Chami:
I mean, I did have my hand on the wheels the whole time.
Jamon Holmgren:
Right.
Mazen Chami:
But, you kind of, you get to see the wheel turning, and doing all that stuff.
Jamon Holmgren:
Yeah.
Mazen Chami:
I did feel safe when on a more steep turn, it did slow down, and make that turn. Not significantly, it dropped maybe like five miles per hour to make that turn, which I thought was pretty cool. But, I am interested to try it on a larger interstate. So, I-40 or 95, which are close to me, or 85.
Jamon Holmgren:
Yeah.
Mazen Chami:
And, see the, there's apparently a in beta, a auto lane change. So, that'll be interesting to see how that works in beta. So, shows you how much trust you might have in software right there.
Jon Major Condon:
Wow.
Jamon Holmgren:
I'm not using a beta software while driving.
Mazen Chami:
Yeah. It keeps getting better. Obviously, it's not there yet for fully self-driving and whatnot, but you give it a bunch of years, and I assume obviously there will be some setbacks along the way. It's just like airplanes, right? Airplanes were considered kind of unsafe at first, and over time they just worked at it really hard. Eventually got it there.
Jon Major Condon:
Yeah.
Mazen Chami:
And, you kind of have to have your hands on the wheel when using autopilot, or full self-driving if you have it. And, you're kind of required to just tilt the wheel a little bit, just to show that you're attentive, and you're actually present while you're driving. And, if you don't, it'll actually lock you out from using autopilot, and lane assist during that trip. You kind of have to get off the highway park, turn off the car, turn it back on, and then you have access to it again.
Jamon Holmgren:
Wow. It like punishes, you it's like, Hey...
Mazen Chami:
Yeah. It has like a, I think it's a...
Jamon Holmgren:
Don't make me pull this car over.
Mazen Chami:
Yeah. It's like a three strike system. If you don't use it, it'll actually put on your hazards and come to a full stop. You should check out the YouTube. Some people have done it, on an interstate. I would never do that.
Jon Major Condon:
Yeah. That's embarrassing.
Mazen Chami:
But had the car come to a full stop with their hazards on for...
Jon Major Condon:
Yeah.
Mazen Chami:
... Pretty much the car punishing them on the highway.
Jamon Holmgren:
Oh my! See, our robot overlords are already here, and unfortunately they're kind of right in this situation. So, we can't really argue, right?
Mazen Chami:
Yeah.
Jamon Holmgren:
Jon Major, do you have any auto related updates of your own?
Jon Major Condon:
I Got my license plates back, so there's definitely some progress happening on my side. My F-250 has been ordered. So...
Jamon Holmgren:
Wait what?
Jon Major Condon:
My F-250 has been ordered. So, I've stepped it up quite a bit from a F-150 to F-250.
Jamon Holmgren:
Didn't you just buy F-150?
Jon Major Condon:
I did, but the whole process of taking the truck back, led me to just ordering F-250, 2022. So, it's on order, and hopefully it should be here within, I'd say probably like the next month or so.
Jamon Holmgren:
Is that right? I had no idea.
Jon Major Condon:
Yeah.
Jamon Holmgren:
Wow. Everybody's getting new vehicles, except for me. This is a sign, I guess I need a new one. Well, that's pretty exciting, F-250, that's a lot of trucks, but you live in Wisconsin. So, the snow's coming, you're going to need the power.
Jon Major Condon:
Oh yeah. And, take it out back and rip it around.
Jamon Holmgren:
Sounds fun.
Jon Major Condon:
You just got to.
Jamon Holmgren:
Same tow package.
Jon Major Condon:
Oh, no bigger tow package.
Jamon Holmgren:
There you go.
Jon Major Condon:
Yeah.
Jamon Holmgren:
I guess I should do intros. I'm Jamon Holmgren your host and friendly CTO of Infinite Red. I'm joined by my splendid co-hosts Jon Major, and Mazen. Jon Major is a senior software engineer here at Infinite Red. He lives in Janesville, Wisconsin, and is also the editor in chief for The React Native newsletter. We have Mazen Chami, he is a senior software engineer, also former pro soccer player and coach. He lives in Durham, North Carolina. And, is also here at Infinite Red. We're going to talk about React Native here a little bit, and we're going to interrupt this automobile themed podcast to talk a little tech. Before we do that, this episode is sponsored by Infinite Red, Infinite Red is a premier react native design and development agency, located fully remote in the US and Canada. Including in rural areas where you need F-250s and Jeep Wranglers, and a few places you could use a Tesla.
Jamon Holmgren:
If you're looking for react native expertise with your next react native project, hit us up. You can learn more on our website, infinite.red/react native. And, don't forget to mention that you heard about us through The React Native radio podcast. Also, imagine working with us, obviously very cool people, all of us. I mean, wouldn't you say that Jon Major we're cool, right?
Jon Major Condon:
Oh yeah. Yeah.
Jamon Holmgren:
We're cool.
Jon Major Condon:
Yeah, definitely.
Jamon Holmgren:
If you're a senior level react native engineer located in the US or Canada, go to careers.infinite.red. All right. Let's get to our topic for today. We're going to talk about react native Android native components. So, this is kind of an interesting topic, and I actually just recently did a react native live stream on Twitch, where I implemented a react native, Android native component from scratch, totally from scratch in a brand new ignite app. You could do it with a non-ignite app as well. I just happened to using ignite.
Jamon Holmgren:
But, I spent actually two episodes on that because it was, there was actually, I don't know, I ran into a lot of problems with the documentation and stuff. So, I'm really interested to talk about this. I used to do native development. So, it's something that I guess is a little more near and dear to my heart. First thing I want to ask is, why you would want to build a native component? I have my answers for that, but sort of, I guess I'll ask Mazen to start with, why do you think someone would even want to, I mean, isn't the whole point of react native to use JavaScript, and not have to drop into Java or anything else?
Mazen Chami:
Nowadays there's a lot of different libraries out there that accomplish the native side of things. But, if there's something that you can't find out there and you might need to dive in, whether it's improving performance of a certain library, or building your own library. I know that's, there's the conversation between components and modules here, but essentially you'd have to create a component at the end of the day. So, if you have to dive in, then you have to kind of go in, and understand native code and build something specific for your project, I feel like most of the time.
Jon Major Condon:
And, also to mention that sometimes modules go out of dates, maintainers drop off. So, someone has to take the wheel and either update it as time goes on. And, then as you said, improve the performance and so forth.
Mazen Chami:
Yeah. And, I have a good example of that. I was working on a project that required a react native health kit integration. And, for example, there were a couple PRs that weren't merged in. So, I pretty much fork that project, went into native code, did the changes that I had to do, made sure that, the "API to the front end" from the module, and the component were all set. That way I could then access to the specific piece, it was work outs I believe. So, that was a certain example.
Jamon Holmgren:
So, let's take a moment and actually talk about what the difference is between a native, an Android native module, versus Android native component. What's the difference between the two?
Mazen Chami:
I know component is pretty much, if you were think of it as like a web view where potentially props are being passed in, to display a name or a specific piece of text. So, and the one that really comes to mind, and I think we'll touch on this later is, just a simple web view that has a text view that says, welcome prop, prop.name, prop.title, whatever that is. And, then on the JS side, once you link to it you can kind of have welcome friends, welcome happy people, whatever the case is.
Jamon Holmgren:
Yeah.
Mazen Chami:
And, as far as a module goes, how would, probably say this is when you're kind of linking into native, actual native code. Whether it's health kit related, or background specific items. Whatever it is that you would have to pull from say, permissions that require permissions, you could kind of go down that route.
Jon Major Condon:
And, then when you say linking into native code, I would also assume then that would be exposing that native code to the Javas upside as well.
Mazen Chami:
Correct.
Jon Major Condon:
Right?
Mazen Chami:
Via the term bridge, you would have to have a react native bridge.
Jamon Holmgren:
I just think of it as like a component as basically like a react component, but on the native side, and it would be exposed by a react component. And, then a module, yeah, like Mazen said, is more kind of your non component functionality. So, it might be an SDK that you need to call, and have it do something or whatever. They definitely go hand in hand, and there are lot of things that are very similar between the two. So, learning them both is good idea, but it is good to kind of know the difference between what a module is, and what a component is.
Jon Major Condon:
So, Jamon, how important would you say, as a season react developer, is it to know react or not to know react native, but to know native code?
Jamon Holmgren:
To know native code, well, I'm going to turn that around on you. You've been working with us, Jon Major for, I don't know, something like nine months. And, in that time you've been doing nothing but react native, the whole time. So, how often have you had to drop down in all of your projects that you've worked on in this time into native code?
Jon Major Condon:
Just very recently, I'd say. And, that's just reading native code.
Jamon Holmgren:
Yeah. You haven't written any, and you've read some just recently.
Jon Major Condon:
Correct.
Jamon Holmgren:
So, I think that answers a lot of it. Mazen, how about you, you mentioned you did do that more recently.
Mazen Chami:
Yeah, twice. Once for the health kit package that I mentioned, and another time to set up actually a blog, which we'll discuss later.
Jamon Holmgren:
Yeah. And, so for me, it's, I don't code every day on client projects, so it's not quite as relevant, but I do think that you can have a pretty solid impact on a react native team without ever touching native code. Now, knowing native code gives you another dimension to what you're doing. It's sort of like a backend developer knowing Ruby and Rails, but not knowing SQL. Well, if you know SQL, then you can add another dimension to what you do. And, you can, start building integrations with databases and stuff. That's kind of how I see it.
Mazen Chami:
Building on that question, Jamon, do you think you can have a seasoned senior react native developer never, who has never gone into native code?
Jamon Holmgren:
I think it'd be pretty rare although, actually in the early days, I don't think it was possible at all. I think now it's being, it's a little more possible, because you can specialize in other things like, there are other pieces. But, ultimately at the end of the day, I do think that it is part of the toolkit of a senior react native developer. It's something that you should probably learn. It's not that bad. I mean, honestly, you could go watch me work on it on Twitch. And, kind of what, actually I put it up on our YouTube channel, too. You can just watch those, we'll put in the show notes, but you can watch those episodes. It's like, I don't know, four hours-ish, which it sounds like a lot, right? But, you're going to watch me go through this whole process. And, at the end of it, you're not going to be as like intimidated by this. It, it really won't be as intimidating.
Jamon Holmgren:
And, I have one for iOS as well, which we're going to do an iOS episode, of this podcast. So, to answer your question, I do think it is a piece of that. It is something that as you get deeper into it, but that's okay, you can be a senior level, I mean Jon Major's a senior level developer, so is Mazen. They're not necessarily in this all the time. And, that's okay, they're able to do their jobs, they're doing great, the clients are happy. It's really more about expanding your tool kit.
Jamon Holmgren:
So, I think Jon Major, you mentioned that you could find an outdated library, and then go in there and update it. I think that's actually a pretty big, that will happen. Especially as, libraries start aging out a little bit here and there, and being able to do that. For me, that's been the primary place where I have done native code, because I have been one of the maintainers, and I was the original extractor of react-native-webview. And, so because of that, I needed to really get into the native part of it, and the bridge and whatnot. So, there were pieces there, open source maintainers obviously are in a little different area. But, if you want to contribute to react-native-webview, you're going to need to know some of that stuff.
Mazen Chami:
Yeah. And, just kind of adding on to all this, you mentioned Jamon at the beginning, you almost as a react native developer at the beginning, you couldn't not know native code. Now, with the vast number of different packages that we have out there, that do the native part for you. It's almost easier to not have to jump into native code as much these days, but yes, like you said, always good to have that in your toolkit. Just kind of adds that extra level of understanding of what's happening under the hood.
Jamon Holmgren:
And, let's be honest, if you want to look really smart, then you can just be, ah, I'm just going to build it in native. All right. Java versus... I'm going to have to work a little harder, I think Robin, laughs a little easier at my jokes than these guys do. But, Java versus Kotlin, let's talk about that. So, I've only worked with Java. I have done very little with Kotlin, and I've done none in conjunction with react native itself. Now, Mazen, you recently actually did some work with Kotlin. So, let's, well first off let's talk about that, Java was the original language that, of course Android uses internally, and react native is written in Java.
Jamon Holmgren:
The react native Android is written a Java. If you want to drop down into react native Android native code, you're going to start with Java. But, there is a new language called Kotlin, which Google has adopted, looks very similar to Swift. It's a modern language, it has lots of modern features, it's a very cool language. And, it would actually replace Java, and you can actually code in it instead of Java. So, Mazen, you've done some work in it recently, sort of, what did you end up doing and what were your impressions?
Mazen Chami:
I felt like Kotlin was a little bit cleaner. I think a lot of the, for example, auto fill, I don't remember that being available as heavily in Java, specific Android studio. I think Kotlin did a better job of that. That might also be with the introduction of vs code and type script, kind of filling out things. And, we'll talk about it later with swift.
Mazen Chami:
In addition to all that, I also felt when you're typing things, there was less, what's the word I'm looking for... In Java you always did a lot of prep for your functions. So, for example, if you're going to write a sample function, you'd have to do at override, protected, function name, return, string. Now, it's just override fun, fun which fun I guess function, the function name, and then it's return type, and then you just kind of return it. So, it's much closer to type script I would say, obviously with a little bit of the syntax differences, but a little bit closer to the way we do things in type script.
Jamon Holmgren:
Yeah. And, that's sort of been my impression when I've looked at it in the past as well, that it's a very clean, nice modern language in a lot of ways. So, would you say it's a better language than Java?
Mazen Chami:
In my opinion, yes. I think it's probably also easier to learn for newbies, than having to go through Javas. But, I think Java's very, has a high bar of learning at first, as far as kind of these languages go. I think Kotlin's cleaner, and easier to read. So, and like I said, similar to type scripts, so it makes it very easy to kind of just read it, if you are coming in fresh.
Jamon Holmgren:
And, my last question though, this one's where the rubber meets the road, is it better for react native?
Mazen Chami:
That's a great question. I think react native right now only ships with Java. So, transitioning your project to Kotlin, which is what I did in this block post that's coming out soon. Is it worth it? I would say, not necessarily. At the end of the day, if you were to create either an ignite project or react native app, and you were to go dive into your actual native code, and convert it to Kotlin, all you're really doing is just kind of adding in the Kotlin layer on top.
Mazen Chami:
So, I do believe it's still Java under the hood, at the end of the day. So, performance-wise, I don't think you'll see that big of a dip in performance, but it's going to add that extra time, and effort to get you there. So, if you don't, if you're not going to be diving into the native code, as often, I would say it's not necessarily worth it to do the conversion. I do think maybe, create, what is it create react native app that could probably give you a flag to say whether you want it in Kotlin versus Java.
Jon Major Condon:
And, now if you are a Kotlin developer, most definitely, then I'd say convert it to Kotlin. Best choice for anything in my opinion is to use what you know. So, be that Java, Kotlin what have you, use what you know.
Mazen Chami:
Totally.
Jamon Holmgren:
That's a great point. I think you're right, and really my, I guess my approach to it has been, Java's fine. It's not as good, but it's fine. And, the fact that you don't have to set up a different, build pipeline and whatnot, means that you're going to have less trouble, just kind of stick with what's standard. But, I do agree with Jon Major that, when you know the language, Kotlin, do it. Yeah, just go ahead and set that up and go forward from there. It would be kind of interesting to do the work to set up ignites boiler plate with Kotlin, maybe the next version of it. So, that's not an issue, as soon as you drop in, you're already in Kotlin, you just start using it. And, if all of that stuff's already set up, then there's just no problem, you don't have to think about it. There's not that extra hurdle, but from what I understand, Mazen, it was actually quite an effort on your end.
Mazen Chami:
Yeah. It did take me a lot of time. Now, there isn't a lot of documentation out there for it. So, a lot of it was trial and error, being that I'm not a Kotlin specific developer. I've read it kind of like Jon Major mentioned, because we're working on that same project. So, I had that understanding of kind of diving into it, and reading it. So, it was a tough undertaking, I would say to convert just a simple create react native app, to Android took me just over half a day. It was, let's say just for a conversation, I started 09:00 AM, I was done with it by two-ish.
Jamon Holmgren:
Yeah.
Jon Major Condon:
Just a quick aside, how nice were the Kotlin docs?
Mazen Chami:
They were better than Java from what I've seen, just being able to compare them online, because that's kind of where I was for the most part. But, what was actually very good. And, Jamon I'm interested... Sorry I didn't watch your Twitch stream, but I do remember Android studio giving you a lot of help, with as you're typing, and you can kind of hover over it and it'll give you direct pipeline into the documentation of that. What's it called activity per se?
Jamon Holmgren:
Yeah, it was really good. I was actually pretty impressed with the Android studio overall, and it gave me a lot of help as I went through it. There were a few situations where I got really confused, where things were not showing up and stuff, but that was because I would forget to import things, and whatnot. And, generally speaking I could do things like auto import stuff, and whatnot. Yeah, at the end of the day, Android studio was quite helpful. I think it has pretty solid Kotlin support too though.
Mazen Chami:
Yeah. The documentation pretty much showed up on the right side bar, whenever I click for it.
Jamon Holmgren:
Nice. Yeah.
Mazen Chami:
So, you pretty much, nowadays we talk about having the hundreds of tabs open with stack overflow...
Jamon Holmgren:
Yeah.
Mazen Chami:
... And all that kind of stuff. I felt like I didn't have to leave Android studio. Now, I did leave to kind of do like the deeper digging on, how do you do...
Jamon Holmgren:
Right.
Mazen Chami:
... X, Y, Z, just because that wasn't my familiarity. But, as far as documentation goes, it was all just kind of isolated in that one spot, which was really nice.
Jamon Holmgren:
So, I have of course have an old timey story, or just point, I'll keep it very-short, but one of the things when I was learning to code, when I was a teenager, I used Qbasic. And, of course there was no such thing as the internet in the 90, well there was the internet, we didn't have it though where I lived, and Qbasic was the editor. What was kind of cool is, you could highlight a word and then hit F1, and it would just immediately the keyword, it would pop open the, what they called online help, back then. It was not online, but they just called it online, because it was available right there. And, they had extensive documentation, examples everything in there. So, I learned all through my editor. I had no external books, websites, any of that. It was all through the editor. And, so for me, that was like the way to learn back then. And, all these kids with their stack overflow these days... But, yeah let's move on.
Mazen Chami:
Stack over flow is the best.
Jon Major Condon:
Oh yeah. Can't live without it. I have a question for both of you, what about fabric and turbo modules?
Jamon Holmgren:
Yeah. So, those, that's a great question Jon Major. I think that, one of the big things there is, this is, they are supposed to help replace a lot of this. And, you'll be programming in C++, instead of the other native code. And, it replaces the bridge, which is a big deal. We're going to be talking about those in the future episode for sure. And, I can't wait to get into it, because that's going to be a really fun topic.
Jamon Holmgren:
But, one thing that's cool is, all of the stuff in this episode should still apply even after the new architecture comes out. Because, it should be backwards compatible from what I understand. Otherwise, it would invalidate all of these third party libraries that have already been built, and nobody wants to rebuild in C++. So, I guess the next thing we should talk about is, what's involved in, let's say you want to build an Android native component. What does it even feel like? What are we, what are you doing, when you do this? Are you in vs code? We talked about Android studio, what language are you writing in? How much JavaScript is involved? What about all of that?
Mazen Chami:
Yeah. So, you definitely need Android studio. It would also depend on, there's a lot of environment specific things, so like Gradle, and current SDK that you're on. I know infinite red has a very good setting up of your environment, which is good to follow. And, I feel like I follow that every single time I'm setting up my environment. You also need to have an understanding, at least of how to write the native code.
Mazen Chami:
So, whether it's Java or Kotlin, so mainly Java at this point, if you're not converting your project. You need to also probably have the documentation available easily, for you to take a look at that.
Jamon Holmgren:
Yeah.
Mazen Chami:
And, just another thing too, react native documentation does have a link to how to do native modules, and, or components, I'm not a hundred percent sure. It is very hard, it's very slim, I guess I would say. So, probably not the source to go through, but you can kind of have a basic understanding at that point.
Jamon Holmgren:
Yeah. And, of course, we talked about, you'll probably be writing Java code and you're probably, or you may be writing Kotlin, but most likely Java. Yeah, and the documentation for setting up an Android native component is actually pretty poor. And, it was something that I really ran into a lot of problems with during my stream. I did let Rachel [inaudible 00:24:46], who's in charge of documentation at Facebook. And, we actually did a, an episode with Rachel about her, documentation efforts on both react and react native, and that's episode 178. So, that's something we'll also link to in the show notes. But, the big thing there is, it was really painful because of the documentation has not yet been updated. She mentioned that they do intend to work on that.
Jamon Holmgren:
So, that was one thing, there is a lot of help out there. You can look through a lot of blog posts and whatnot. And, like I said, my stream, I think the reason I keep mentioning it, is because I had to do it. So, I had to go through all of the steps, and find the dead ends and everything for you. You do need patience, you need determination, some grit, some finished [inaudible 00:25:42], as I like to say. It's something that is not necessarily super straightforward, but you can get there. You can definitely get there. And, I do feel like once you're set up, it's not that bad. And, I probably could do it much, much faster the second time around, because I know the steps. And, then adding a second, component's not a big deal at all. But, generally what you're doing is, you're building a view manager, and the view manager is going to provide a view, and you're actually going to create programmatically an Android view. And you can assign properties to it. You probably would not assign layout or colors and stuff, at least background color.
Jamon Holmgren:
Because those are going to be assigned by react native, once it's used in your actual react native views. But, you can do other things, and it doesn't have to be just a bare view. You can do things like add a web view, anything that inherits from view, you can add. So, I was building an image view, and the image view I could actually set the image itself, I could actually download like a remote image and set it. I even set up event handlers for clicks or taps. And, then I did some animations. This is all in native. And, then what I exposed to the front end was just a basic component, Bowser image was what I called it, because it was an image of Bowser. And, I dropped it into my react native JSX and it just showed up.
Jamon Holmgren:
And, of course I had to style it in terms of the layout, make sure that I had it the right size, and stuff. But, it behaved like any other view. And, when I clicked on it, it would do the animation. It would also, I set up like the event emitter to JavaScript, too. So, I could actually tell it, hey, go JavaScript that this happened. And, then that goes over the bridge, which Mazen mentioned, and arrives in your JavaScript. And, now you've got an on click, or an on press handler and you can do whatever you want on the JavaScript side. So, there were some things to kind of wire it up between the two, but in the, at the end of the day, you're just programming in Java and your programming JavaScript. And, then once in a while you have to send information back and forth.
Mazen Chami:
That description you gave there was great, Jamon. And, I think understanding that little piece right there of, you're pretty much building something that you could do in react native at the end of the day. But, understanding that kind of gives you that extra tool in your arsenal because, you do have that capability to go in, and manipulate that view. Whether you want the view to have specific style constraints, you could still pass in styles to it, if you wanted to. But, have it be like a tool tip, or whatever the case may be, you can kind of always jump in there and do that for yourself. And, I think at the end of the day, I remember when I finished the deep dive for the blog, I just remember being really excited, and kind of jumping around, pumping my fists.
Jamon Holmgren:
Yeah. It really does give you a real sense of accomplishment. The moment when it started working, and I could click on it and the image would fade and spin and do things like that all in native, I was so pumped. It was just fun. And, by the way I'll add a link also to the repo, that I made. And, you can look through all of our, all of my commits as I was working on this. And, kind of see what it's all about. But, I mean, the feeling of accomplishment there, and then once you have that rolling, doesn't feel that hard to then be, I need to add a drop shadow to this, but I want to do it, not in react native, I want to do it in native.
Jamon Holmgren:
And, you just Google it, you look like on stacked overflow, just like you would Java programmatic, Android, I use the word programmatic, well I do that more on the iOS side because, there's more kind of drag and drop tools. So, anyway, if you say Java-Android drop shadow, you're going to find code that you can more or less copy and paste. And, drop it in there, and it does the thing. But, going back to these view managers, just to give, I know it's hard to kind of talk about code on a podcast, but we're, I'm going to give it a little bit of a shot here... I created a file, and one of the things that stands out when you're doing Android native code is, how deep their view hierarchies are? I mean, their folder hierarchies are?
Jamon Holmgren:
You've got Android, these are all folders, okay? Android app source, main Java com native integration was, which was the name of my app. And, then finally, and I could have added more folders if I wanted to, but finally react Bowser manager.java. And, then in there we have a bunch of imports, and then there's a class. So, think of class components, if you view, worked with class components in react, kind of similar public class react Bowser manager extends simple view manager. Simple view manager is something that's provided by react native. And, it allows you to basically build these view managers. And, then inside of that class, I have, there's a string that you have to give it to identify it to react natives JavaScript side. So, you just provide this string and in classic Java fashion, you've got all these words in front of it.
Jamon Holmgren:
Public, static, final, string is sort of saying const. Public, static, final string, it actually means more than that obviously. But, and then it's react underscore class, and then you tell it what it is. Usually by convention you put like RCT in front of it or something, RCT Bowser view, is what I did. And, then you have a method called create view instance, which allows you to just create a new view, and then return it. And, so I did some other setup there, like set on touch listener was for example, was one of the things I did. But, at the end of the method, you're just returning the view. And, that view is then taken by, it's taken over by react native, and then manipulated using the style attributes and whatnot.
Jamon Holmgren:
And, then I have a few other things, but that's pretty much all you need, you could just do that, and return some view, and then you're good to go. There are a few other things you need to do, including you create package for your app, which in this case the app is called native integration. It could be my app, pizza app, Jamon's app, whatever .pack or package.java. And, then from there you do need to return all of the view managers that you've created. So, if you have any view managers, you have to register them there, create them new react Browser manager, and then return that. So, that's pretty short. You can actually look at it in my example, repo and see what I did. It's 27 lines of code for that file. And, most of it's just imports, so pretty straightforward in the end.
Mazen Chami:
Yeah. And, then from the react native end of things, now that you have all that set up on Android, you'll just need to create a file. That's how you like to do it. For example, like you said, Bowserimage.tsx, for example, and you're using from, function from react native called require native component. And, it's a function that takes a string, and the string matches whatever your native view manager was, that was created. That way you can now...
Jamon Holmgren:
Yeah.
Mazen Chami:
... Import Bowserimagenative.tsx, and pass in the props that you need anywhere in your app, essentially. So, that's how you're kind of linking, you're having JavaScript understand where this view manager is coming from, so that you can then use it as you would a text, a button, or any other component in your app.
Jon Major Condon:
So, I'm hearing a lot of about code, and for someone who is very brand new to native modules and Android, what are some tools that can help someone like me also feel accomplished like you two?
Jamon Holmgren:
No, that's a great question. And, you certainly can do it manually like I did, and, like Mazen did. And, I do recommend doing it just for the experience, but there are some tools that will help you do this kind of in a more, they'll kind of walk you through it, to be honest. I have not used any of these tools yet, I do plan to do it on some future streams on react native live, but one is called create react native module. This will create either a module or component, both on iOS and Android, has a single command. And, then it walks, it's like a walkthrough. It's like a wizard, it'll ask you in the terminal, how to, what you want? And, it has many questions.
Jamon Holmgren:
There's also react native module in it. I don't know exactly the difference between the two. I believe that one is more opinionated than the other. You're going to have to look at both of them to see what they're about, and I'll know more about it later when I've had a chance to try them out. There's also one from, and by the way, that was by a developer named, let's see, he goes by Brody Bits, let me see if I can Chris Brody. So, his name is Chris Brody and he put that out there, and it's pretty solid. Also, our friends at Callstack, put out one called react native builder Bob, which is kind of a cool name, builder Bob. I don't know why they chose that name.
Jon Major Condon:
Well...
Jamon Holmgren:
But...
Jon Major Condon:
... I'm guessing because of Bob the builder, but...
Jamon Holmgren:
Bob the builder, right.
Jon Major Condon:
Also, the fact that they probably couldn't do Bob the builder. So, they settled on builder Bob.
Jamon Holmgren:
Builder Bob, essentially, you can scaffold your react native libraries, and that includes native code. So, it's quite opinionated, it's, this is how you should do it. And, I haven't used it either, so I don't know exactly, but it looks good. And, it's well supported, all the things from Callstack are, so definitely check that one out as well as a potential way to get you set up. Now, it's not going to write your native code for you, but it'll get you set up, get ready, and then you can drop in there, and do your thing. One thing that I should mention is that it supports Kotlin, so you can configure your project to use Kotlin right off the bat.
Jon Major Condon:
Right. So, someone who's listening, I'm sure, just like me feels motivated now to go and create a native module and Android. What are some good places to learn, or learn from?
Jamon Holmgren:
Yeah. So, I would not recommend at this time the official documentation, normally that's where I would start. You can go look at it for sure, but there's some missing stuff and it may confuse you a little more than, than it doesn't. So, I would recommend checking out, and we'll put in the show notes links to my react native live broadcast. There's a part one part two, you can go look at them, watch it in high speed if you want, or whatever skip through. You can definitely look at that. And, then Mazen and Gant Laborde, are working on a react native versus native blog, that will have a lot of this stuff built in. So, Mazen you want to talk about that?
Mazen Chami:
Yeah. So, in this one we talk about building your, creating a project, react native project in Kotlin and Swift. Pretty much just a simple web view that says "welcome" in whatever name you pass into it. If you don't pass a name, it'll just say welcome on the screen. And, I know Gant and Mark, did put another blog out, before called react native versus native. That does Java versus objective C. So, you can look at that blog right now, if you want to stay in Java and objective C, but stay tuned on Twitter for part two.
Jamon Holmgren:
Perfect. And, that, and Mark of course, is Mark Ricker. He's been on the show before another developer at Infinite Red. All right, well, let's wrap up. Where can people find you Jon Major.
Jon Major Condon:
At Jon Major C, basically everywhere.
Jamon Holmgren:
And Mazen?
Mazen Chami:
At Mazen Chami.
Jamon Holmgren:
And, I'm at Jamon Holmgren, and you can find react native radio at react native R D I O. As always thanks to our producer and editor, Jo, blah, blah. I don't know who I was going to say.
Jon Major Condon:
I think you going to say...
Jamon Holmgren:
Jon?
Jon Major Condon:
Yeah, I'm pretty sure it is me, you're welcome.
Jamon Holmgren:
Jon does all the things. As always thanks to our producer and editor, Todd Worth, our assistant editor and episode release coordinator, Ted, Ted!
Jon Major Condon:
Do we have a Ted?
Mazen Chami:
No.
Jon Major Condon:
No.
Mazen Chami:
No Ted.
Jamon Holmgren:
What the heck?
Jon Major Condon:
Ted Lasso, that's a good TV show.
Mazen Chami:
Have you been watching a lot of Ted Lasso.
Jamon Holmgren:
Oh, Ted Lasso, Ted Lasso is our...
Jon Major Condon:
Oh my goodness.
Jamon Holmgren:
... Assistant editor. I haven't watched don't, no spoilers.
Jon Major Condon:
All right.
Jamon Holmgren:
As always, thanks to our producer and editor, Todd Worth our assistant editor and episode release coordinator Jed Bartausky, our social media coordinator, Missy Warren, and our designer, Justin Husky. Thanks to our sponsor, Infinite Red, check us out infinite.red/react native. Special thanks to all of you listening today, and make sure that to.... Tip, tip, two.
Mazen Chami:
We definitely need that takes.
Jon Major Condon:
Oh, that was great.
Jamon Holmgren:
A special thanks to all of you listening today. Make sure to subscribe. I can't do this. I can't do this. Subscribe. Okay. I'm I'm doing the whole thing over.
Jon Major Condon:
All right. I think we need to interrupt, Robin's leave of absence, and bring her back.
Jamon Holmgren:
A special thanks to all of you listening today. Make sure to subscribe on all the major podcasting platforms we're just known as react native radio. Reminder we're hiring careers.infinite.red, and we will see you all next time.
Jon Major Condon:
See you.
Mazen Chami:
Bye.