feat(#32): method that retrieves license metadata from native to JS (#33)

* feat(#32): methods for getting license metadata from native to JS

* Create gorgeous-pillows-ring.md

Author: mateusz1913

.changeset/gorgeous-pillows-ring.md

@@ -0,0 +1,5 @@
+---
+"react-native-legal": minor
+---
+
+Method that retrieves license metadata from native to JS

.github/workflows/lint-swift.yml

@@ -12,7 +12,7 @@ concurrency: ${{ github.workflow }}-${{ github.ref }}
 jobs:
   lint-swift:
     name: Lint Swift
-    runs-on: ubuntu-latest
+    runs-on: macos-15
     steps:
       - name: Checkout Repo
         uses: actions/checkout@v4

.github/workflows/test-e2e-android.yaml

@@ -7,6 +7,7 @@ on:
     paths:
       - '.github/workflows/test-e2e-android.yaml'
       - 'examples/bare-example/e2e/checkLicenses/android.yaml'
+      - 'examples/bare-example/e2e/checkLicenses/android-get-licenses.yaml'
       - 'packages/react-native-legal/**/*.[tj]sx?'
       - 'packages/react-native-legal/android/**'
       - 'packages/licenses-api/**/*.[tj]sx?'
@@ -34,7 +35,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        api-level: [30, 34, 35]
+        api-level: [30, 35]
     steps:
       - name: Enable KVM group perms
         run: |

.github/workflows/test-e2e-ios.yaml

@@ -7,6 +7,7 @@ on:
     paths:
       - '.github/workflows/test-e2e-ios.yaml'
       - 'examples/bare-example/e2e/checkLicenses/ios.yaml'
+      - 'examples/bare-example/e2e/checkLicenses/ios-get-licenses.yaml'
       - 'packages/react-native-legal/**/*.[tj]sx?'
       - 'packages/react-native-legal/ios/**'
       - 'packages/licenses-api/**/*.[tj]sx?'
@@ -34,7 +35,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        simulator: ['iPhone 16 Pro (18.5)', 'iPhone SE (3rd generation) (18.0)']
+        simulator: ['iPhone 16 Pro (18.5)']
     steps:
       - name: Checkout Repo
         uses: actions/checkout@v4

docs/docs/docs/react-native.mdx

@@ -56,6 +56,8 @@ This will extract and prepare license metadata for use in your app.
 
 ## 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:
 
 ```tsx
@@ -78,6 +80,45 @@ function MyComponent() {
 
 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:
+
+```tsx
+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 <Badge text="iOS" type="info" />
 
 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.

examples/bare-example/App.tsx

@@ -1,53 +1,19 @@
-import { Platform, Pressable, StatusBar, StyleSheet, Text, View } from 'react-native';
-import { ReactNativeLegal } from 'react-native-legal';
-
-const BUTTON_BACKGROUND_COLOR = '#8232ff';
-const BUTTON_FONT_COLOR = '#FFF';
-const BUTTON_RIPPLE_COLOR = '#8232ffba';
+import { StatusBar, StyleSheet, View } from 'react-native';
+import { MainScreen } from 'react-native-legal-common-example-ui';
 
 export default function App() {
-  function launchNotice() {
-    ReactNativeLegal.launchLicenseListScreen('OSS Notice');
-  }
-
   return (
     <View style={styles.container}>
-      <Pressable
-        accessibilityRole="button"
-        android_ripple={{
-          color: BUTTON_RIPPLE_COLOR,
-          foreground: true,
-        }}
-        onPress={launchNotice}
-        style={({ pressed }) => [styles.button, pressed && styles.pressed]}
-      >
-        <Text style={styles.label}>Tap to see list of OSS libraries</Text>
-      </Pressable>
+      <MainScreen />
       <StatusBar backgroundColor="transparent" barStyle="dark-content" translucent />
     </View>
   );
 }
 
 const styles = StyleSheet.create({
-  button: {
-    backgroundColor: BUTTON_BACKGROUND_COLOR,
-    borderRadius: 20,
-    overflow: 'hidden',
-    padding: 20,
-  },
   container: {
     flex: 1,
     alignItems: 'center',
     justifyContent: 'center',
   },
-  label: {
-    color: BUTTON_FONT_COLOR,
-    fontSize: 20,
-  },
-  pressed: {
-    opacity: Platform.select({
-      android: 1,
-      default: 0.4,
-    }),
-  },
 });

examples/bare-example/android/app/build.gradle

@@ -124,8 +124,3 @@ dependencies {
 }
 
 apply plugin: 'com.mikepenz.aboutlibraries.plugin'
-
-aboutLibraries {
-    configPath = "config"
-    prettyPrint = true
-}

examples/bare-example/e2e/checkLicenses/android-get-licenses.yaml

@@ -0,0 +1,47 @@
+appId: com.reactnativelegalbareexample
+name: '[Android] Check React Native entry in custom OSS libraries list'
+tags:
+  - pull-request
+  - android
+---
+- launchApp:
+    clearState: true
+    stopApp: true
+- startRecording: 'e2e_results/checkLicenses-getLicences'
+- tapOn: 'Tap to get list of licenses'
+- assertVisible: 'EXIT LIST'
+# workaround for long list issue taking ages to scroll to 'r*' packages (causing a timeout)
+- repeat:
+    times: 3
+    commands:
+      - swipe:
+          start: 50%, 90%
+          end: 50%, 0%
+          duration: 50
+- scrollUntilVisible:
+    element:
+      containsChild: 'react-native'
+      index: 0
+    direction: 'DOWN'
+    timeout: 190000
+    centerElement: true
+    speed: 70
+    visibilityPercentage: 75
+- takeScreenshot: 'e2e_results/getLicenses-react-native_list_element'
+- assertVisible:
+    text: 'react-native'
+    index: 0
+- tapOn:
+    text: 'react-native'
+    index: 0
+- takeScreenshot: 'e2e_results/getLicenses-license_modal'
+- assertVisible: 'EXIT DETAIL VIEW'
+- assertVisible: '.*MIT License.*'
+- assertVisible: '.*Copyright \(c\).*'
+- assertVisible: '.*Permission is hereby granted, free of charge.*'
+- tapOn: 'EXIT DETAIL VIEW'
+- takeScreenshot: 'e2e_results/getLicenses-react-native_back_to_list'
+- assertVisible: 'EXIT LIST'
+- tapOn: 'EXIT LIST'
+- stopRecording
+- killApp

examples/bare-example/e2e/checkLicenses/ios-get-licenses.yaml

@@ -0,0 +1,39 @@
+appId: org.reactjs.native.example.ReactNativeLegalBareExample
+name: '[iOS] Check React Native entry in custom OSS libraries list'
+tags:
+  - pull-request
+  - ios
+---
+- launchApp:
+    clearState: true
+    stopApp: true
+- startRecording: 'e2e_results/checkLicenses-getLicences'
+- tapOn: 'Tap to get list of licenses'
+- assertVisible: 'Exit list'
+# workaround for long list issue taking ages to scroll to 'r*' packages (causing a timeout)
+- repeat:
+    times: 6
+    commands:
+      - swipe:
+          start: 50%, 95%
+          end: 50%, 0%
+          duration: 50
+- scrollUntilVisible:
+    label: Scroll to React Native library
+    element: 'react-native (.*)'
+    direction: 'DOWN'
+    timeout: 100000
+    speed: 80
+    visibilityPercentage: 75
+- takeScreenshot: 'e2e_results/getLicenses-react-native_list_element'
+- tapOn: 'react-native (.*)'
+- takeScreenshot: 'e2e_results/getLicenses-react-native_entry'
+- assertVisible: 'Exit detail view'
+- assertVisible: 'react-native (.*)'
+- assertVisible: '.*MIT License.*'
+- tapOn: 'Exit detail view'
+- takeScreenshot: 'e2e_results/react-native_back_to_list'
+- assertVisible: 'Exit list'
+- tapOn: 'Exit list'
+- stopRecording
+- killApp

examples/bare-example/ios/Podfile.lock

@@ -1510,7 +1510,7 @@ PODS:
     - React-logger (= 0.76.7)
     - React-perflogger (= 0.76.7)
     - React-utils (= 0.76.7)
-  - ReactNativeLegal (1.0.0):
+  - ReactNativeLegal (1.3.1):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -1747,66 +1747,66 @@ SPEC CHECKSUMS:
   glog: 08b301085f15bcbb6ff8632a8ebaf239aae04e6a
   hermes-engine: eb4a80f6bf578536c58a44198ec93a30f6e69218
   LicensePlist: c02e376f57ac50686b1f8bd825c2b9e727fe5fd3
-  RCT-Folly: bf5c0376ffe4dd2cf438dcf86db385df9fdce648
+  RCT-Folly: 84578c8756030547307e4572ab1947de1685c599
   RCTDeprecation: 7691283dd69fed46f6653d376de6fa83aaad774c
   RCTRequired: eac044a04629288f272ee6706e31f81f3a2b4bfe
   RCTTypeSafety: cfe499e127eda6dd46e5080e12d80d0bfe667228
   React: 1f3737a983fdd26fb3d388ddbca41a26950fe929
   React-callinvoker: 5c15ac628eab5468fe0b4dc453495f4742761f00
-  React-Core: 4b90a977a5b2777fd8f4a8db7325a83431ecd2d8
-  React-CoreModules: 385bbacfa34ac9208aa24f239a5184fa7ab1cd28
-  React-cxxreact: 3e09bcdf1f86b931b5e96bf5429d7c274a0ec168
+  React-Core: e467bf49f10da6fe92d915d2311cd0fd9bfbe052
+  React-CoreModules: 0299b3c0782edd3b37c8445ba07bf18ceb73812d
+  React-cxxreact: 54e253030b3b82b05575f19a1fb0e25c049f30ba
   React-debug: 2086b55a5e55fb0abae58c42b8f280ebd708c956
-  React-defaultsnativemodule: 491e2541856e3580dae7f29d80754673a2134e48
-  React-domnativemodule: 4aaed5d5eef3da7d7d49b1f2ae8f422a4d7794b7
-  React-Fabric: 5b8373d1bd34bf269b13529a0ebee0643165ccf8
-  React-FabricComponents: 3f8528c3ed060464a120e161ffaef9307a88817b
-  React-FabricImage: 8efa4e206b1e5cf2e8e1e48fd345619c5c0484f4
+  React-defaultsnativemodule: f80f41ea8c1216917fd224b553291360e0e6a175
+  React-domnativemodule: b14aaaf4afbaa7e1dbc86ad78cbcc71eb59f1faf
+  React-Fabric: 409ce8a065374d737bdbc0fce506dcdda8f51e88
+  React-FabricComponents: bd5faafffd07e56cf217d5417e80ec29348c19d9
+  React-FabricImage: 04d01f3ecfed6121733613a5c794f684e81cb3fb
   React-featureflags: 4503c901bf16b267b689e8a1aed24e951e0b091b
-  React-featureflagsnativemodule: 415168f5d23413fd0cc55ad98c41a3f3f135b2a7
-  React-graphics: c619a6e974baf9a7dbae8442944c7b7408391d46
-  React-hermes: 24bfc254f1ba83182d4936641898fe963af343fb
-  React-idlecallbacksnativemodule: 2c2e4c3f561a98c84a7a68c0d1f868b64ca5f839
-  React-ImageManager: ba9c89729be310413c610444a658fac505253d2c
-  React-jserrorhandler: bf16ea495377b22223bf93f3ef6d0711b9852613
-  React-jsi: ede7e8c96f997f8772871c82688cea53c1ffb148
-  React-jsiexecutor: fc9b287189ce800a92d5ab4e7291508eacaab451
-  React-jsinspector: fa5e8b22102b599c2bb2aeafebbf957a1ab836da
-  React-jsitracing: f38c15aeb910bafcf3ba2e24af8c92e6af4ce1d4
-  React-logger: f9d104eace4ce03d7d5ab96802069d9905082225
-  React-Mapbuffer: 23ffe602d0f5ca53b861ef8534cb8c63c4479671
-  React-microtasksnativemodule: 73fdf0c53b6d50d55de2d5bd9abfb8c006b043a4
+  React-featureflagsnativemodule: 79c980bfc96bcdcc9bd793d49fe75bbfb0e417ad
+  React-graphics: c2febdc940fb3ebdaef082d940b70254ef49c7a1
+  React-hermes: 91baa15c07e76b0768d6e10f4dac1c080a47eef4
+  React-idlecallbacksnativemodule: 5daef402290b91e54a884101b032186c03fa1827
+  React-ImageManager: b258354a48a92168edc41fdc0c14a4310cc4d576
+  React-jserrorhandler: 45d858315f6474dad3912aadb3f6595004dc5f4f
+  React-jsi: 87fa67556d7a82125bc77930bf973717fb726d14
+  React-jsiexecutor: 3a92052dd96cff1cd693fa3ef8d9738b1d05372a
+  React-jsinspector: 05aff7dd91b0685d351cdeb8c151c9f9ec97accd
+  React-jsitracing: 419fa21e8543f5a938b11b5a0bfc257b00dac7a5
+  React-logger: 5cad0c76d056809523289e589309012215a393b5
+  React-Mapbuffer: a381120aea722d2244d4e4b663a10d4c3b2d4e51
+  React-microtasksnativemodule: d9b946675010659cddd1c7611c074216579c8ad3
   React-nativeconfig: 67fa7a63ea288cb5b1d0dd2deaf240405fec164f
-  React-NativeModulesApple: cbf1a34443e1f67b56344547f4b0af69e1c685ba
-  React-perflogger: f02ee21d98773121d77993b3c1a8be445840fae3
-  React-performancetimeline: 7021d68884291b649b4c39ecb71e0fd3a2e53a59
+  React-NativeModulesApple: 34b7a4d7441a4ee78d18109ff107c1ccf7c074a9
+  React-perflogger: d1149037ac466ad2141d4ae541ca16cb73b2343b
+  React-performancetimeline: 6b46b0a17727a3ec22ec4777d156d6b6efc4f8eb
   React-RCTActionSheet: ad84d5a0bd1ad1782f0b78b280c6f329ad79a53a
-  React-RCTAnimation: 388460f7c124c76e337c6646738a83d6ea147095
-  React-RCTAppDelegate: 4661e2a44f7ce1033bf6f373f7d5368b11f5a2be
-  React-RCTBlob: 07cccbb74e22ce66745358799f6ab02a5bed2993
-  React-RCTFabric: 77ebcd07a3c1f3d4c2d2f67f69033a65d16a36a8
-  React-RCTImage: 8fbdae841ea1217c44f4c413bba2403134b83cd1
-  React-RCTLinking: c59bf8286ba2cc327b01bb524fb9c16446dc18bc
-  React-RCTNetwork: 2c137a0aaaed2cf4bb53aff82a2bb8c34f2fbeac
-  React-RCTSettings: 9fcd32c5b38af6421a3dd20cdd9ebf09df0a9a6d
-  React-RCTText: 5308618477fec454282809065bd121c2bd3dd5e1
-  React-RCTVibration: 7b2a186756b5c8e586e3e7948eed4432a93299c0
+  React-RCTAnimation: 64ed42bb43b33b0d861126f83048429606390903
+  React-RCTAppDelegate: de8150cd7e748bd7a98ffc05c88f21c668407ab4
+  React-RCTBlob: e74dfdbbfcd46d9d1eec3b3a0f045e655e3f7861
+  React-RCTFabric: bc0327e719fb12f969ac0e17485ba274b9c2c335
+  React-RCTImage: 1b6d8ad60f74a3cec4ee52e0ca55f1773afd03f4
+  React-RCTLinking: 88b2384d876346fbb16839a60c1d20830b2e95fe
+  React-RCTNetwork: 88aa473814e796d3a7bc6a0b51e7ae5749bdc243
+  React-RCTSettings: 0d73a1846aef87ef07c2026c186ea0d80602a130
+  React-RCTText: bfdb776f849156f895909ee999b4b5f2f9cf9a0b
+  React-RCTVibration: 81c8bbcc841ce5a7ae6e1bd2ec949b30e58d1fcf
   React-rendererconsistency: 65d4692825fda4d9516924b68c29d0f28da3158c
-  React-rendererdebug: 0b97f49d44c91862e1576961faf6bde836ed4eb3
+  React-rendererdebug: ab3696594d3506acc22ecea4dd68ac258c529c2d
   React-rncore: 6aca111c05a48c58189a005cb10a7b52780738dc
-  React-RuntimeApple: aa20633298595444bf2dfbc5246889b4f475b871
-  React-RuntimeCore: 8ac56cc6d82a1090f1d15d48b487c9a5a1d7d915
+  React-RuntimeApple: 5245e8cf30e417fe3e798ed991b938679656ab8f
+  React-RuntimeCore: c79d23b31aded614f4afeaac53f4da37c792c362
   React-runtimeexecutor: 732038d7c356ba74132f1d16253a410621d3c2c1
-  React-RuntimeHermes: a695d944686adc97f85a1b34c31840a0a39e356c
-  React-runtimescheduler: 00666e100e35a13f28fb2fdab22817cf62bbd6a3
+  React-RuntimeHermes: b3b1d7fc42d74141a71ae23fedbc4e07e5a7fbd2
+  React-runtimescheduler: 6e804311c6c9512ffe7f4b68d012767b225c48a1
   React-timing: c2915214b94a62bdf77d2965c31f76bc25b362a5
-  React-utils: 9f9a6a31d703b136eb1614d914c10a3c96b1e6dd
-  ReactCodegen: 5d7e2d2948a6629a51a59ebc99f620e2afb13ee5
-  ReactCommon: 04292c6f596181ebf755e7929d96d2148542b0e8
-  ReactNativeLegal: 3514fb143867dc60703a0a04af5d9c200c8ae83f
+  React-utils: 0342746d2cf989cf5e0d1b84c98cfa152edbdf3f
+  ReactCodegen: ca395237650513af628c32aa1eb8fd586c771b13
+  ReactCommon: 81e0744ee33adfd6d586141b927024f488bc49ea
+  ReactNativeLegal: 8f73754d2e2fe06d3ba76e129654e427f5f3d1d4
   SocketRocket: d4aabe649be1e368d1318fdf28a022d714d65748
   Yoga: 90d80701b27946c4b23461c00a7207f300a6ff71
 
 PODFILE CHECKSUM: d8cf13800dea3fa1eb0928883853c6b37979b1d5
 
-COCOAPODS: 1.15.2
+COCOAPODS: 1.16.2