feat(example): get tracks from directory

Author: zeevenn

example/package.json

@@ -10,6 +10,7 @@
     "build:ios": "react-native build-ios --mode Debug"
   },
   "dependencies": {
+    "@react-native-documents/picker": "^10.1.3",
     "react": "19.0.0",
     "react-native": "0.79.2",
     "react-native-permissions": "^5.4.0"

example/src/TrackList.tsx

@@ -7,17 +7,30 @@ import {
   StyleSheet,
   Image,
 } from 'react-native';
-import { globalStyles } from './Styles';
 import { getTracksAsync } from '@nodefinity/react-native-music-library';
 import { useState } from 'react';
 import type { Track } from '../../src/NativeMusicLibrary';
+import { usePermission } from './usePermission';
+import { pickDirectory } from '@react-native-documents/picker';
 
 export default function TrackList() {
   const [tracks, setTracks] = useState<Track[]>([]);
   const [loading, setLoading] = useState(false);
+  const { permissionStatus, requestPermissions } = usePermission();
 
   const getAllTracks = async () => {
     try {
+      if (!permissionStatus?.granted) {
+        const result = await requestPermissions();
+        if (!result.granted) {
+          Alert.alert(
+            'Error',
+            'Can not request permission again, please grant audio permission manually'
+          );
+          return;
+        }
+      }
+
       setLoading(true);
       const startTime = Date.now();
       const results = await loadAllTracks();
@@ -76,15 +89,46 @@ export default function TrackList() {
     </View>
   );
 
+  const getTracksFromPickedDirectory = async () => {
+    try {
+      const { uri } = await pickDirectory({
+        requestLongTermAccess: false,
+      });
+
+      console.log('uri', uri);
+
+      if (!uri) return;
+
+      const results = await getTracksAsync({
+        first: 100,
+        directory: uri,
+      });
+
+      Alert.alert(
+        'Success',
+        `Picked ${results.items.length} tracks from:\n${uri}`
+      );
+    } catch (err) {
+      Alert.alert('Error', err as string);
+    } finally {
+      setLoading(false);
+    }
+  };
+
   return (
     <>
-      <View style={globalStyles.buttonContainer}>
-        <View style={globalStyles.buttonSpacer} />
+      <View style={styles.buttonContainer}>
         <Button
           title={`${loading ? 'loading...' : ''} get all tracks`}
           onPress={getAllTracks}
           disabled={loading}
         />
+
+        <Button
+          title={`${loading ? 'loading...' : ''} get tracks from directory`}
+          onPress={getTracksFromPickedDirectory}
+          disabled={loading}
+        />
       </View>
 
       {tracks.length > 0 && (
@@ -100,6 +144,11 @@ export default function TrackList() {
 }
 
 const styles = StyleSheet.create({
+  buttonContainer: {
+    width: '100%',
+    maxWidth: 300,
+    gap: 10,
+  },
   list: {
     flex: 1,
     width: '100%',

yarn.lock

@@ -2859,6 +2859,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@react-native-documents/picker@npm:^10.1.3":
+  version: 10.1.3
+  resolution: "@react-native-documents/picker@npm:10.1.3"
+  peerDependencies:
+    react: "*"
+    react-native: "*"
+  checksum: 2b1957bf3998a077e3dcf70a2fe8896a2c3c73101d8caef215eafc8525ad12d3380c7d5919752f55a3fa89a9a42f52b98b602e951f4a8a3a96259fba21b19042
+  languageName: node
+  linkType: hard
+
 "@react-native/assets-registry@npm:0.79.2":
   version: 0.79.2
   resolution: "@react-native/assets-registry@npm:0.79.2"
@@ -10589,6 +10599,7 @@ __metadata:
     "@react-native-community/cli": 18.0.0
     "@react-native-community/cli-platform-android": 18.0.0
     "@react-native-community/cli-platform-ios": 18.0.0
+    "@react-native-documents/picker": ^10.1.3
     "@react-native/babel-preset": 0.79.2
     "@react-native/metro-config": 0.79.2
     "@react-native/typescript-config": 0.79.2