diff --git a/docs/learning-note/graphic/_category_.json b/docs/learning-note/graphic/_category_.json
new file mode 100644
index 0000000..677dbf7
--- /dev/null
+++ b/docs/learning-note/graphic/_category_.json
@@ -0,0 +1 @@
+{"label":"Graphic","position":3,"link":{"type":"generated-index"}}
\ No newline at end of file
diff --git a/docs/learning-note/graphic/webgl/_category_.json b/docs/learning-note/graphic/webgl/_category_.json
new file mode 100644
index 0000000..96b7fc0
--- /dev/null
+++ b/docs/learning-note/graphic/webgl/_category_.json
@@ -0,0 +1 @@
+{"label":"Webgl","position":1,"link":{"type":"generated-index"}}
\ No newline at end of file
diff --git a/docs/learning-note/graphic/webgl/rn-webgl.md b/docs/learning-note/graphic/webgl/rn-webgl.md
new file mode 100644
index 0000000..0c6e986
--- /dev/null
+++ b/docs/learning-note/graphic/webgl/rn-webgl.md
@@ -0,0 +1,55 @@
+---
+sidebar_position: 1
+---
+    
+# How to Integrate R3F into a CLI React Native App
+
+1. Install the `expo` package: 
+```bash
+npm install expo expo-file-system expo-asset
+```
+
+
+2. Configure Android (`android/settings.gradle`): 
+```gradle
+apply from: new File(\["node", "--print", "require.resolve('expo/package.json')"].execute(null, rootDir).text.trim(), "../scripts/autolinking.gradle")
+useExpoModules()
+```
+
+
+3. Configure iOS (`ios/Podfile`)
+```ruby
+target 'YourAppName' do
+  use\_expo\_modules!
+  config = use\_native\_modules!
+  # ... rest of your config
+end
+```
+
+
+4. install R3F
+```bash
+npm install three @react-three/fiber expo-gl
+```
+
+5. Rebuild
+
+- iOS: `cd ios && pod install` then rebuild your app.
+
+- Android: Rebuild your app (`npx react-native run-android`).
+
+Tips:
+
+- Metro: Start your server with the reset cache flag:
+```bash
+npx react-native start --reset-cache
+```
+
+- Android: Clean cache and rebuild your app.
+```bash
+cd android && ./gradlew clean && cd ..
+npx react-native run-android
+```
+
+<div style={{textAlign: 'right'}}><small style={{color: 'grey'}}>last modified at February 28, 2026 23:31</small></div>
+      
\ No newline at end of file
diff --git a/docs/learning-note/hardware/_category_.json b/docs/learning-note/hardware/_category_.json
index 061b466..6f6cf9d 100644
--- a/docs/learning-note/hardware/_category_.json
+++ b/docs/learning-note/hardware/_category_.json
@@ -1 +1 @@
-{"label":"Hardware","position":3,"link":{"type":"generated-index"}}
\ No newline at end of file
+{"label":"Hardware","position":4,"link":{"type":"generated-index"}}
\ No newline at end of file
diff --git a/docs/learning-note/investment/_category_.json b/docs/learning-note/investment/_category_.json
index 349bcf2..897e71d 100644
--- a/docs/learning-note/investment/_category_.json
+++ b/docs/learning-note/investment/_category_.json
@@ -1 +1 @@
-{"label":"Investment","position":4,"link":{"type":"generated-index"}}
\ No newline at end of file
+{"label":"Investment","position":5,"link":{"type":"generated-index"}}
\ No newline at end of file
diff --git a/docs/learning-note/javascript/_category_.json b/docs/learning-note/javascript/_category_.json
index 94d17c0..181de6e 100644
--- a/docs/learning-note/javascript/_category_.json
+++ b/docs/learning-note/javascript/_category_.json
@@ -1 +1 @@
-{"label":"Javascript","position":5,"link":{"type":"generated-index"}}
\ No newline at end of file
+{"label":"Javascript","position":6,"link":{"type":"generated-index"}}
\ No newline at end of file
diff --git a/docs/learning-note/linux/_category_.json b/docs/learning-note/linux/_category_.json
index a6ce35e..913a432 100644
--- a/docs/learning-note/linux/_category_.json
+++ b/docs/learning-note/linux/_category_.json
@@ -1 +1 @@
-{"label":"Linux","position":6,"link":{"type":"generated-index"}}
\ No newline at end of file
+{"label":"Linux","position":7,"link":{"type":"generated-index"}}
\ No newline at end of file
diff --git a/docs/learning-note/react/_category_.json b/docs/learning-note/react/_category_.json
index 7ad272c..49d04c9 100644
--- a/docs/learning-note/react/_category_.json
+++ b/docs/learning-note/react/_category_.json
@@ -1 +1 @@
-{"label":"React","position":7,"link":{"type":"generated-index"}}
\ No newline at end of file
+{"label":"React","position":8,"link":{"type":"generated-index"}}
\ No newline at end of file
diff --git a/docs/learning-note/rust/_category_.json b/docs/learning-note/rust/_category_.json
index e093273..c575516 100644
--- a/docs/learning-note/rust/_category_.json
+++ b/docs/learning-note/rust/_category_.json
@@ -1 +1 @@
-{"label":"Rust","position":8,"link":{"type":"generated-index"}}
\ No newline at end of file
+{"label":"Rust","position":9,"link":{"type":"generated-index"}}
\ No newline at end of file
diff --git a/docs/learning-note/science/_category_.json b/docs/learning-note/science/_category_.json
index 7f2d6c6..372c17b 100644
--- a/docs/learning-note/science/_category_.json
+++ b/docs/learning-note/science/_category_.json
@@ -1 +1 @@
-{"label":"Science","position":9,"link":{"type":"generated-index"}}
\ No newline at end of file
+{"label":"Science","position":10,"link":{"type":"generated-index"}}
\ No newline at end of file
diff --git a/docs/learning-note/stenography/_category_.json b/docs/learning-note/stenography/_category_.json
index 32f390f..e9e4257 100644
--- a/docs/learning-note/stenography/_category_.json
+++ b/docs/learning-note/stenography/_category_.json
@@ -1 +1 @@
-{"label":"Stenography","position":10,"link":{"type":"generated-index"}}
\ No newline at end of file
+{"label":"Stenography","position":11,"link":{"type":"generated-index"}}
\ No newline at end of file