Update docs

README.md

@@ -6,11 +6,13 @@ Bring material color utilities from the [`@material-foundation/material-color-ut
 
 ![screenshot](https://github.com/RakaDoank/material-color-react-native/blob/main/docusaurus/static/img/screenshot.png?raw=true)
 
+> A sample video at this [Reddit post](https://www.reddit.com/r/reactnative/comments/1scy9zw/material_colors_from_image_in_react_native/)
+
 ## Motives
 
-Basically, this library is similar as other libraries you can found to build material color, as [The Science of Color & Design](https://m3.material.io/blog/science-of-color-design) has been done by a Google engineer including their [source code](https://github.com/material-foundation/material-color-utilities), but the inexistence of the utility for building material color from an image for React Native especially on Android, iOS (including macOS) is really the main motive why [`material-color-react-native`](https://github.com/RakaDoank/material-color-react-native) was created.
+Basically, this library is similar as other libraries you can found to build material color, as [The Science of Color & Design](https://m3.material.io/blog/science-of-color-design) has been done by a Google engineer including their [source code](https://github.com/material-foundation/material-color-utilities), but the inexistence of the utility for building material color from an image for React Native especially on Android, iOS (including macOS) is really the main motive why `material-color-react-native` was created.
 
-Bringing the material color utility from an image is a personal challenge. Previously, I have to use [React Native Skia](https://github.com/Shopify/react-native-skia) on Android app to get a Bitmap from an image, because the original [source code](https://github.com/material-foundation/material-color-utilities) from Material Foundation is using HTML Canvas which is really not a compatible for non Web platform, and using the React Native Skia only for that utility is really an overkill.
+Bringing the material color utility from an image is a personal challenge. Previously, I have to use React Native Skia on Android app to get a Bitmap from an image, because the original [source code](https://github.com/material-foundation/material-color-utilities) from Material Foundation is using HTML Canvas which is really not a compatible for non Web platform, and using the React Native Skia only for that utility is really an overkill.
 
 ## Compatibility
 
@@ -28,4 +30,4 @@ This library is only supported on React Native New Architecture, and the materia
 
 ## Documentation
 
-Go to https://rakadoank.github.io/material-color-react-native
+Go to https://oss.sufeni.id/material-color-react-native

docusaurus/docs/GETTING_STARTED.md

@@ -24,7 +24,18 @@ yarn add material-color-react-native
 pnpm install material-color-react-native
 ```
 
-🎉 That's it, no additional steps needed.
+___
+#### For iOS or macOS in bare React Native
+
+After the library is added to your project's `node_modules`, do the pod installation in the `ios` or `macos` directory of your project
+
+```bash
+cd ios && pod install
+```
+> :warning: Do not do this in Expo with [Continuous Native Generation (CNG)](https://docs.expo.dev/workflow/continuous-native-generation/) project. This step has been done automatically.
+___
+
+🎉 That's it. You're good to go!
 
 ## Usage
 

docusaurus/docusaurus.config.ts

@@ -35,7 +35,7 @@ const config: Config = {
 	// GitHub pages deployment config.
 	// If you aren't using GitHub pages, you don't need these.
 	organizationName: "RakaDoank", // Usually your GitHub org/user name.
-	projectName: "docusaurus", // Usually your repo name.
+	projectName: "material-color-react-native", // Usually your repo name.
 
 	onBrokenLinks: "throw",
 

docusaurus/package.json

@@ -14,20 +14,21 @@
 		"write-heading-ids": "docusaurus write-heading-ids"
 	},
 	"dependencies": {
-		"@docusaurus/core": "3.9.2",
-		"@docusaurus/preset-classic": "3.9.2",
+		"@docusaurus/core": "3.10.0",
+		"@docusaurus/faster": "^3.10.0",
+		"@docusaurus/preset-classic": "3.10.0",
 		"@mdx-js/react": "^3.1.1",
 		"clsx": "^2.1.1",
 		"prism-react-renderer": "^2.4.1",
 		"react": "catalog:",
 		"react-dom": "catalog:"
 	},
 	"devDependencies": {
-		"@docusaurus/module-type-aliases": "3.9.2",
-		"@docusaurus/tsconfig": "3.9.2",
-		"@docusaurus/types": "3.9.2",
+		"@docusaurus/module-type-aliases": "3.10.0",
+		"@docusaurus/tsconfig": "3.10.0",
+		"@docusaurus/types": "3.10.0",
 		"docusaurus-plugin-typedoc": "^1.4.2",
-		"typedoc": "^0.28.18",
+		"typedoc": "^0.28.19",
 		"typedoc-plugin-markdown": "^4.11.0"
 	},
 	"browserslist": {

docusaurus/tsconfig.json

@@ -3,9 +3,6 @@
 		"@docusaurus/tsconfig",
 		"../tsconfig.base.json"
 	],
-	"compilerOptions": {
-		"baseUrl": "."
-	},
 	"mdx": {
 		"checkMdx": true
 	},

example/package.json

@@ -11,23 +11,23 @@
 		"web": "npm run start -- --web"
 	},
 	"dependencies": {
-		"expo": "55.0.8",
-		"expo-build-properties": "55.0.10",
-   		"expo-image": "55.0.6",
-		"expo-image-picker": "55.0.13",
-    	"expo-router": "55.0.7",
-		"expo-splash-screen": "55.0.12",
-		"expo-status-bar": "55.0.4",
-    	"expo-system-ui": "55.0.10",
+		"expo": "55.0.16",
+		"expo-build-properties": "55.0.13",
+   		"expo-image": "55.0.9",
+		"expo-image-picker": "55.0.19",
+    	"expo-router": "55.0.13",
+		"expo-splash-screen": "55.0.19",
+		"expo-status-bar": "55.0.5",
+    	"expo-system-ui": "55.0.16",
 		"react": "catalog:",
 		"react-dom": "catalog:",
-		"react-native": "0.83.2",
-		"react-native-paper": "5.15.0",
+		"react-native": "0.83.6",
+		"react-native-paper": "5.15.1",
 		"react-native-web": "0.21.2",
 		"react-native-safe-area-context": "5.7.0",
 		"react-native-screens": "4.24.0"
 	},
 	"devDependencies": {
-		"expo-dev-client": "~55.0.10"
+		"expo-dev-client": "~55.0.28"
 	}
 }

package.json

@@ -10,7 +10,7 @@
 	},
 	"devDependencies": {
 		"@eslint/compat": "2.0.3",
-		"@react-native/eslint-config": "0.83.2",
+		"@react-native/eslint-config": "0.83.6",
 		"@stylistic/eslint-plugin": "5.10.0",
 		"@types/node": "^24",
 		"@types/color": "4.2.1",
@@ -23,9 +23,13 @@
 		"eslint-plugin-react": "^7.37.5",
 		"eslint-plugin-react-hooks": "7.0.1",
 		"eslint-plugin-react-native": "^5.0.0",
-		"globals": "^17.4.0",
+		"globals": "^17.5.0",
 		"package-builder": "workspace:*",
-		"typescript": "5.9.3",
-		"typescript-eslint": "8.57.1"
+		"typescript": "6.0.3",
+		"typescript-eslint": "8.59.0"
+	},
+	"engines": {
+		"node": ">=24",
+		"pnpm": ">=10.30"
 	}
 }

package/README.md

@@ -6,7 +6,7 @@ Bring material color utilities from the [`@material-foundation/material-color-ut
 
 ## Documentation
 
-Go to https://rakadoank.github.io/material-color-react-native
+Go to https://oss.sufeni.id/material-color-react-native
 
 ## Directory
 

package/apple/Utils/ImageUtils.mm

@@ -34,7 +34,7 @@ + (void)sourceColorFromImageUri:(NSString *)uri
 
     didCreateDispatch(dispatchBlock);
 
-    dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), dispatchBlock);
+    dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_HIGH, 0), dispatchBlock);
     return;
   }
 
@@ -45,7 +45,7 @@ + (void)sourceColorFromImageUri:(NSString *)uri
       });
       return;
     }
-    
+
     dispatchBlock = dispatch_block_create(DISPATCH_BLOCK_BARRIER, ^{
       UIImage *image = [UIImage imageWithData:data];
       NSNumber *color = [self sourceColorFromImage:image maxWidthOrHeight:maxWidthOrHeight];
@@ -56,7 +56,7 @@ + (void)sourceColorFromImageUri:(NSString *)uri
 
     didCreateDispatch(dispatchBlock);
 
-    dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), dispatchBlock);
+    dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_HIGH, 0), dispatchBlock);
   }];
 
   didCreateTask(task);

package/package.json

@@ -1,10 +1,10 @@
 {
 	"name": "material-color-react-native",
-	"version": "1.0.4",
+	"version": "1.0.7",
 	"description": "Bring material color utilities to React Native app",
 	"license": "MIT",
 	"author": "RakaDoank <rakaaudira@gmail.com> (https://github.com/RakaDoank)",
-	"homepage": "https://rakadoank.github.io/material-color-react-native",
+	"homepage": "https://oss.sufeni.id/material-color-react-native",
 	"repository": "https://github.com/RakaDoank/material-color-react-native",
 	"files": [
 		"android",
@@ -54,5 +54,10 @@
 		"android": {
 			"javaPackageName": "com.audira.lib.materialcolorreactnative"
 		}
-	}
+	},
+	"keywords": [
+		"material-color-utilities",
+		"react-native",
+		"material-design"
+	]
 }