Todd Werth:

Welcome back to React Native Radio Podcast brought you by exploring Dora. Follow Dora around the world learning JavaScript Episode 3 22 Building React Native Libraries with Builder. Bob,

Robin Heinze:

Welcome back to React Native Radio. I'm Robin Jamon is out today. So I'm your lovely host and I'm joined by my lovely cohost Mazen.

Mazen Chami:

Hello.

Robin Heinze:

We also have a guest with us today, Burak Güner who will introduce himself.

Burak Güner:

Hello. So yeah, my name is Burak. I'm working at Callstack as a senior software developer. I maintain a library called React Native Builder Bob and another one called Create React Native Library, which is in the same repo.

Robin Heinze:

That's awesome. We are so excited to have you here today. Like you mentioned, we are talking about React Native Builder Bob, but also create React native library,

Robin Heinze:

Which Burak helps maintain. But before we get into that topic, I have to mention our lovely sponsor, infinite Red. Infinite Red is a Premier React native consultancy located fully remote in the us. We're a team of 30 senior plus level React native developers and support staff and have been doing this for nearly a decade. If you're looking for React native expertise for your next project, hit us up at Infinite Red slash Radio and don't forget to mention that you heard about us through the React Native Radio podcast. Let's get into it. So create React native Library and React Native builder Bobb. I'm guessing a lot of our listeners are app developers and not necessarily library authors. So give us your elevator pitch for create React native library and React native builder. What are they? Why do you use them?

Burak Güner:

Okay, so for app developer, good for you because you don't have to deal with a lot of stuff that you

Robin Heinze:

Have to. So you're saying that was a good life choice?

Burak Güner:

Yeah, definitely. So let's start talking about the builder Bobb stuff first. So it's 2025. You have JavaScript, a interpreted language, and you have to trans pilot down to more JavaScript, which is the same interpreted language, but at least you got Bob that you can use to help with building you the library. So if you're not familiar with building your JavaScript code, you kind of have to ship a common JS bindings, you have to ship ES modules and some TypeScript declarations for everything to work properly and Bob handles that for you by simplifying the config and the build process. Bob does not handle publishing for you, it just handles the building.

Robin Heinze:

Hence the name builder Bob, which by the way, do you know if it was actually named after Bob the builder?

Mazen Chami:

Definitely. Yeah.

Robin Heinze:

Okay. I feel

Mazen Chami:

Like you've been itching to ask that question. I think Robin,

Robin Heinze:

I have because that's what everyone thinks that I love it. That was actually,

Mazen Chami:

And Google doesn't help every time you type builder Bob. Bob the builder comes up.

Robin Heinze:

Sorry, you have to say React native builder

Mazen Chami:

Bob. Yeah, I'm sorry

Burak Güner:

For that.

Robin Heinze:

That's funny. I love it. You did not get the licensing rights to actually use the image of Bob the builder.

Burak Güner:

Yeah, let's not mention this a lot.

Robin Heinze:

That would be epic if you could anyway.

Burak Güner:

Exactly.

Robin Heinze:

So that's builder Bob.

Burak Güner:

So builder Bob Repo is a monorepo for those who are not familiar with the monorepo is it's basically a single git repo, which has multiple packages that we maintain. The other package we maintain is called Create React native library, and it creates React native libraries for you suggested by the name.

Robin Heinze:

Makes sense?

Burak Güner:

It

Robin Heinze:

Does. Very good name.

Burak Güner:

Yeah. Creating React native libraries from scratch is kind of hard. It's actually like creating a React native app from scratch. You would never create any folder called MPM in it to generate an empty package that J file and then fill the name at some dependencies. Now you would probably use something like Expo, I think if it was create Expo app or the community CLI one to generate the application and the Create Vector library helps you just do the same thing with a library instead of an app. And there are plenty of options that you can choose from. You can create a JavaScript only library for React native applications. Also, you can ship them to Web as well, but yeah, they're going to be React native only, JavaScript only. They're not going to have any native code at all. But at the same time, the most power comes with the React native libraries comes from the native code itself. So you can actually use the platform APIs like the camera, API, I dunno, something like the file system. You are able to use them through some native code and create reactive library helps you create a native library as well. You can create a c plus plus library. You can create a objective C plus Lin library, and we are also bringing support from Nitro modules. So soon you will be Oh nice. So soon you'll be able to create a Nitro module library with create library.

Mazen Chami:

Okay. So it is new architecture compatible also, and that's the question everybody and all our listeners probably are looking for once they look for this kind of stuff.

Robin Heinze:

I mean with 70, 76 on by default, so it's getting increasingly necessary.

Burak Güner:

So at the moment you said new architecture, it immediately hurt me.

Robin Heinze:

You have some pain. We

Burak Güner:

Do. Yeah. So I think the biggest problem with Nivo architecture was on library developers shoulders because we had to figure out a lot of stuff. We even had some backward compatible nivo architecture template at some point that support both architectures, which was a nightmare to

Mazen Chami:

Maintain. Thank you for doing all that work because that's the hard part for people. I guess pre 76 when it was owned by default, I think there was the whole pain of do I even bother with new architecture because I have to be backwards compatible? Do I have to be forwards compatible? I was talking to a client the other day and they were like, Hey, we want to build a MPM package. I won't go into the details of it, but they were like, okay, we want to be backwards compatible and new architecture compatible. Then they're like, well, we also want to make sure we are expo old architecture, new architecture compatible. And they're like, okay, and we don't have that much time, so put this in the back burner. So it's a lot. Thank you for kind of embarking

Robin Heinze:

On that classic client.

Mazen Chami:

Yeah,

Robin Heinze:

Do all this stuff and you don't have any time to do it.

Mazen Chami:

What is the difference between the two? When would I reach for Builder Bob versus when I reach for create React native library?

Burak Güner:

Create React Native library actually also comes with Bob. So whenever you create a new library, it comes with Bob pre-installed. When you build the library, Bob kicks in and does the build process and then publishes it. It does not do the publishing. Some other tool called release. It does the publishing for us.

Robin Heinze:

Theoretically use Bob on your existing library. That was not created with Create React native library.

Burak Güner:

Yeah,

Robin Heinze:

But if you're using Create React native library, you're automatically using Builder Bob. Gotcha.

Burak Güner:

Exactly. And Bob comes with an in it comment that you can use to add Bob to any project.

Robin Heinze:

Gotcha.

Mazen Chami:

Okay. Okay. So if I have a project, so I'm working on my client project and we want to spin off this native code that we've built into a package, I would reach for Bob to get me going. Okay. So if my client's listening, the timeframes just dropped a little bit, so there we go.

Robin Heinze:

Don't tell them to list, just say it's going to take a year.

Mazen Chami:

Yeah,

Robin Heinze:

Just kidding. We would never do that. Like I said, I think our audience is probably primarily app developers. Can you just walk them through maybe an explain I'm five about what library authors are concerned with versus app developers. When you're building a library, what are the components of the library that would be different from what you're concerned with as an app developer?

Burak Güner:

Okay, so let's split this into two scenarios. First of all, let's say you only have some JavaScript code that you want to bundle and just send to in the React native app. What you would do is you would structure your code in a way that it's easy to bundle and send. You would just pass it to Bob and Bob would do all the bundling and just ship it. You don't need to have any build gradle files, any pot spec files because those are the crazy stuff, and I'm going to be coming to them in just a second. But with JavaScript libraries, it's pretty simple. In general, there is one thing that you have to pay attention to and it's that if you are including any native dependencies like React native Reanimated gesture handle or something like that, you shouldn't put that into the dependency section of your libraries package json, because that way the React native cannot auto link them and as a result, those are not going to be included in the final application. So you should always put them to peer dependencies and dev dependencies.

Robin Heinze:

Interesting. Okay.

Burak Güner:

Yeah,

Robin Heinze:

I didn't know that, but there was such a big difference and I was always, I always wondered why libraries would do peer dependencies versus just making it regular

Mazen Chami:

Dependency. That always breaks my brain, the peer dev, and I know it's straightforward, but it's weird because I've tried it sometimes to put a peer dependency in the package and only for it not to trickle down correctly. And then the package itself doesn't really know it because it's like, Hey, I don't have it. My peer should have it now. So that's helpful context.

Burak Güner:

And the worst part is when you have a peer dependency and the user doesn't have it, it's just a warning that's easy to miss.

Robin Heinze:

Right? It's so easy to miss.

Burak Güner:

Exactly.

Robin Heinze:

Well, and I swear I've had projects where there's a list of five or six peer dependency warnings, but the app still works just fine. So you're like, what? Maybe you'll have this a peer dependency if you're working fine. It's probably like a dependency of a dependency that has a,

Burak Güner:

I would say your best bet is to put that if you are depending on reanimated, just put that onto arrhythmia and people can just install everything with just one command.

Robin Heinze:

Yeah, I feel like you don't see libraries very often spell that out in their documentation like, Hey, these are our peer dependencies. You have to install these before you can install it. Luckily for things like gesture handler and reanimated and stuff, most React native projects already have them.

Burak Güner:

Exactly.

Robin Heinze:

And so it's not an issue.

Burak Güner:

And if you'd like to talk about native dependencies, then it's a whole different story because now you have to think about React native auto linking your package. So it has to be structured in a certain way. The best way to test if you're auto linking works properly is to call a command called at React native community slash cli config, which is going to be listing you a list of packages that are auto linked with the native platform.

Robin Heinze:

Interesting.

Burak Güner:

But yeah, if you're wondering how auto linking works, I guess you can go to the docs or just read the source code. That's what I do oftentimes.

Robin Heinze:

That was going to be my next question. I was like auto linking honestly. I mean, I remembered the days when we had to do manual linking and that was fun. And then auto linking was introduced in what, 60?

Mazen Chami:

60? Yeah. Should be

Robin Heinze:

60, something like that,

Mazen Chami:

Something around there.

Robin Heinze:

And then ever since then it's like I don't even think about it and I don't, I have no idea what it's doing. It just seems to work magically. And so yeah, it's not one of my primary day-to-day concerns. But I imagine as a library author, you have to understand it pretty well. Would you say you learned everything you know about auto linking just from reading the docs and looking at other packages? Or is there a good resource out there to learn more?

Burak Güner:

So I learned it from Create React native library itself when I joined as a contributor and just seeing the whole code, but I had to dive deep into the source code when I wanted to add support for c plus plus only dependencies. Previously, if you had a c plus plus only dependency, a c plus plus only dependency is a dependency without any Kotlin Swift objective C code. It's pure c plus plus and maybe some JavaScript. And they've added a feature to auto link them via turbo modules, and the support was not there yet. So I had to go into the CLI and just debug how it works.

Robin Heinze:

Gotcha. I mean, that's how I think a lot of us learn a lot of things. It's

Burak Güner:

Like

Robin Heinze:

Something's broken and you got to figure out how to fix it and then you know more when you're done. I definitely have had a few days like that.

Burak Güner:

Yeah, exactly. And if you want to keep talking about the native dependencies, you also have to have a build dot gradle file for Android libraries, which has to have some certain stuff that are accumulated throughout the years with React Native.

Burak Güner:

I think prior to React native 73 or 74, you didn't have namespace support in Android libraries. So as a result, you have to have add this namespace support. If this library has it, don't add it if it doesn't. We have a lot of conditions like this just to make your library compatible with a lot of versions of React Native. So we got much more, especially with React Natives, new architecture. We also look for if the new architecture is enabled, also add these files, add cogent specs, add some, maybe include some C plus plus stuff. So all those you have to figure out if you are not using reactive library. Yeah, good luck with that.

Robin Heinze:

Yeah, I was going to, so I have a question here just about exactly that. What is the experience of creating a library like without these tools, what specifically is create React Native library and builder Bob? What pain points are they removing?

Burak Güner:

Okay, so if you want to create a library from scratch, you can just go visit React native docs. They have step-by-step explanation of what you need to add, what you need to have in the build that Gradle file, what you need to

Burak Güner:

Do in order to enable the call gen config and those kind of stuff. What create Reactive Library does for you is we have some predefined templates. We have a Swift template, we have a Lin one, we have all those. And when you call the create reactive library command, we ask you what kind of library you want to develop based on those ends. First we just fetch the templates and just create library for you. We just rendered the templates into an actual project that you can use. And we also have to generate an example app for you, which is something interesting because we actually call the community CLI to initialize a NE app because we don't want to maintain a copy of the app template in Debop

Robin Heinze:

Repo. Interesting. Okay. So it actually invokes the CLI. So you're not managing forever outdated template example app does it? I mean, I bet it adds time to the,

Burak Güner:

That's why you're waiting when you want it

Robin Heinze:

To the initialization. Exactly.

Burak Güner:

Yeah.

Robin Heinze:

That's

Burak Güner:

The most amount of time you have to wait.

Mazen Chami:

But having an example app is very important I think. Not only probably for you all to test as you're fixing it and stuff like that, but also for me as the library maintainer or even just app developer that's looking to build, split out my native code into a package, it's always good to have that example app there to help you test, but at the same time, to help the consumer. So if I'm using a library, sometimes some packages out there don't have an example app and it's hard to see it and visualize it and it's hard. I see you laughing, Brett, some don't. Right? And those are the ones that are harder to test things out and figure out what's happening. And I think the

Robin Heinze:

Well and Heaven afraid you have to open a PR for a library you're using because something's broken and all of a sudden you're assuming the role of library contributor, maintainer author, and having as much setup in there to make that easy for contributors as possible is really helpful.

Burak Güner:

I think your best option if you don't have any exemp app or having exemp app does not mean that your app, your library is a hundred percent ready. You still have to test your library against a real app, actual app. And I can actually shout out a tool that does that simplified that process. It's called ylk YA lc, and what it does is it publishes your library for you, like it does for MPM, but it does that locally. So you can fetch that from the file system again in some other directory and just use that as a regular dependency in any other app.

Robin Heinze:

Interesting. That's really cool. Yeah, I hadn't heard of that. I we'll will link that in the show notes for anybody who's curious.

Burak Güner:

Definitely. And we use this to test Bob because Bob itself is a CLI tool that should be able to use with actual libraries.

Robin Heinze:

No, really good to know about. Yeah, I find that anytime I've been in a position of having to write a library, testing it and actually consuming it in an app while I'm developing it is always one of the hardest parts. Like I'm actively developing on it and I want to see the changes that I'm making to see if they work and if they're reflected instantly, which is really hard to do when you need to have an app that's consuming it. So what kind of setup do you have for that? Is that what the example app is for?

Burak Güner:

Yeah, so for regular React native development, what you do is I'm mostly going to focus on having some native code because having some JS code, JS only library generated with CNL is pretty easy because it's just like app code. You can have some hot view loading going on, but when it comes to a native app, it's not because you have to compile it. You have to build the app to see your changes.

Burak Güner:

So what we do is with the example app, you are given an Android and iOS project. What you should do is you go open your Android studio or Xcode using that example app and that example app will have your library linked and you just edit the code, the changes to your code will be reflected to your actual library. And we actually had some issues, some people had some problems because it's not clear what you should do immediately. Actually we have all these in the contributing MD file. That's your individual library, but it's still a lengthy process that you have to do, but that's the only way to do it right now. So you open that example app and then edit the example app to be able to change your libraries code.

Robin Heinze:

Gotcha.

Mazen Chami:

It's a tedious process, right? Because we're talking about cross-platform, multi-platform development here. So you do need all these tools to be able to do it. Native developers are always like, well, all I need is Xcode or Android Studio and I'm done. But we're talking about that extra step, adding in all these extra platforms. So you do need all this stuff. So the ability to go into, we always say it, the reason why React native is good is because of the native developers that come in and give us the native expertise and React native wouldn't be what it is without React and without Native. So stuff like these help us drop down to the native layer and give that great experience. And if React native doesn't have it, the ability to go down to native is always a plus one.

Burak Güner:

And I don't think that the hardest part is editing to Native code itself because it's just code at the end of the day. It's not that different than JavaScript. I think the hardest part is dealing with Gradle build Gradle file you have, which is using a language called Groovy, if you're not familiar. And then we have some Ruby with the Coca Pot.

Robin Heinze:

Well that's fine.

Burak Güner:

Yeah, Ruby fine. We love Ruby. So we have a pod spec file which is read by something called Cocal Pods, which I don't think that it has great docs. I think it has decent docs. But the problem is with Xcode, you have to know a lot of, oh, you have to know this header, compile header, include path, all those stuff you have to know to create a decent library. I see that a common use case for creating a new library is wrapping a third party, SDK from your client, a native one. Especially because the clients don't just want DGS wants to be brought in React native because JS libraries are limited in general, when you have native code, you can also access the platform APIs. So they generally want you to wrap a native library and now you have to deal with an a r file, some dependency from Maven, maybe like some XC framework, like a Cocal pots pop. And I think that's the hardest stuff when dealing with creating any native library.

Mazen Chami:

I kind of want to ask you higher level pre the birth of Bob, and that's funny, sorry, pre the birth of Bob and create React native library. Tell us the story. How did these libraries come to be? What was the inspiration?

Robin Heinze:

Was there a specific problem or someone was experiencing some pain trying to build a library and they're like, screw it. I'm like, I need to build something to fix this. Was there a story for how the inception of them?

Burak Güner:

Exactly. So Satya, Satya, he is the, he's maintaining React, native React navigation, and I talked to him and he told me that he had problems building his libraries. As a result, Bob became a thing was born.

Robin Heinze:

That's like so classic for developers. They're like, this is annoying and hard and I'm lazy, so I want to do a bunch more work to build something to make it less annoying. But it's so nice because we up with all these tools to help everyone, but it's so funny

Burak Güner:

And what's interesting is people always complain about the amount of stuff that we have in we have with a library generated with Create Ative library because we have to be able to generate some change logs. We have to be able to build a library and publish. So we have to have a lot of tools we have to install, release it for you, left hook for you. And not everyone is a big fan of that, especially advanced users are not big fans. But at the end of the day, Sadia always tells me that, oh, I need this to be there because I want my library to be publishable.

Robin Heinze:

So here

Robin Heinze:

It's driven by it's, yeah, it's driven by Stadia who's like, this is what I need, so this is what's going in. But I trust him and his needs. So if he gives his stamp approval for something, then I'm like, okay, that's a good thing to use. But we have that issue with, we have our boilerplate Ignite and there's always people who complain about, well, why is this in there? Why is this in there? I was like, at the end of the day, you have to put something out there that's useful to you and you think is good and not everyone is going to love it or think everything's useful and that's okay.

Mazen Chami:

Something just came to my mind. Are there any other alternatives? Every time I'm looking to do something like this, regardless of, I know Nitro modules you mentioned that's coming in the future, but that's something new. But prior to all this stuff, is there an alternative to React Native Create React Native Library or Bob?

Burak Güner:

So from what I know, I think I saw Bob as, so we have some tools listed in Bob's Readme. We can take a look at their, they're not as popular as Bob and Yeah, fair

Mazen Chami:

Enough. That's what I anticipated.

Robin Heinze:

This is the one that I hear about the most and that seems to be the most,

Burak Güner:

Maybe like the expo module stuff,

Robin Heinze:

Right? What's the expo one create

Burak Güner:

Probably create expo

Robin Heinze:

Module, which is useful and it's in the exo ecosystem, but you're not always trying to target the Xbox system.

Burak Güner:

Yeah, we definitely love Expo modules, but we just don't have support for it. We have, we are doesn't supporting Turbo modules. The old module system, which is native modules and nitro modules are going to be supported soon.

Robin Heinze:

Very cool. So we're almost out of time, but for one last thing I have to ask, what is in the future for create Tive Library and Builder Bobb? Is there any new features plan, new releases planned, or are you mostly just keeping up with React native?

Burak Güner:

So you just asked a wonderful question because we are planning something that's going to be pretty big, I guess. So you know how the app upgrade Helper works with React native apps?

Todd Werth:

Yeah.

Burak Güner:

Yeah. You tell that you are using this version of React native, you wish to upgrade to this other newer version of I

Robin Heinze:

Love that too. It's such a good tool.

Burak Güner:

Imagine that for libraries.

Robin Heinze:

Yeah. Oh, I like what I hear. Helpful. Helpful. That would be

Burak Güner:

Helpful. If you've recently created a e library with CNL, you might notice in the package json you have this create React library field with a version of the tool itself. So we start tracking them and we're going to be building that from scratch. This was actually an idea from the meta folks, so they wanted to talk us about some, having Bob as the golden template for library development.

Robin Heinze:

Wow,

Burak Güner:

That's great.

Robin Heinze:

That's a big deal. Going to make it on the docs.

Burak Güner:

It's already in the docs, but not in a golden way.

Robin Heinze:

The blessed. Yeah.

Mazen Chami:

Yeah, exactly. Kind of like how expo framework frameworks and expo is the blessed way. Now this gets the blessing. That's

Robin Heinze:

Awesome. Yeah. So will it work this similar to how the upgrade hub works? You just select your version of Create Rack native library and then the one you're upgrading to and it'll tell you.

Burak Güner:

I think we can just even fork the tool and just tweak it.

Robin Heinze:

Yeah. Yeah. Very cool.

Burak Güner:

That's awesome. And other than that, maintenance is always something to do because

Robin Heinze:

React, react native, that Pesky keeps releasing new versions. We all feel that pain. You're like, I feel like I just did this and now I have to do it

Burak Güner:

Again. So the thing is, each time they release any minor, Bob definitely breaks and I have to fix it.

Robin Heinze:

Even minor versions, huh?

Burak Güner:

Yeah, the minors are the breaking ones because it's zero based, but yeah.

Robin Heinze:

Yeah. I mean every version of React Native is a minor

Burak Güner:

Version kind of. Yeah. Or you have the patch versions, at least the patch don't break that, which are minor.

Mazen Chami:

The

Robin Heinze:

Yeah,

Mazen Chami:

We could say the patch is the minor

Todd Werth:

Version.

Mazen Chami:

That's fine.

Robin Heinze:

Know they basically just reinvented Ember and they're like, actually

Burak Güner:

It's zero based.

Robin Heinze:

How we doing? Yeah, it's zero based. Awesome. Well, unfortunately we are out of time. Really, really lovely to talk to you. We'll make sure we link everything that we talked about in the show notes and to our listeners, keep an eye out for the future goodies that are coming out with Create React native library and builder Bob. Yeah, I will leave everyone with a joke. Okay. So little known fact. We are actually born with four kidneys, but when we grow up, two of them become adult knees.

Burak Güner:

No, that's

Robin Heinze:

A good one. Kidney adult knees. I thought it was funny. That

Mazen Chami:

Is funny. That's why we do that.

Robin Heinze:

All right. Thank you everyone for listening, and we will see you next time. Bye. Hi,

Jed Bartausky:

As always, thanks to our editor, Todd Werth, our assistant editor, Jed Bartausky, our marketing and episode release coordinator, Justin Huskey and our guest coordinator, Mazen Chami. Our producers and hosts are Jamon Holmgren, Robin Heinze and Mazen Chami. Thanks to our sponsor, Infinite Red. Check us out at Infinite.Red/Radio. A special thanks to all of you listening today. Make sure to subscribe to React Native Radio on all the major podcasting platforms.