React Native is an excellent framework for building mobile apps. The best thing about React Native is how it provides the developers with a solid set of primitive UI components. This means there's plenty of opportunities for you to build your own library and publish it to the open-source community.
The Problem
Building & maintaining quality open-source libraries is hard work. Especially React Native libraries are harder since they often need to be verified on both Android & iOS platforms.
I ran into this exact issue when I started working on open-sourcing the libraries I built for my personal use. I created an organization that holds the collection of the libraries. It's called React Native Toolkit
I wanted to ensure developers get to try out all my libraries, at the same time, I should be able to quickly make small updates and bug fixes without having to spend too much time.
In summary, I wanted to ensure I covered all the following 6 items for my open-source libraries,
- Proper Linting of code & commit messages
- A working example in an actual app
- Unit tests
- Detailed documentation that covers all the use cases
- Visual testing after code changes
- Easily review PRs
Solution
Once I have created a list of things needed for my open source projects, I started exploring various tools that'll help me achieve the individual targets.
So I started working on my library react-native-better-image while evaluating the various options. I had two major tasks
- Picking the right tools
- Automate as many tasks as possible
Picking the right tools
React Native Community's Bob - Linting + Example App
This almost felt like a no-brainer. React Native Community which hosts a collection of quality libraries already had a tool which would make building react native libraries so much simpler.
Bob had almost everything I needed in terms of Proper Linting & having a working example app using the library.
The example app is also pre-linked with the library's source so you can just start writing code and you probably won't have to worry about anything. Just import your library inside the app & setup your working example!
That's 2 out of 6 items covered
Alternatives
One other alternative I tried in this category is create-react-native-module. This one is good but bob is just too better.
React Native Testing Library - Unit Tests
I'm a big fan of the testing library in general. It encourages you to write tests in the way your software is being used rather than being implemented. Which is why I immediately picked up the React Native Testing Library that brings all the best parts to the native side of development.
If your library uses native iOS or Android code, then you'll have to write tests that run on the native side. However, since all my libraries are pure JavaScript, I didn't explore any on the native side. Suggest the tools you use for this purpose in the comments :)
That's 3 out of 6 items covered
Alternatives
If your library requires an end to end testing, then you can add detox to your project. You can use the example app created by Bob to run the test cases.
Another common library for writing unit tests is Enzyme. If you are already familiar with enzyme then you can use it for your library.
Storybook - Documentation
Storybook v6.0 was recently released with improved documentation. While storybook already has a React Native version, the react version is much more powerful & better suited for our documentation.
The documentation can be hosted a static site & it will showcase your library in real-time. Check out my react-native-better-image documentation.
To get storybook working with your React Native library, you can add it to your example expo app following this example from the expo team.
I only had to change the webpack config in my .storybook/main.js file and it worked well using react-native-web
4 out of 6 now covered
Alternatives
I haven't personally tried any alternatives to storybook yet. Maybe you can read about it in this blog post by logrocket.
Chromatic - Visual Testing
One other reason I was firmly sticking to storybooks is their integration with chromatic. Chromatic lets you quickly do visual tests on your stories. You can also easily share stories & get feedback from others.
They have a generous free tier & their team is kind enough to provide me support when I ran into issues with my react-native + storybook setup.
I'll be using chromatic for reviewing PRs, will explain about it in the automation section.
Chromatic makes visual testing a breeze! That makes 5 out of 6 items handled
Expo Cli - Reviewing PRs
Reviewing PRs is the most important thing in Open Source projects. I have been struggling to review PRs in some of my old projects as I have to manually clone & run the code to check how it affects my library. Many times I just don't have the bandwidth to do so...
This time, however, I have decided to make the reviewing process as easy as possible. The trick is to have a good example application in your library that covers almost all use cases. Once someone raises a PR, you can generate a build using the Expo CLI. Expo team has been making this process a lot easier by creating a Github Action that can easily publish a review version of your library.
Along with this, the stories in the PR are also pushed to chromatic. This means I should be able to review a PR fairly faster. I haven't yet received any PRs yet, so fingers crossed 🤞
Automating stuff with Github Actions
Now that we have all the right tools in place, it is time to automate the Build, Review & Publishing process for your new React Native library. Which will be covered in the next part of this series!
Top comments (0)