Robin, Jamon, Jon Major, and new guest-host Mazen Chami introduce their favorite third-party React Native libraries, including GiftedChat, RN Popover, and more! (In fact, Robin had so many we had to cut some out.)
Robin, Jamon, Jon Major, and new guest-host Mazen Chami introduce their favorite third-party React Native libraries, including GiftedChat, RN Popover, and more! (In fact, Robin had so many we had to cut some out.)
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 again to React Native Radio podcast, brought to you by Tabs, who want to remind you the only good space is a dead space.
Todd Werth
Episode 209. Favorite third party React Native libraries.
Jamon Holmgren:
Robin, have you been watching the Olympics this year?
Robin Heinze:
I have definitely been watching the Olympics. I actually paid $10 for a Sling TV subscription so that I could use the NBC sports app to watch the streams live as they happen in Tokyo.
Jamon Holmgren:
Live. Okay. So that's- [crosstalk 00:00:55].
Robin Heinze:
I don't always get to them live because a lot of them are 2:00 in the morning, but I usually watch them as soon as I can, but before for the prime time NBC coverage.
Jamon Holmgren:
That's pretty cool. Yeah. We have it going on our TV somewhat. It's been up for sure, but I don't know, for some reason the kids haven't been as interested as they were in 2018, I think it was?
Robin Heinze:
'16. Or '18 for the winter.
Jamon Holmgren:
Yeah, the Winter Olympics. I don't know if it was the type of sports or what, but the kids just haven't.
Robin Heinze:
This Olympics has been weird, I will say. It doesn't have the same... I don't know.
Jamon Holmgren:
Energy.
Robin Heinze:
Magic, energy that Olympics usually do. I think it's because there's no spectators.
Jamon Holmgren:
Yeah, that's probably true.
Robin Heinze:
All the COVID stuff made it have a different feel.
Jon Major Condon:
I thought there was spectators.
Robin Heinze:
Not public spectators. There's a handful of people in the stands. They're usually press or Olympic committee people or people from the country's Olympic team.
Jamon Holmgren:
Today, we actually have a guest host who I will announce in just a bit or introduce, I should say. I am announcing him right now, Mazen Chami. But before then, of course I will introduce myself. I'm Jamon Holmgren. I am the host of React Native Radio, this podcast and CTO co-founder of Infinite Red. With me, Robin Heinze. Robin is a senior software engineer who's also at Infinite Red, working on React Native apps. And John Major Condon who is another senior software engineer working at Infinite Red on React Native Apps. So we figured we'd just stay with that theme. And we have another senior software engineer who works at Infinite Red, new this year, actually, Mazen Chami. Mazen, welcome to the podcast.
Mazen Chami:
Hey, thanks for having me.
Robin Heinze:
Did you know we actually hire engineers based on their willingness to come on the podcast?
Jamon Holmgren:
This is true. That's why we advertise on the podcast. Actually, Mazen, you heard about us do the podcast, right? Or was it...
Mazen Chami:
Chain react was when I-
Jamon Holmgren:
Oh, chain react. Okay. Our conference. Yeah, which didn't happen last year, is not happening this year.
Robin Heinze:
We do a conference?
Jamon Holmgren:
Yeah, I know. I know.
Jamon Holmgren:
I miss it.
Robin Heinze:
It's been a while.
Jamon Holmgren:
2022. That's when all of our dreams will come true.
Jon Major Condon:
Ooh, that's a good one.
Jamon Holmgren:
Mazen lives in Durham, North Carolina. He's a former pro soccer player and pro soccer coach, which is awesome. Also, obviously, like I said, a programmer. So you used to coach women's pro soccer, Mazen, which is really cool. And I actually went to my first NWSL game, the Portland Thorns, which by the way, Robin, have you been to the Portland Thorns? Not too far from you.
Robin Heinze:
No, I haven't even been to the Timbers.
Jamon Holmgren:
Okay. They play in the same stadium.
Robin Heinze:
I'm probably going to be in Mazen's bad graces after this, but I'm not really a soccer person.
Jamon Holmgren:
I haven't been one either to be honest, but a friend of mine invited me to this Portland Thorns women's soccer game and it was really fun. It was great. And I texted Mazen about it. And you said that some of the women you used to coach, they still play in the NWSL?
Mazen Chami:
Yeah. One player in particularly. Rachel Daley. She plays for the Houston Dash and she also plays for the English National team.
Jamon Holmgren:
Oh, that's so super cool. I mean that's a fun backstory, unusual backstory for a software engineer.
Robin Heinze:
I don't think I knew that you were a pro player and a pro coach. I knew that you coached now.
Jon Major Condon:
Same.
Mazen Chami:
Yeah. I coached out in LA. We were the LA Strikers.
Robin Heinze:
Nice. I'll have to consider going to a Thorns game.
Jamon Holmgren:
It's really fun.
Robin Heinze:
I've heard from multiple people that it's really fun, especially you can bring their kids.
Jamon Holmgren:
Yeah. My friend said he... and he's been to both Timbers, which is of course the men's, what is it called?
Robin Heinze:
MLS.
Jamon Holmgren:
MLS. Yeah. MLS team here, that it's almost too intense at those games. People get really into it. Where at the women's game, it's just like nice, clean, pure soccer. They really play hard. There isn't a lot of fake injuries or anything like that. They just go.
Robin Heinze:
And the fans are under control?
Jon Major Condon:
[inaudible 00:05:10] over there?
Mazen Chami:
Yeah. If you go to a Timbers and Sounders game, those can get very rowdy.
Jamon Holmgren:
The Seattle Sounders. Yeah.
Robin Heinze:
That's a rivalry for sure.
Jamon Holmgren:
The I-5 rivalry, just three hours apart, which is probably more usual out east where teams are close together, but here it's just kind of we're the one roughing out.
Robin Heinze:
You got to drive four hours for the nearest rival around here.
Jamon Holmgren:
Exactly. Well, cool. Welcome to the podcast, Mazen, really happy to have you here. And 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. We have years of react native experience now augmented by Mazen's years of react native experience. And we have deep roots in the react native community, which is going to come into play with our topic today by the way. We are the best choice for your next react native app. You can also check us out, chain react, which will be coming back hopefully in 2022 and the react native newsletter, which John major is the chief editor. Is it chief editor?
Robin Heinze:
Editor in chief.
Jamon Holmgren:
Editor in chief?
Jon Major Condon:
Editor in chief. Yeah. One day I'll get-
Jamon Holmgren:
Assistant to the editor?
Robin Heinze:
Assistant to the editor.
Jamon Holmgren:
I don't know. You can learn more on our website, infinite.red/reactnative or email us hello@infinite.red. Don't forget to mention you heard about us through this podcast so that Todd, our CEO and also the editor of this podcast, doesn't shut us down.
Robin Heinze:
It's true. We have to keep paying the bills.
Jamon Holmgren:
We have to pay the bills. Also we are hiring react native engineers. If you're senior level react native engineer located in the US or Canada, go to careers.infinite.red and fill out the form. And if you are a former pro player, obviously that helps.
Robin Heinze:
Make sure to mention it.
Jamon Holmgren:
Just mention that. I actually don't think Mazen mentioned that in his application.
Robin Heinze:
I don't think he did either.
Mazen Chami:
Prefer the coaching part nowadays.
Jon Major Condon:
Maybe you should have a field for that, a separate field.
Robin Heinze:
Did you coach pro soccer and play pro soccer?
Jon Major Condon:
Yeah.
Jamon Holmgren:
Okay. Let's get into our topic for today. Today's topic is our favorite third party react native libraries. We're just going to take two each. And Robin's very sad about that because she has 12 on her list.
Jon Major Condon:
We're going to take two each.
Robin Heinze:
This is not sponsored by the way. None of these libraries have any idea they're about to be mentioned.
Jamon Holmgren:
Exactly. Yeah, we'll see how many of them listen to us if they get back and give us some feedback. So let me start with John Major. Give me your first pick for one of your favorite third party react native libraries.
Jon Major Condon:
Ooh. All right. So my first one is going to be react native background geolocation from transistor soft. It is a paid package, but it does focus on battery optimization and holistically performance. However, there is a free version called well, it's the same name, but it's from Maroon 85. He's the GitHub user. And I think it does do a better job at unifying the APIs between Android and iOS. However, I've used the paid version. And I think it does do a really good job at battery optimization.
Jamon Holmgren:
Yeah. And they have an interesting business model here where it's an open source system, but if you want, what is it? If you want to run it on Android in production, you have to pay for a license I think and you can run it on iOS.
Robin Heinze:
Oh yeah. You can play around with it in dev mode on Android.
Jamon Holmgren:
On Android?
Jon Major Condon:
Yeah. Yeah. Dev mode free all around.
Jamon Holmgren:
Yeah. And of course background geolocation is something that will burn up batteries if you're not careful how you do it. It's pretty easy thing to get wrong.
Jon Major Condon:
And you can get this one wrong. I've definitely stumbled across draining battery by doing things in the documentation that you're not supposed to do. So that's a nice thing, in the documentation, the author is pretty explicit on not doing certain things because they will drain battery.
Jamon Holmgren:
I mean, this is cool. This is the type of library we want in the ecosystem where they've really focused on the particular problem. I mean background geolocation is a fairly common feature for certain types of apps. And so preserving battery and not just burning people's... I've had apps that burn up my battery when I'm using them. And it's just no fun.
Jon Major Condon:
It's the worst when the phone is in your pocket and your pocket gets really hot.
Robin Heinze:
You're not allowed on airplanes anymore if you're using this package.
Jon Major Condon:
I will say, lastly, the examples in this package are phenomenal. They have a lot of examples. They also have a YouTube channel. So the YouTube channel does help a lot too, if you're more of a visual learner. I really think that this is a good one.
Jamon Holmgren:
Yeah. They also include a really cool little web app that allows you to do some testing and it gives you a nice map and everything. So yeah, it's really well done. And I like this idea of having some third party libraries that sort of push the envelope of quality and feature set and all of that, that also have a way to support themselves beyond just sort of the free time of the maintainer. Okay. Robin, have you picked a package that you'll go with, out of your 45 packages for your number one?
Robin Heinze:
What can I say? I really like open source software. I'm going to start with react native config, which should be familiar to a lot of people, but I think it's a really key library if you're working with any kind of real world environment, especially with larger companies that tend to have more complex infrastructure and multiple environments. So if you have, for example, a dev server and then a staging server and then a production server, react native config makes it really easy to specify things that are different between those environments, like API URLs and potentially API keys or other things that you want to be able to configure outside of your app. And you maybe want to offload to an ops team or another team in the company to be able to manage app build time. This lets you do that. So you can specify any number of variables in an environment file and switch that out at build time. And your app will point to the right place.
Jon Major Condon:
So I haven't used this directly, but I've used something like dot env in the react ecosystem. How does that compare with dot env?
Robin Heinze:
So from what I understand, dot env is completely JavaScript, whereas react native config has a native layer. I don't know offhand what advantages the native layer gives it, but I've had trouble with dot env in the past, not handling missing variables gracefully and other things like that. So I tend to prefer reactive native config. It's just been more robust.
Jamon Holmgren:
Yeah. The big thing is that it actually exposes those dot env variables in your native code. And that includes Android, Java on the iOS side, with objective C or swift and in Windows. So if you're doing react native windows, that it also exposes it over there. So that's the benefit of having the native layer.
Jon Major Condon:
Right on.
Robin Heinze:
Right. Good to know.
Jamon Holmgren:
Even in your great old configuration, you can use it. So that's pretty cool.
Robin Heinze:
I just had a really good experience with it. It's straightforward to set up. It works well, it follows patterns that are familiar to people in the ops world. And so it's easy for them to pick up on it and be like, "Okay, I know how to do this." So yeah, it's been really key for a lot of the different projects I've worked on.
Jamon Holmgren:
Mazen, have you used the react native configs?
Mazen Chami:
Not in any past projects, no.
Jamon Holmgren:
Okay. Yeah, I think if your environment settings are kind of just standard, dev and prod, it's probably overkill in a lot of cases. In fact, I think in Ignite, we just require a file require a...
Robin Heinze:
A JS file. [crosstalk 00:13:40]
Jamon Holmgren:
Yeah, which is nice, because you can just kind of export your secrets from, or not secrets env. I actually want to talk about that. These aren't secrets, these actually get bundled into your JavaScript code, which is readily available for anybody who wants to take the app, go into the package, and then pull those secrets out.
Robin Heinze:
It's very difficult to actually have any secrets with the react native app.
Jamon Holmgren:
Yeah. Or any mobile app, to be honest, I did a native app and it was compiled and everything. And a buddy of mine said, "Hey, send me that IPA file. The file format for iOS." And in literally three minutes, he had already pulled my secrets out of it. I was like, "Oh shoot, this isn't working." This was early on when I was first starting to do native iOS development. So yeah, secrets don't work here. This is just like being in a browser. So being in a browser, you can obviously view source and go look at it. That's where those env variables will end up. Still useful though, there's still stuff you need to keep track of or settings or whatever.
Jamon Holmgren:
All right. We managed to get through one of Robin's. I'm going to go next if that's okay. And I want to talk about react native screens.
Jamon Holmgren:
So I have sort of a soft spot in my heart for native navigation libraries because I built one back in the day and react native screens, I think is the unsung hero of react navigation. It's under the hood is integrating with the native navigation solutions. So it allows you to use the native navigation containers and obviously screens and whatnot with another navigation library. Now the most famous of which of course is react navigation. I actually, a while back, a few years ago was like, "I kind of want to tackle this navigation thing," because I wasn't super happy with what react navigation was doing at the time. I think this was pre version five. So it was a different API and stuff. And when I dug into react native screens, I was like, "Well, okay, they're already doing what I was going to do. They're doing that." If I wanted to have my own API, I would just use react native screens and hook into that and provide the API you want.
Jamon Holmgren:
Then react navigation did a good job of kind of converting to the new API format. So this is a little bit of a hybrid between react native screens and react navigation, but more react native screens focused on my end.
Robin Heinze:
Nice. It's one of those libraries that doesn't get a lot of glory because it's just installed under the hood when you install react navigation. So you don't really get to go. It's not like you go out seeking it and researching it and installing it. It's just sort of taken for granted, but it does a lot.
Jamon Holmgren:
Yeah. And in fact it uses, or a lot of in the read me, it's showing create native stack navigator that comes from this library, even though you would use it mostly transparently or opaquely. Is it opaquely?
Robin Heinze:
Opaquely.
Jamon Holmgren:
Correct, navigation where you're not really thinking about that.
Robin Heinze:
So react navigation gets all the glory.
Jon Major Condon:
It's not fair.
Robin Heinze:
Not fair.
Jamon Holmgren:
Right. It's sort of a CTO and how I get all the glory for your work, right?
Robin Heinze:
Exactly.
Jamon Holmgren:
So that's my first library. Mazen, let's hear your first library.
Mazen Chami:
Oh yeah. My first library is victory native from formidable lamps. This is my go-to charting library. I think it's really good in how their documentation gives you a playground where you can mess with things before you kind of implement them in your app. So you can see how it is. In the past, I've used that with designers to show them what the chart would look like essentially. And they've also essentially used it to see how things would look before implementing it. And it's very easy to install. It has the dependency of react native SVG, which I feel everyone has these days already installed and linked?
Jamon Holmgren:
So this is a react native version of victory charts, right?
Mazen Chami:
Correct.
Jamon Holmgren:
Yeah. So that's also by formidable and so is it pretty much the same API and everything?
Mazen Chami:
Essentially under the hood, yeah. So this library kind of is like a pass through to the core victory library.
Robin Heinze:
But what kinds of things have you had a need for charting?
Mazen Chami:
Charting data points over time. One of the apps was workouts, so channeling heart over time, distance covered and stuff you would pull from apple health kit essentially.
Jamon Holmgren:
That's awesome. Yeah. No, it looks really cool. And the API looks pretty neat in the fact that it works with react native and has a nearly identical API to the victory JavaScript, or I guess react. Is it react? It's react.
Mazen Chami:
React.
Jamon Holmgren:
Yeah. Victory is react. Okay. It's a big win. So you could conceivably also use this in a cross platform, web and mobile project?
Mazen Chami:
Correct.
Robin Heinze:
Yeah. You would have to handle the SVG portion, I think. I don't know if react native SV, here there's react native web SVG. So you'd have to do something, a little bit custom to get it to work from that side.
Jamon Holmgren:
At the very least you could share your knowledge of the API between the two. But it'd be interesting to play around with it and see if there's a way to get it to work on both web and mobile.
Robin Heinze:
Shout out to our friends at formidable for that one.
Jamon Holmgren:
Yeah. Yeah. We've known formidable for a long time, have a lot of friends over there.
Jon Major Condon:
Something I noticed is the API is really thick. There's a lot of plotting that one can do. I'm not a person who's really too familiar with all the different charts that one needs, but boy am I seeing so many. And they're all are really nice and well designed.
Mazen Chami:
Yeah. I agree with you. I think, the one thing that I look for a lot in charting libraries are also animation and how smooth they are. This one does a really good job with that. But I do agree, the package is big and you do have a lot of stuff sometimes you might not use, sometimes you might just need a bar chart and a line chart. But essentially you've installed all of them.
Jamon Holmgren:
One last thing about victory. It's cool because if you go to their website, they have a chart of downloads of victory over time, which is a great way to kind of demonstrate its capabilities. It'd be hilarious if they use some competitor for that though.
Jamon Holmgren:
All right, back to you, Robin, what's number two?
Robin Heinze:
Number two. So I'm going to cheat a little bit and talk about two different libraries for this.
Jamon Holmgren:
Whoa, whoa, whoa. Of course like the rules.
Robin Heinze:
Whoa. The first is a little library called react native spin kit by Max S 15, is the GitHub user.
Jamon Holmgren:
Max S 1 through 14, we're already taken.
Robin Heinze:
This is just a cool little library of a collection of different loading animations as alternatives to the activity indicator that comes standard with react native. It's not super complicated, but it was just like... I remember using it the first time and it was just an overall really pleasant experience. It just works really well. It does have native components. You have to link it. And I think it has auto linking now, but really beautiful animations, a really nice showcase. There's a showcase website and an example app with all the different spinners, really easy to pick one, I just remember having a really pleasant experience with it and it adds a little bit of something different to your app, besides the spinner that everyone is used to seeing. So I just wanted to shout out that little library.
Jamon Holmgren:
Yeah. Just looking at the example app I'm seeing circle flip bounce, wave wandering cubes, pulse chasing dots, three bounce circle, nine cube grid, WordPress, fading circle, fading circle alt, arc, arc alt. So there's a bunch of different presets there that are pretty cool.
Robin Heinze:
Yeah. Lots of different things to choose from. They're all really nicely made beautiful animations. So yeah. Check out react native spin kit if you want to add some different flavor to your loading animations. And the other one is also a nice UX library, which I think a lot of people will be familiar with, but react native vector icons is a really classic react native library that just gives you an insane number of free icons to use around your app. Really easy to install, really easy to use. There's a really great companion website that lets you search through the various icon packs for what you need. Pretty much anything you could think of. There's an icon for it.
Jamon Holmgren:
Yeah and it seems to work on everything like react native Mac OS, react native windows, react native web.
Mazen Chami:
It also looks like they have some buttons with preset logos, icons. Sorry. So log in with Facebook, follow me on Twitter.
Robin Heinze:
Yeah. They have the social media buttons and it's all open source, free to use, no more trying to go to those "free icon websites" where you can only download it for free if you credit them at the bottom or you can't download any size greater than 10 pixels or something. Ridiculous. And they're all vectors, so they're not huge PNGs filling up your app. But yeah, really pleasant, really great docs, really great library overall. And I think a lot of people have probably heard of it, but wanted to mention it.
Jamon Holmgren:
We've bundled react native vector icons in Ignite for years and years. Probably from the very beginning I think. And so that's been a part of our standard stack forever.
Robin Heinze:
And that just goes to show how long it's been around and how long it's been just the standard solution. It's still pretty much the library that you reach for.
Jamon Holmgren:
Yeah. It has 15,000 stars on GitHub. That's pretty decent. Cool. This time I'm going to go right back to Mazen. Mazen, what's your second one?
Mazen Chami:
My next one is react native calendar strip. I've used this a couple times and I think I mentioned in the last app using pulling heart rate data for workouts. This was the perfect companion app package that I installed to help users see what days they've done workouts and where there's data. Their documentation is really good similar to my other one. It has a lot of props and all, but it is very smooth in animating and performance not taking up as much, which I kind of like, and some of the metrics I look for when picking it up. And then they're very active. The buggy dev, who is the owner of this package is very active on the issues and poll requests. And that's also something, in some packages these days, they tend to fall off.
Jamon Holmgren:
Yeah, yeah, no, I maintain some open source libraries myself and which I noticed none of you selected as your favorites. I'm watching you.
Jon Major Condon:
You know I meant to. You see what happened was-
Robin Heinze:
I feel this podcast is already enough of an advertisement for Infinite Red.
Jamon Holmgren:
That's true. Yeah, no, this is a cool library. So for those of you listening and not Googling everything right away, it's a component. So I'm looking at the GIF on the ReadMe. It's a component that has a left arrow and a right arrow. And it's kind of horizontally laid out at the top. It has the month and year you're looking at. And then within the field in the middle is this horizontally scrolling view that has Monday the first, Tuesday the second, Wednesday the third. And so you can just scroll left and right by just dragging your finger left and right to see future dates, past dates, maybe tap on them. And it looks there's also a dot underneath it. So like Mazen said, you could show activity or whatever content.
Mazen Chami:
Very customizable too. Sometimes, it'll be missing a couple props and you can't change the color to match your theme. You can't style a certain, in this case, a certain day, a certain way. All these props are available for you to do that. So it's very helpful and easy in that sense.
Robin Heinze:
I'm pretty sure I implemented this exact thing from scratch on a project a few years ago not knowing that this was a thing.
Mazen Chami:
This does exist.
Jon Major Condon:
It does seem very specific.
Robin Heinze:
I probably would've had a better time if I knew about this, because that's not an easy thing. I think
Mazen Chami:
It's been around a long time.
Jon Major Condon:
Does this come with moment? I see some references to moment JS.
Jamon Holmgren:
It looks like it's an optional dependency basically where if you have it, and you pass it moment stuff, it'll be a like, "I know what this."
Robin Heinze:
But does it install moment?
Mazen Chami:
It formats the date as a moment date or a pure date. So whatever you pass it, it'll recognize either or.
Robin Heinze:
So does it install moment in your bundle?
Jamon Holmgren:
It does actually. It is a dependency.
Robin Heinze:
It's a regular dependency.
Jamon Holmgren:
Yeah. So you're going to be bringing moment along if you use this.
Robin Heinze:
I mean, if you're already using moment, hopefully yarn will take care of that for you and not install it twice.
Jamon Holmgren:
Yeah. Yeah. It looks like it's a fairly loose dependency. It's just like anything above 2.2. So that will help it. Luckily moment doesn't change much over.
Robin Heinze:
Well it's a step. It's not being actively maintained anymore. Right?
Jamon Holmgren:
Right.
Robin Heinze:
It's not changing-
Jamon Holmgren:
Maybe bug fixes, but they're not-
Robin Heinze:
They're maintaining it. They're not actively-
Jamon Holmgren:
Creating stuff out there. Yep. Cool. So that does it for Mazen's stuff. John Major, what's your second one?
Jon Major Condon:
All right. So my last one is going to be react native pop overview. Now Mazen knows this package because he and I worked on putting this into our client app together. Originally I had tried doing a react native popover tool tip myself, all customized and I failed miserably. All the math there was a little bit too much, but this one came in handy. Again, we worked together and we put this in there pretty quickly. It comes with a really nice flexible API. It also comes with different packages, included like JS tool tip, react native modal, and one other package that I'm forgetting. But you can switch out the tool tip for those different packages. And the last thing, it is also written fully in type script. So when you're writing out your component, referencing it, you have strong types right there for you.
Mazen Chami:
This did make what we were working on much easier at the end of the day. So I think it is a really good library for this use case.
Robin Heinze:
Popovers are a difficult thing to implement, especially if you're trying to roll your own by trying to get it to render above everything and in the right place. Every time it's sometimes not super fun. So it's nice to have a library that does it for you.
Jon Major Condon:
It was, and there was all also the boundaries of the device itself you got to take in consideration. So this green height and width, there's a lot of variables.
Jamon Holmgren:
This could be the greatest ReadMe I've ever seen in my life. I swear this is so cool. I've just been scrolling it as you all are talking, not listening to you at all. Just reading because it was awesome. It is amazing. So I just got to go through this. I have to. Table of contents then a bullet list of pop over features, just a simple, seven points bullet list there. Links over to a demo app, couple lines of how to install and then the usage examples.
Robin Heinze:
There are so many.
Jamon Holmgren:
It's just like, it starts from the simplest. It's like, okay, this is the dead simplest, easiest possible use case, okay, showing pop over from an element. And then it talks about it and it shows a code example, which includes by way all the imports you need. Okay. So you can just copy it in.
Robin Heinze:
That's a huge pet peeve of mine is when there's a code example, but doesn't tell you how to get-
Jamon Holmgren:
The rest of it?
Robin Heinze:
All the rest of it. No, tell me where to import.
Jamon Holmgren:
And then just draw the rest of the owl.
Robin Heinze:
Yeah, exactly.
Jon Major Condon:
Truth be told, when I found this package, I thought it was just a rack package because it felt like home. It felt like there was a lot of documentation there. The only thing that I was missing was storybook. I feel like a lot of-
Robin Heinze:
Are you saying react native data packages are not as good as react packages at documentation?
Jamon Holmgren:
That is exactly what he's saying. [crosstalk 00:31:01]
Jon Major Condon:
I don't mean it like that though.
Jamon Holmgren:
I thought he wasn't reacting, because it was actually good.
Jon Major Condon:
Oh man. But truthfully though, this one, I did feel like, "Oh this is really good." It's different than what I found before, given that this one is a component package. So they have a lot of examples.
Jamon Holmgren:
It's amazing. By the very end it's got way more complex things. But even then, the API is really straightforward and then they have a table with all the props, what type they are, what the default is and a good description of what it does. And then some other stuff, troubleshooting and upgrading of, I don't know, this is an amazing ReadMe. Kudos to steffy dev who is, let's see, sorry, I'm trying to... Peter Steffy, I'm going to follow him on GitHub for a fantastic ReadMe there. That's awesome. Hopefully the library works as well as the ReadMe.
Jon Major Condon:
I'm going to follow him too.
Robin Heinze:
I'm going to star the repository.
Jamon Holmgren:
You didn't used to do that, right?
Robin Heinze:
I am a terrible GitHub star.
Jamon Holmgren:
Like GitHub starrer?
Robin Heinze:
I don't think about it. It's not in my head as a thing that I should do or can do or need to do, but I know I need to start doing it, A, because it's just a good way to support libraries that you like. B, I've discovered that GitHub actually has some cool features for discovering new packages that are sort of smart based on the stuff that you've starred in the past. And so, because I hadn't starred very many things that was pretty sparse.
Jamon Holmgren:
Yeah. How often do you go to github.com? Just github.com.
Robin Heinze:
Not very often, but I did for this podcast.
Jamon Holmgren:
Yeah. And it will show you what activity people you follow. I like to follow people that are interesting on GitHub and then you see-
Robin Heinze:
What they're up to.
Jamon Holmgren:
What they star. Yeah. And so that gives you a lot of cool... we used to have a guy that worked at Manure. We're getting way off the beaten path here. We had a guy who worked at Infinite Red, Steve.
Robin Heinze:
Hi Steve.
Jon Major Condon:
Hey Steve.
Robin Heinze:
You're probably not listening.
Jamon Holmgren:
But he doesn't do react native anymore. But one thing that's cool about Steve is he would go and scroll through this and find interesting packages and then he would dive into them.
Robin Heinze:
He starred so many things. That's what he would do in his downtime.
Jamon Holmgren:
That was his social media.
Robin Heinze:
Read through the ReadMes of cool little packages, make a note to check them out later. Yeah. It was his social media. It was GitHub.
Jamon Holmgren:
It's amazing. I mean he has starred 3,500 libraries.
Robin Heinze:
Oh my goodness.
Jamon Holmgren:
I just went, "What? That's incredible."
Jamon Holmgren:
Cool. Well, we should probably get to my last one, I think. All of the rest of you have given at least two of your many picks, I'm looking at you Robin. My second one is one of my favorite ones for sure. And it's react native gifted chat. I'm a big fan of this. We use this on an app that I actually worked on, I actually did real code on. And I don't remember if I installed this or selected this, but I was the one who kind of implemented the full functionality once it was in there and it is a really good chat interface, UI library. So it allows you to kind of have almost like an iMessage like feel for your app.
Jamon Holmgren:
And then I hooked it up to fire base on the back end. So we could subscribe to new messages that would come in and then display them for the user. And then when you would post a new message, then it would show it as yours. One thing I really liked about it is that it has a good ReadMe. It has a lot of examples. And at the time, at least it had very active responses if I had any issues. So I was pretty impressed with that and it's very full feature. There's a lot to it. You can customize the chat to look how you want it to look. And it just feels how you would expect chat to feel.
Jon Major Condon:
There's a snack playground too.
Jamon Holmgren:
Oh, that's cool. Expo snack. Yeah.
Jon Major Condon:
Yep.
Robin Heinze:
I've used a gifted chat on a different app as well. And I had same experience. It does the difficult part of chat UI for you because chat UI is really hard to do. Keeping track of which side you're supposed to put the bubbles on per based on which user, especially if you're talking about group chat and stuff, can be really difficult. And it handles all that for you and then lets you customize everything else. So it doesn't prescribe what your UI needs to look like. It lets you customize all of that and then just handles the hard stuff for you.
Mazen Chami:
I have not used this library, but just looking at it now and I kind of want to mess around with it and it's pretty cool that you can hook it up to fire base and use it with your own backend and whatnot. That's pretty cool. And it is react native webable according to his docs.
Jamon Holmgren:
Yeah. Yeah. It works well with expo. We actually used it in an expo app. So it works well with expo.
Robin Heinze:
It really has become the default chat UI library.
Jamon Holmgren:
Yeah. I think it's all JavaScript too. So that's helpful. Sometimes it's good to have the native layer, but being all JavaScript just makes it more portable.
Jamon Holmgren:
All right. Well those are our, or at least some of our favorite third party react native libraries. There are a lot that we did not get to because-
Robin Heinze:
We'll have to do another episode like this.
Jamon Holmgren:
I would love to do it. We could do another episode like this. We could do a segment. I don't know. I feel like third party libraries need more love out there in the community. And so definitely wanted to get to that. We don't have time today to get to the what's new with react native newsletter. But actually on Twitter, if you go to @reactive or no, @rnnewsletter, you can see the latest there. We did have a weird bug, but don't have time to get to it.
Robin Heinze:
Don't think. No.
Jamon Holmgren:
Yeah. So we'll try to introduce that later. Where can people find you John Major? Where are you at?
Jon Major Condon:
@johnmajorc. Everywhere.
Jamon Holmgren:
Cool. And Robin?
Robin Heinze:
I'm @robin_heinze on twitter.
Jamon Holmgren:
I'm @jamonholmgren. And then Mazen, where are you at?
Mazen Chami:
@mazenchami, one word.
Jamon Holmgren:
M-A-Z-E-N-C-H-A-M-I, Mazen Chami.
Robin Heinze:
You probably don't have a lot of trouble getting your full name as a username?
Mazen Chami:
No Gmail too.
Jamon Holmgren:
Well now you know how to email Mazen. With any complaints about this episode, that's where they go. And @reactnativerdio on Twitter for the react native radio. Twitter, please do tweet to us and tell us what you think, any compliments on our selections, any complaints that we missed out on something really important. I don't know.
Robin Heinze:
Hey, maybe we'll feature it next time.
Jamon Holmgren:
Yeah, we might absolutely.
Robin Heinze:
Worth the shot.
Jamon Holmgren:
As always thanks to our producer and editor, Todd Werth, our transcript and release coordinator, Jed Bartausky, our social media coordinator, Missy Warren and our designer, Justin Huskey. Thanks to our sponsor, Infinite Red, check us out, infinite.red/reactnative. Special thanks to all of you listening today. Make sure to subscribe and also share this with someone else who you think might be interested in finding out about more third party libraries. The third party ecosystem in react native is pretty awesome. So reminder, we are hiring careers.infinite.red, and we will see you all next time.
Robin Heinze:
Bye.