feat: example app

AndersonVanzo · Feb 18, 2024 · cc4cca7 · cc4cca7
1 parent 252d896
commit cc4cca7
Show file tree

Hide file tree

Showing 8 changed files with 170 additions and 105 deletions.
diff --git a/example/android/app/src/main/AndroidManifest.xml b/example/android/app/src/main/AndroidManifest.xml
@@ -1,25 +1,28 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android">
 
     <uses-permission android:name="android.permission.INTERNET" />
+    <uses-permission android:name="android.permission.READ_MEDIA_AUDIO" />
+    <uses-permission
+        android:name="android.permission.READ_EXTERNAL_STORAGE"
+        android:maxSdkVersion="32" />
 
     <application
-      android:name=".MainApplication"
-      android:label="@string/app_name"
-      android:icon="@mipmap/ic_launcher"
-      android:roundIcon="@mipmap/ic_launcher_round"
-      android:allowBackup="false"
-      android:theme="@style/AppTheme">
-      <activity
-        android:name=".MainActivity"
+        android:name=".MainApplication"
+        android:allowBackup="false"
+        android:icon="@mipmap/ic_launcher"
         android:label="@string/app_name"
-        android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|uiMode"
-        android:launchMode="singleTask"
-        android:windowSoftInputMode="adjustResize"
-        android:exported="true">
-        <intent-filter>
-            <action android:name="android.intent.action.MAIN" />
-            <category android:name="android.intent.category.LAUNCHER" />
-        </intent-filter>
-      </activity>
+        android:roundIcon="@mipmap/ic_launcher_round"
+        android:theme="@style/AppTheme">
+        <activity
+            android:name=".MainActivity"
+            android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|uiMode"
+            android:exported="true"
+            android:launchMode="singleTask"
+            android:windowSoftInputMode="adjustResize">
+            <intent-filter>
+                <action android:name="android.intent.action.MAIN" />
+                <category android:name="android.intent.category.LAUNCHER" />
+            </intent-filter>
+        </activity>
     </application>
 </manifest>
diff --git a/example/app.json b/example/app.json
@@ -1,4 +1,4 @@
 {
-  "name": "MusicLibraryExample",
-  "displayName": "MusicLibraryExample"
+    "name": "MusicLibraryExample",
+    "displayName": "MusicLibraryExample"
 }
diff --git a/example/babel.config.js b/example/babel.config.js
@@ -1,17 +1,17 @@
-const path = require('path');
-const pak = require('../package.json');
+const path = require("path");
+const pak = require("../package.json");
 
 module.exports = {
-  presets: ['module:@react-native/babel-preset'],
-  plugins: [
-    [
-      'module-resolver',
-      {
-        extensions: ['.tsx', '.ts', '.js', '.json'],
-        alias: {
-          [pak.name]: path.join(__dirname, '..', pak.source),
-        },
-      },
+    presets: ["module:@react-native/babel-preset"],
+    plugins: [
+        [
+            "module-resolver",
+            {
+                extensions: [".tsx", ".ts", ".js", ".json"],
+                alias: {
+                    [pak.name]: path.join(__dirname, "..", pak.source),
+                },
+            },
+        ],
     ],
-  ],
 };
diff --git a/example/jest.config.js b/example/jest.config.js
@@ -1,3 +1,3 @@
 module.exports = {
-  preset: 'react-native',
+    preset: "react-native",
 };
diff --git a/example/metro.config.js b/example/metro.config.js
@@ -1,10 +1,10 @@
-const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
-const path = require('path');
-const escape = require('escape-string-regexp');
-const exclusionList = require('metro-config/src/defaults/exclusionList');
-const pak = require('../package.json');
+const { getDefaultConfig, mergeConfig } = require("@react-native/metro-config");
+const path = require("path");
+const escape = require("escape-string-regexp");
+const exclusionList = require("metro-config/src/defaults/exclusionList");
+const pak = require("../package.json");
 
-const root = path.resolve(__dirname, '..');
+const root = path.resolve(__dirname, "..");
 const modules = Object.keys({ ...pak.peerDependencies });
 
 /**
@@ -14,32 +14,29 @@ const modules = Object.keys({ ...pak.peerDependencies });
  * @type {import('metro-config').MetroConfig}
  */
 const config = {
-  watchFolders: [root],
+    watchFolders: [root],
 
-  // We need to make sure that only one version is loaded for peerDependencies
-  // So we block them at the root, and alias them to the versions in example's node_modules
-  resolver: {
-    blacklistRE: exclusionList(
-      modules.map(
-        (m) =>
-          new RegExp(`^${escape(path.join(root, 'node_modules', m))}\\/.*$`)
-      )
-    ),
+    // We need to make sure that only one version is loaded for peerDependencies
+    // So we block them at the root, and alias them to the versions in example's node_modules
+    resolver: {
+        blacklistRE: exclusionList(
+            modules.map(m => new RegExp(`^${escape(path.join(root, "node_modules", m))}\\/.*$`)),
+        ),
 
-    extraNodeModules: modules.reduce((acc, name) => {
-      acc[name] = path.join(__dirname, 'node_modules', name);
-      return acc;
-    }, {}),
-  },
+        extraNodeModules: modules.reduce((acc, name) => {
+            acc[name] = path.join(__dirname, "node_modules", name);
+            return acc;
+        }, {}),
+    },
 
-  transformer: {
-    getTransformOptions: async () => ({
-      transform: {
-        experimentalImportSupport: false,
-        inlineRequires: true,
-      },
-    }),
-  },
+    transformer: {
+        getTransformOptions: async () => ({
+            transform: {
+                experimentalImportSupport: false,
+                inlineRequires: true,
+            },
+        }),
+    },
 };
 
 module.exports = mergeConfig(getDefaultConfig(__dirname), config);
diff --git a/example/package.json b/example/package.json
@@ -1,28 +1,28 @@
 {
-  "name": "react-native-music-library-example",
-  "version": "0.0.1",
-  "private": true,
-  "scripts": {
-    "android": "react-native run-android",
-    "ios": "react-native run-ios",
-    "start": "react-native start",
-    "build:android": "cd android && ./gradlew assembleDebug --no-daemon --console=plain -PreactNativeArchitectures=arm64-v8a",
-    "build:ios": "cd ios && xcodebuild -workspace MusicLibraryExample.xcworkspace -scheme MusicLibraryExample -configuration Debug -sdk iphonesimulator CC=clang CPLUSPLUS=clang++ LD=clang LDPLUSPLUS=clang++ GCC_OPTIMIZATION_LEVEL=0 GCC_PRECOMPILE_PREFIX_HEADER=YES ASSETCATALOG_COMPILER_OPTIMIZATION=time DEBUG_INFORMATION_FORMAT=dwarf COMPILER_INDEX_STORE_ENABLE=NO"
-  },
-  "dependencies": {
-    "react": "18.2.0",
-    "react-native": "0.73.4"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.20.0",
-    "@babel/preset-env": "^7.20.0",
-    "@babel/runtime": "^7.20.0",
-    "@react-native/babel-preset": "0.73.21",
-    "@react-native/metro-config": "0.73.5",
-    "@react-native/typescript-config": "0.73.1",
-    "babel-plugin-module-resolver": "^5.0.0"
-  },
-  "engines": {
-    "node": ">=18"
-  }
+    "name": "react-native-music-library-example",
+    "version": "0.0.1",
+    "private": true,
+    "scripts": {
+        "android": "react-native run-android",
+        "ios": "react-native run-ios",
+        "start": "react-native start",
+        "build:android": "cd android && ./gradlew assembleDebug --no-daemon --console=plain -PreactNativeArchitectures=arm64-v8a",
+        "build:ios": "cd ios && xcodebuild -workspace MusicLibraryExample.xcworkspace -scheme MusicLibraryExample -configuration Debug -sdk iphonesimulator CC=clang CPLUSPLUS=clang++ LD=clang LDPLUSPLUS=clang++ GCC_OPTIMIZATION_LEVEL=0 GCC_PRECOMPILE_PREFIX_HEADER=YES ASSETCATALOG_COMPILER_OPTIMIZATION=time DEBUG_INFORMATION_FORMAT=dwarf COMPILER_INDEX_STORE_ENABLE=NO"
+    },
+    "dependencies": {
+        "react": "18.2.0",
+        "react-native": "0.73.4"
+    },
+    "devDependencies": {
+        "@babel/core": "^7.20.0",
+        "@babel/preset-env": "^7.20.0",
+        "@babel/runtime": "^7.20.0",
+        "@react-native/babel-preset": "0.73.21",
+        "@react-native/metro-config": "0.73.5",
+        "@react-native/typescript-config": "0.73.1",
+        "babel-plugin-module-resolver": "^5.0.0"
+    },
+    "engines": {
+        "node": ">=18"
+    }
 }
diff --git a/example/react-native.config.js b/example/react-native.config.js
@@ -1,10 +1,10 @@
-const path = require('path');
-const pak = require('../package.json');
+const path = require("path");
+const pak = require("../package.json");
 
 module.exports = {
-  dependencies: {
-    [pak.name]: {
-      root: path.join(__dirname, '..'),
+    dependencies: {
+        [pak.name]: {
+            root: path.join(__dirname, ".."),
+        },
     },
-  },
 };
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -1,27 +1,92 @@
-import * as React from "react";
+import React from "react";
+import { FlatList, Image, PermissionsAndroid, StyleSheet, Text, View } from "react-native";
+import { loadMusicFiles } from "react-native-music-library";
+import type { MusicFile } from "../../src/NativeMusicLibrary";
 
-import { StyleSheet, Text, View } from "react-native";
-import { multiply } from "react-native-music-library";
+export default function App() {
+    const [files, setFiles] = React.useState<MusicFile[]>([]);
 
-const result = multiply(3, 7);
+    const getPermissions = async () => {
+        const permission = await PermissionsAndroid.request(
+            PermissionsAndroid.PERMISSIONS.READ_MEDIA_AUDIO!,
+        );
+        return permission === PermissionsAndroid.RESULTS.GRANTED;
+    };
+
+    const loadFiles = async () => {
+        const hasPermission = await getPermissions();
+        if (!hasPermission) {
+            console.log("don't have permission");
+            return;
+        }
+        const response = await loadMusicFiles();
+        setFiles(response);
+    };
+
+    React.useEffect(() => {
+        loadFiles();
+    }, []);
 
-export default function App() {
     return (
         <View style={styles.container}>
-            <Text>Result: {result}</Text>
+            <FlatList
+                data={files}
+                contentContainerStyle={styles.listContent}
+                renderItem={({ item }) => (
+                    <View key={item.id} style={styles.itemBox}>
+                        {item.artwork ? (
+                            <Image source={{ uri: item.artwork }} style={styles.coverBox} />
+                        ) : (
+                            <View style={styles.coverBox} />
+                        )}
+                        <View style={styles.infoBox}>
+                            <Text style={styles.title}>{item.title}</Text>
+                            <Text style={styles.album}>{item.album}</Text>
+                        </View>
+                    </View>
+                )}
+            />
         </View>
     );
 }
 
 const styles = StyleSheet.create({
     container: {
+        backgroundColor: "#FFFFFF",
+        flex: 1,
+    },
+    listContent: {
+        padding: 16,
+    },
+    itemBox: {
+        backgroundColor: "#FFFFFF",
+        borderColor: "#EFEFEF",
+        borderRadius: 16,
+        borderWidth: 1,
+        elevation: 5,
+        flexDirection: "row",
+        gap: 8,
+        padding: 8,
+        shadowColor: "#7F7F7F",
+        width: "100%",
+    },
+    coverBox: {
+        backgroundColor: "#333333",
+        borderRadius: 8,
+        height: 56,
+        width: 56,
+    },
+    infoBox: {
         flex: 1,
-        alignItems: "center",
         justifyContent: "center",
     },
-    box: {
-        width: 60,
-        height: 60,
-        marginVertical: 20,
+    title: {
+        fontSize: 16,
+        fontWeight: "500",
+    },
+    album: {
+        fontSize: 12,
+        fontStyle: "italic",
+        fontWeight: "300",
     },
 });