How to never forget to thank open source projects in your React Native app

How I programmatically added attributions to open source libraries in a React Native app.

Published in

Life in Belka

4 min readJun 17, 2019

As developers we live in a world where P2P communication and sharing is everything. We ask something on StackOverflow and wait until someone shows up, we look for free libraries on GitHub to save time and have a good implementation of a function and so on. All is given for granted. But is it?

My journey starts here: a JIRA issue on the project I was developing at work.

FIC-87 : As a [User] I would like to see which open source libraries are being used by the app.

Until that moment I had never realised how important attribution was for the open source world. I started thinking how could I push other developers to credit other peers that gave them something for free and avoid my own mistake!

The company I work for, Belka, is developing the mobile app for Fatture in Cloud, the major invoicing management app in Italy. The app is written in React Native + Typescript. It includes many open source libraries such as Wix Navigation, RNFetchBlob and many others that RN developers surely know.

So, how do we thank all these developers in a quick and efficient way?

There are plenty of ways to do this in Android but I was searching a way to do it in React Native. After a long search I found a library, npm-license-crawler, that could help me. Mwitting, the guy that posted it on GitHub, wrote pretty straightforward instructions:

1. The Boring Way

The first way to do this is running a command from our terminal and waiting for the list to be exported. The first step, as always, is to install the library via npm from the command line:

npm i npm-license-crawler -g

The next step is to run the command from your project’s main folder, where the package.json is. There, you can set a bunch of settings on what dependencies to include, which paths should be included in the search and many other things.

The one I used creates the json file “licenses” and exports only the direct dependencies.

npm-license-crawler -onlyDirectDependencies -json licenses.json

2. The cool way

Developers usually keep adding new libraries in their projects so the risk could be that they forget some libraries and — let’s be honest — running that command over and over would be really boring.

With few lines of code is possible to fix this:

var crawler = require('npm-license-crawler'),
    options = {
        start: ['../..'],
        exclude: ['.'],
        json: 'licenses.json',
        unknown: true
    };

crawler.dumpLicenses(options,
    function(error, res){
        if (error) {
            console.error("Error:", error);
        }
        else {
            console.dir(res);
        }
    }
);

This cool function above generate the licenses.json with a structure similar to the one below each time the user open the screen.

"@babel/runtime@7.0.0": {"licenses": "MIT",
"repository":"https://github.com/babel/babel/tree/master/packages/babel-runtime",
"licenseUrl":"https://github.com/babel/babel/tree/master/packages/babel-runtime/raw/master/LICENSE",
"parents": "FattureInCloud"}

So we have a nice object with repository, licenseUrl, name and version of the library we used.

3. Bonus: the coooler way

If you don’t want to generate the file manually or each time the user open the list you can use a cooler way: add the command in the postinstall script after yarn or npm ones.

To do so, go to the package.json file of your project and add the command of our crawler library. In my case there were already something I told the terminal to do so it is enough to add && after.

..."scripts": {
"postinstall": "npm-license-crawler -onlyDirectDependencies -json licenses.json",...},

Doing so you will update the library list each time you will run yarn install on your machine.

Wrap it up with React Native!

Whether you used the boring or the cool way you will end having a file with all the licenses.

In React Native you can create a component with a FlatList and use some simple regex to tidy it up.

The Gist above is an example that renders this list:

Pretty easy, isn’t it?

You have no more excuses! Go say thanks to all the developers that helped you build your app!