For the original ReadMe, see android/README.md
yarn
yarn start
cd C:\Users\<username>\appdata\local\android\sdk
.\emulator\emulator.exe -avd 7.6_Fold-in_with_outer_display_API_34qsudo ln -s /mnt/c/Users/<username>/AppData/Local/Android/Sdk/platform-tools/adb.exe /home/<username>/android/platform-tools/adb# Get the WSL2 IP address and store it in a variable
WSL_VM_IP_ADDRESS=$(ifconfig eth0 | awk '/inet / {print $2}')
# Get the Windows HOST IP address and store it in a variable (in case you need it)
HOST_IP_ADDRESS=$(ipconfig.exe | awk '/Ethernet adapter vEthernet \(Default Switch\):/{i=1; next} i && /IPv4 Address/{print $NF; exit}' | sed 's/^[ \t]*//')
# Open the developer menu in the React Native activity once loaded
adb shell input keyevent 82
# Input the IP address in the developer menu
adb shell input text "${WSL_VM_IP_ADDRESS}:8081"
WARNING: BY DEFAULT IN THE CHROME DEBUGGER Expo Module Function does not work AT ALL! https://docs.expo.dev/modules/module-api/#function
(WHY THIS ISNT IN BIG BOLD RED LETTERS AS A NOTE ON THE DOCUMENTATION FOR SYNC FUNCTIONS IS BEYOND ME!)
this is because either the methods are using @ReactMethod(isBlockingSynchronousMethod = true)
https://reactnative.dev/docs/native-modules-android#synchronous-methods
and or JSI, a JavaScript interface for native code, is being used which requires the JS VM to share memory with the app.
For the Google Chrome debugger, React Native runs inside the JS VM in Google Chrome, and communicates asynchronously with the mobile devices via WebSockets.
So it wont have access to the native modules.
Alternative setups:
Hermes on Chrome - https://reactnative.dev/docs/hermes?package-manager=yarn#debugging-js-on-hermes-using-google-chromes-devtools
VSCode - https://marketplace.visualstudio.com/items?itemName=msjsdiag.vscode-react-native
Flipper - https://fbflipper.com/
LOST A LOT OF TIME ON THIS! so wanted to document it here.
Sources: #13 (comment) https://reactnative.dev/docs/native-modules-android?android-language=kotlin#synchronous-methods
WARNING: THIS DOES NOT WORK IN DEVELOPMENT MODE! YOU MUST BUILD YOU ANDROID APP IN RELEASE MODE! (WHY THIS ISNT IN BIG BOLD RED LETTERS AS A NOTE ON THE DOCUMENTATION FOR DEBUGGING HERMES IS BEYOND ME!)
the instructions do say to to do a release build, but it doesnt say that it wont work in development mode!
if you want to try to get to work these gusy https://github.com/gusgard/react-native-devsettings
are working on it jhen0409/react-native-debugger#573 (comment)
Sources:
- google: react native hemes dev tools
- https://stackoverflow.com/questions/76604735/expo-v48-remote-debugging-w-hermes
works like normal
https://instamobile.io/android-development/generate-react-native-release-build-android/
build the bundle ahead of time
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/
Android studio instructions: https://stackoverflow.com/questions/18460774/how-to-set-up-gradle-and-android-studio-to-do-release-build
see .github/workflows/actions.yml