How I Build React Native Libraries

building libraries with react native is hard where do you start there's just so many questions do I do a native Library a JavaScript only Library here I'm going to give a pretty lowlevel description of what I do and how I think about this once I know I have a problem to solve and I'm going to show you two examples burnt and zego now this video is going to be a pretty relaxed I'm just going to like go through it it might get kind of long I'm not going to cut it up a lot I'm just going to talk you through free form what I'm thinking when I'm building these what the text St looks like what it's like to work with native code versus only JavaScript and a little bit

more like that and up first we will look at zego so this is a menu library for react native and it lives in a bit of a middle ground between most libraries you typically have either one that uses like native code or one that uses just JavaScript in this case I'm actually wrapping two react native libraries so if you've ever seen zego I can pull it up here let me show it here on the screen it's a it's a library for menus

and here I actually have a video describing what it looks like okay I'll mute this and so you can see here it's showing a menu on the right that's like a native menu for iOS and on the left it's going to do like you right click and it shows a radex menu right so what I'm doing is I'm mapping the same API to both platforms to iOS Android and web and the question is like how is that working what was the approach what did I do so the way Z looks it looks like you're using radex if you ever use radex it looks just like this you have these components and the question is like how does that get turned into an iOS menu

and it's using a lot of magic so while this is a pretty uncommon react native kind of Library you're going to do I'm just going to like literally pull up the code for Z and show you it because I think it's a pretty fun thing to look through the main reason being I'm breaking a lot of rules of react when I'm building this Library so just to show you the API again you have these like menu items and they're all in components so I'm basically just turning those menu items into something that

this Library can use so see here on Android and then there's a different one for iOS but I'll just like focus on one of them for now basically this library takes in an array and then of actions and then those have like sub items and stuff like that I wasn't a huge fan of this API I much preferred the radex one and I also wanted to be able to use radic on web so I was like all right what could I what could I do here to make this work and so again this is what the API looks like now there's one like limitation of zego which is it only lets you use components directly as a child so so here you have like content and

then you have item but item has to be a direct child and if you want to like have it be nested inside of something you need to do a custom component thing here so here it's like this isn't allowed and the reason is because I'm literally mapping children and turning it into an array so it's kind of confusing I'll just I'll just show you some code the first thing Z does so I have this uh file called create iOS menu and create Android menu each one of these only works for that platform so I'll go to the create iOS menu and this is just like a super like what is going on here

basically what I'm doing is I'm creating all these components like trigger group content everything that like looks like it's like a radic component but those are all just like fake components right because react has these apis that lets you literally Traverse the components someone is using and like read in their props so technically when you're using zego you're using jsx but it's all an illusion you're actually just passing me an array and I'm mapping over that array of components extracting their props and forwarding it down to the underlying native Library notice that like this is just all the components from rx's menu put right here and most of them just are

returning empty like how does that work right there're just these components that are turning empty well they're just there for what would be called like syntactic sugar right it it looks nice when when you're building it but it's not actually doing anything and what I'm going to show you in a second and is how is how whenever you write an item I'm actually just reading in the props in a different time so here's the item component for example it returns nothing right it Returns the child but technically this could just return empty