#React Native Legal

#Installation

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

npm install react-native-legal

yarn add react-native-legal

pnpm add react-native-legal

bun add react-native-legal

deno add npm:react-native-legal

Android	iOS	AndroidTV	tvOS

#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:

npx expo prebuild

yarn expo prebuild

pnpm expo prebuild

bun expo prebuild

deno run -A npm:expo prebuild

or

npx eas build

yarn eas build

pnpm eas build

bun eas build

deno run -A npm:eas build

This will ensure the required native dependencies are included.

#Expo Plugin Options

{
  "expo": {
+   "plugins": [
+     [
+       "react-native-legal",
+       {
+         "devDepsMode": "root-only",
+         "includeOptionalDeps": true,
+         "transitiveDepsMode": "all"
+       }
+     ]
+   ]
  }
}

interface PluginOptions {
  // `'root-only'` (only direct devDependencies from the scanned project's root package.json)
  // `'none'` (no devDependencies included)
  // @default `'none'`
  devDepsMode?: 'root-only' | 'none';
  // @default `true`
  includeOptionalDeps?: boolean;
  // `'all'` (all transitive dependencies of direct dependencies)
  // `'from-external-only'` (only transitive dependencies of direct dependencies specified by non-workspace:... specifiers)
  // `'from-workspace-only'` (only direct dependencies of direct dependencies specified by `workspace:` specifier)
  // `'none'` (no transitive dependencies of direct dependencies)
  // @default `'all'`
  transitiveDepsMode?: 'all' | 'from-external-only' | 'from-workspace-only' | 'none';
}

#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:

npx react-native legal-generate

yarn react-native legal-generate

pnpm react-native legal-generate

bun react-native legal-generate

deno run -A npm:react-native legal-generate

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

#Bare React Native Plugin Options

#Usage

#Builtin list screen

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().

#Retrieving licenses metadata and custom UI

If you want to handle the UI yourself, you can get the licenses metadata and display it with your custom UI:

import * as React from 'react';
import { FlatList, Text, View } from 'react-native';
import type { Library } from 'react-native-legal';
import { ReactNativeLegal } from 'react-native-legal';

function keyExtractor(item: Library) {
  return item.id;
}

function renderItem({ item }: ListRenderItemInfo<Library>) {
  return <Text>{item.name}</Text>;
}

function MyComponent() {
  const [libraries, setLibraries] = React.useState<Library[]>([]);

  React.useEffect(() => {
    async function getLibraries() {
      const result = await ReactNativeLegal.getLibrariesAsync();

      setLibraries(result.data);
    }

    getLibraries();
  }, []);

  return (
    <View>
      <FlatList data={libraries} keyExtractor={keyExtractor} renderItem={renderItem} />
    </View>
  );
}

#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.

#Node.js / Non-RN Projects Support

If you want to use the license management functionality in a Node.js project or any non-React Native application, you can either:

• use the license-kit CLI tool, which is a standalone tool that can be used in any Node.js project to generate license metadata - see this section for more details
• programmatically use the @callstack/licenses package, which exposes the core functionalities of this tool - see this section for more details

#Additional details

For more notes on the mechanics of the tool, please see core additional details section.

#Known Limitations

For a list of known limitations, please see the Known Limitations section in @callstack/licenses's documentation.