Shopping External Libs in React Native
How to find existing 3rd party work in React Native
So someone comes up with a great feature for the app you’re writing, but there’s one big problem. You could spend a week building the feature, and you might be reinventing the wheel. Sounds like it’s time to see what’s on the shelf!
First Stop: JS Coach
We’re going to start with code that’s geared towards React Native. You may have seen React.parts before, which has now switched over to the far superior JS Coach. Why is JS Coach better? It doesn’t depend on people having to submit their libraries. It has one of my libs indexed, and I haven’t sent that anywhere yet, so I assume it crawls Github and NPM with an opinionated quality check. Also, the filter options are fantastic for those with specific platform needs.
You can follow JSCoach on twitter for the latest hotness. Big thumbs up on this project 👍
If you’re still hungry, you can start digging deeper into Github with Dotan Nahum’s Awesome React Native list. These repos are always fun, but a bit harder to keep up to date. Kudos to Dotan and Denis Stoyanov (owner of Awesome Redux), who maintain such monolithic repos for the community. Their sacrifice is our gain.
What if that didn’t work?
Can’t find it on anything for React Native on Github? Nexxxxxxxt!
Second Stop: Cordova?
Say we need a barcode scanner or some other common mobile tool. Someone has to have built this already, right? At this stage you can consider if it’s worth bringing in a Cordova plugin. WHAT!?
Because of a friendly repo by Microsoft’s Parashuram, you can bring a powerful Cordova plugin straight into React Native! Currently, Android only, but I believe he’s working on iOS as I type this :)
WARNING: Please take a moment to consider if this is adding more headache than help. Use this option with consideration of your app goals.
There’s over 1,000 plugins available, so the land is vast!
Enjoy Ram’s React Native Cordova Plugin Repo. Ram leads up VSCode’s React Native support, which is working towards being a significant contender for React Native editors. You’ll hear more about VSCode if you haven’t already.
Third Stop: Pods and Gradles
On iOS, you can import from a vast library of Pods, and in Android, Gradle! Yes, you’ll have to do some work on the bridge now, but at least you’re not alone or writing from scratch!
If you are trying to build for iOS, search https://cocoapods.org/ for some amazing functionality and tens of thousands of work hours at your fingertips! To integrate a pod into React Native, review this blog post.
If you are trying to build for Android, search https://android-arsenal.com/ or another AWESOME repo! To integrate your gradle code into React Native, review this blog post.
If you’re looking for parity, you can select and wrap both! Then — hey — release it as an open source project!
LAST STOP FAILSAUCE?
NOTHING IS OUT THERE.
The open sourced mall of options has failed us! Don’t cry into that stuffed animal! Time to step up (to the streets optional). It’s not that hard to get started and be a creator.
Starting from Scratch
The two articles I mentioned above about wrapping pods/gradles are a great start for writing from scratch. Combine that with this friendly beginning article by Facebook, and you should be ready to code. Chances are, someone wrote what you need in native code somewhere! Check stack-overflow, books, and online articles.
Once you’ve found, written, or summoned your code into existence, move your solution to an external package that you include. That way you’re saving the next poor soul from writing everything from scratch. I haven’t tried it yet, but Johannes Stein’s starter kit for writing iOS/Android/Windows NPM modules looks amazing! I wish this were around sooner.
Check it out here! https://github.com/frostney/react-native-create-library
About Gant
Gant Laborde is Technical Lead at Infinite Red (⚙ web and mobile app dev ⚙), published author, public speaker, and mad-scientist in training. Read the writings of Gant and his co-workers in our Red Shift publication. If you’re looking to discuss nerdy tech, he’s all ears. View half-witty half-groan technical tweets with @GantLaborde on twitter.
