React Native Legal: Zero-Config OSS License Screens for Your App

Open source libraries are everywhere in mobile development. As React Native developers, we especially thrive on OSS, but we often don’t realize that by using free software, we’re obligated to give it a certain kind of acknowledgement. And a NOTICE file or internal documentation is not enough. Licenses like MIT, BSD, or Apache 2.0 often require acknowledgement in the app itself.

We’ve observed that developers either do it manually (when approached by people from the legal department, they didn’t even know it existed) or don’t do it at all, hoping for the best.

Callstack engineers working for enterprise clients many times experienced such a task. What they typically did then was write some custom scripts for crawling node_modules and tying it together with platform-native tools for iOS and Android, such as LicensePlist, to get the data and present it in a way that feels right for the platform. That’s a lot of repetitive work that not only we, but likely many other React Native developers out there, do.

That’s why we built React Native Legal—a zero-config, cross-platform tool that handles license metadata generation and in-app display for you. All with a single command.

Meet React Native Legal

React Native Legal uses native-standard tools under the hood, such as AboutLibraries for Android and LicensePlist for iOS, orchestrating it from a command-line interface. Run a single command, and you’ll get up-to-date license metadata for all your direct and transitive dependencies.

In addition to that metadata, it gives your app a native-style “Used open source libraries” screen on all major platforms: iOS, Android, tvOS, and AndroidTV, which you can display however you like. For iOS, it will register this screen inside the app’s settings page in the Settings app.

How to get started with React Native Legal

To get started with React Native Legal, install it using:

npm install react-native-legal

Expo CLI projects

When in Expo app, just add the ^{react-native-legal} config plugin in your ^app.json:

{
  "expo": {
    "plugins": [
+      "react-native-legal"
    ]
  }
}

Then rebuild with npx expo prebuild or eas build, and you’re good to go.

This library can't be used in the "Expo Go" app because it requires custom native code.

React Native Community CLI projects

When in the Community CLI app, run the following command to generate license metadata:

npx react-native legal-generate

Run it every time you add a new dependency or before building the native app, ideally automated with an npm-script.

Displaying the OSS Licenses screen

Now you can use ReactNativeLegal.launchLicenseListScreen() method to display the list of OSS libraries used in your app:

import { Button } from 'react-native';
import { ReactNativeLegal } from 'react-native-legal';

<Button
  title="Open Source Licenses"
  onPress={() =>
	  ReactNativeLegal.launchLicenseListScreen('Open Source Licenses')
	}
/>

And that’s it. When pressing that button, or accessing from iOS app Settings page, you’ll get a list of all available libraries and their license text.

Give it a try

Acknowledging your app’s dependencies isn’t optional—it’s a professional standard. With React Native Legal, it’s finally easy to do the right thing. Try it in your app, star the repository on GitHub, and let us know your experience. We’re always looking for feedback to make the developer experience better for everyone.