Skip to content

Commit 31b3a5c

Browse files
williscoolwilliscool
authored
feat/expo rn module (#12)
* bring over stuff that looks good from standard native modules attempt #10 * expo config setup init MAN THAT WAS HARD! had to - downgrade react-native to 0.71 - upgrade kotlin to 1.8 - downgrade gradle to 7.6 - change the location of @react-native/gradle-plugin to react-native-gradle-plugin - setup the expo config to use the hermes compiler (not mention in doc :/ ) facebook/react-native#38179 expo/expo#22008 * missed a spot * got everything running with no errors ran into this ugly one called java.lang.IllegalStateException: Current Activity is of incorrect class, expected AppCompatActivity, received ui.MyReactActivity hard to debug for real for real. ended up looking into expo docs that said they are getting rid of the bare instructions and then expo/expo#18022 then that had me be like where is that erorr even from... which lead me to git blame packages/expo-modules-core/android/src/main/java/expo/modules/kotlin/AppContext.kt which lead me to expo/expo#19573 which lead me to s/Activity/AppCompatActivity/g in android/app/src/main/java/com/github/quarck/calnotify/ui/MyReactActivity.kt * fix: forgot to switch to matching gradle version for android build plugin * def don't need react native picker hope we don't need expo install modules either * kinda crazy but got a (mostly) WORKING NATIVE MODULE! in modules/my-module/android/src/main/java/expo/modules/mymodule/MyModule.kt Constants, Events, and AsyncFunction work beautifully! View seems to work but I don't really understand it weirdly Function DOES NOT WORK AT ALL!!! it just says is not a function and since it seemed like the easiest thing and was what I looked at first it made me thing everything else was broken too :/ lost A LOT of time to that * Logcat instead of println and hello on button press * document why chrome debugging doesn't work as expected by default to save myself time in the future * debugging with vscode works!!!! unfortunately debugging syncronous native modules in it does not :/ * more docs on debugging * react-native-devsettings because why not * flipper setup again because why not? * drop a android studio thing that didn't work * fix readme * drop a dependency we dont need that had a peer dependency that broke shit expo-module-scripts 3.1.0 depends on @expo/config 7.5 which breaks shit * Revert "flipper setup again because why not?" turns out it breaks build. like flipper but not worth build break This reverts commit 8612ff3. * do still want to set entryFile though
1 parent 68cf15d commit 31b3a5c

34 files changed

+4847
-784
lines changed

‎.gitignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -124,6 +124,9 @@ dist
124124
# Stores VSCode versions used for testing VSCode extensions
125125
.vscode-test
126126

127+
# vscode react native debug
128+
.vscode/.react
129+
127130
# yarn v3
128131
.pnp.*
129132
.yarn/*

‎.vscode/launch.json‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
// Sources
2+
// https://gist.github.com/bergmannjg/461958db03c6ae41a66d264ae6504ade?permalink_comment_id=3737831#debug-app-in-visual-studio-code-from-wsl2
3+
{
4+
"configurations": [
5+
{
6+
"name": "(my) Attach to packager",
7+
"cwd": "${workspaceFolder}",
8+
"type": "reactnative",
9+
"request": "attach"
10+
},
11+
// what I really want to debug is the hermes engine though which is gonna take this setup
12+
// https://marketplace.visualstudio.com/items?itemName=msjsdiag.vscode-react-native#hermes-engine
13+
//
14+
// but sadly spent a day on trying to get hermes debugging going and it don't work :/ see README.md for more info
15+
// long story short it doesnt work in dev mode, only release mode and I couldn't get a relase build to work locally to test it
16+
{
17+
"name": "ONLY WORKS AGAINST A ANDROID RELEASE BUILD- Hermes Attach application - Experimental",
18+
"cwd": "${workspaceFolder}",
19+
"type": "reactnativedirect",
20+
"request": "attach",
21+
}
22+
]
23+
}

‎.watchmanconfig‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{}

‎README.md‎

Lines changed: 92 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -18,17 +18,102 @@ cd C:\Users\<username>\appdata\local\android\sdk
1818
.\emulator\emulator.exe -avd 7.6_Fold-in_with_outer_display_API_34q
1919
```
2020

21-
## Wsl setup
21+
## Setting up adb
22+
23+
https://gist.github.com/bergmannjg/461958db03c6ae41a66d264ae6504ade?permalink_comment_id=4149833#gistcomment-4149833
24+
25+
```bash
26+
sudo ln -s /mnt/c/Users/<username>/AppData/Local/Android/Sdk/platform-tools/adb.exe /home/<username>/android/platform-tools/adb
27+
```
28+
29+
## Wsl metro connection setup
2230

2331
```bash
2432

25-
# get the wsl2 ip address
26-
ifconfig eth0 | grep 'inet '
33+
# Get the WSL2 IP address and store it in a variable
34+
WSL_VM_IP_ADDRESS=$(ifconfig eth0 | awk '/inet / {print $2}')
35+
36+
# Get the Windows HOST IP address and store it in a variable (in case you need it)
37+
HOST_IP_ADDRESS=$(ipconfig.exe | awk '/Ethernet adapter vEthernet \(Default Switch\):/{i=1; next} i && /IPv4 Address/{print $NF; exit}' | sed 's/^[ \t]*//')
2738

28-
# open the developer menu in the react native activity once loaded
29-
./adb.exe shell input keyevent 82
39+
# Open the developer menu in the React Native activity once loaded
40+
adb shell input keyevent 82
41+
42+
# Input the IP address in the developer menu
43+
adb shell input text "${WSL_VM_IP_ADDRESS}:8081"
3044

31-
# input the aformentioned ip address in the developer menu
32-
./adb.exe shell input text "172.21.60.143:8081"
3345

3446
```
47+
48+
49+
## Debugging
50+
51+
WARNING: BY DEFAULT IN THE CHROME DEBUGGER Expo Module Function does not work AT ALL! https://docs.expo.dev/modules/module-api/#function
52+
53+
(WHY THIS ISNT IN BIG BOLD RED LETTERS AS A NOTE ON THE DOCUMENTATION FOR SYNC FUNCTIONS IS BEYOND ME!)
54+
55+
this is because either the methods are using @ReactMethod(isBlockingSynchronousMethod = true)
56+
57+
https://reactnative.dev/docs/native-modules-android#synchronous-methods
58+
59+
and or JSI, a JavaScript interface for native code, is being used which requires the JS VM to share memory with the app.
60+
61+
For the Google Chrome debugger, React Native runs inside the JS VM in Google Chrome, and communicates asynchronously with the mobile devices via WebSockets.
62+
63+
So it wont have access to the native modules.
64+
65+
Alternative setups:
66+
67+
Hermes on Chrome - https://reactnative.dev/docs/hermes?package-manager=yarn#debugging-js-on-hermes-using-google-chromes-devtools
68+
69+
VSCode - https://marketplace.visualstudio.com/items?itemName=msjsdiag.vscode-react-native
70+
71+
Flipper - https://fbflipper.com/
72+
73+
74+
LOST A LOT OF TIME ON THIS! so wanted to document it here.
75+
76+
Sources:
77+
https://github.com/williscool/CalendarNotification/issues/13#issuecomment-1760712053
78+
https://reactnative.dev/docs/native-modules-android?android-language=kotlin#synchronous-methods
79+
80+
## Debugging Hermes on Chrome
81+
82+
WARNING: THIS DOES NOT WORK IN DEVELOPMENT MODE! YOU MUST BUILD YOU ANDROID APP IN RELEASE MODE!
83+
(WHY THIS ISNT IN BIG BOLD RED LETTERS AS A NOTE ON THE DOCUMENTATION FOR DEBUGGING HERMES IS BEYOND ME!)
84+
85+
the instructions do say to to do a release build, but it doesnt say that it wont work in development mode!
86+
87+
if you want to try to get to work these gusy https://github.com/gusgard/react-native-devsettings
88+
89+
are working on it
90+
https://github.com/jhen0409/react-native-debugger/issues/573#issuecomment-1533894331
91+
92+
93+
Sources:
94+
- google: react native hemes dev tools
95+
- https://stackoverflow.com/questions/76604735/expo-v48-remote-debugging-w-hermes
96+
97+
98+
## Building
99+
100+
### Debug
101+
102+
works like normal
103+
104+
### Release Local
105+
106+
107+
https://instamobile.io/android-development/generate-react-native-release-build-android/
108+
109+
build the bundle ahead of time
110+
111+
```
112+
yarn react-native bundle --platform android --dev false --entry-file index.tsx --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/
113+
```
114+
115+
Android studio instructions: https://stackoverflow.com/questions/18460774/how-to-set-up-gradle-and-android-studio-to-do-release-build
116+
117+
118+
### Release CI
119+
see .github/workflows/actions.yml

‎android/.idea/compiler.xml‎

Lines changed: 5 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎android/.idea/gradle.xml‎

Lines changed: 13 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎android/.idea/kotlinc.xml‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎android/.idea/misc.xml‎

Lines changed: 9 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎android/.idea/modules.xml‎

Lines changed: 8 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎android/app/build.gradle‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,7 @@ apply plugin: "com.facebook.react"
2020
//
2121

2222
android {
23-
compileSdkVersion 31
24-
buildToolsVersion '31.0.0'
23+
compileSdkVersion 34
2524

2625
defaultConfig {
2726
applicationId "com.github.quarck.calnotify"
@@ -51,8 +50,11 @@ android {
5150
main.java.srcDirs += 'src/main/kotlin'
5251
}
5352
namespace 'com.github.quarck.calnotify'
53+
54+
5455
}
5556

57+
5658
dependencies {
5759
implementation fileTree(dir: 'libs', include: ['*.jar'])
5860

@@ -71,4 +73,10 @@ dependencies {
7173
implementation 'com.google.android.material:material:1.0.0-rc01'
7274
}
7375

76+
// https://reactnative.dev/docs/react-native-gradle-plugin
77+
react {
78+
entryFile = file("../../index.tsx")
79+
}
80+
81+
7482
apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)

0 commit comments

Comments
 (0)