Quick Start#

Installation#

To get started, install the package using your preferred package manager:

npm install react-native-legal

Setup#

The setup process varies depending on whether you are using Expo or a bare React Native project. Follow the steps below based on your project type.

Expo Projects#

If you are using Expo, you need to add the config plugin to your app.json or app.config.js file:

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

After adding the plugin, rebuild your app using either:

npm expo prebuild

or

npm eas build

This will ensure the required native dependencies are included.

Bare React Native Projects#

For bare React Native projects, you need to run the CLI plugin to generate and include license data. Run the following command from your project root:

npm react-native legal-generate

This will extract and prepare license metadata for use in your app.

Usage#

Once the setup is complete, you can easily add a button to your app to display the list of open-source licenses:

import * as React from 'react';
import { Button, View } from 'react-native';
import { ReactNativeLegal } from 'react-native-legal';

function launchNotice() {
  ReactNativeLegal.launchLicenseListScreen('OSS Notice');
}

function MyComponent() {
  return (
    <View>
      <Button 
        onPress={launchNotice} 
        title="Open source licenses" 
      />
    </View>
  );
}

This will open a native screen listing all detected licenses. The title of the screen can be customized by passing a different string argument to launchLicenseListScreen().

License Display in Settings iOS#

On iOS, all detected licenses will also appear in the Settings app under the app's information section. This is done to comply with Apple's guidelines, which require apps to provide open-source license acknowledgments in a visible location.

Monorepo Support#

react-native-legal scans dependencies from workspace packages with the workspace:* notation in your package.json in addition to the app's direct dependencies.