More notes on React Native, Expo and Ignite; Some misc. stuff

Last updated on 15th April 2025
Note: The main blog posts related to my previous learnings of React Native are:
Feb. 2024: Notes on using React Native without Expo framework and Expo Go, https://raviswdev.blogspot.com/2025/02/notes-on-using-react-native-without.html
==================================

Quick Info

A) Key steps in building Dave Gray tutorial app APK dev version (which needs a running dev server to run app) as well as preview version (which runs without need for dev server) are given below.
[The steps presume that user is logged in to eas.dev.]

For development/debug build of Dave Gray tutorial app
  1. If project is not set up on eas.dev, run: eas init
  2. If eas.json file has not yet been created, run: eas build:configure
  3. Run: eas build --platform android --profile development
  4. Created APK can be downloaded from eas.dev (or by scanning code on eas.dev).
  5. After APK install on emulator or phone, on running the app, it needs a dev server. So a dev server has to run on PC (by running 'npm start').
  6. If blank screen with Expo icon is shown on phone, shaking the phone should show dev server selection/specification modal. On emulator, Extended Controls -> Virtual Sensors -> Move -> moving X Y Z seekbar, may result in shake but it does not work every time. But sometimes, closing and reopening the app shows the dev server modal.
  7. Once dev server is specified correctly, the app screens get shown (on both emulator and phone).
For details, see 7 Apr 25 entry below.
------

For preview build of Dave Gray tutorial app
  1. If project is not set up on eas.dev, run: eas init
  2. For preview build, in eas.json add:
    1. "build": {
    2.     "preview": {
    3.       "android": {
    4.         "buildType": "apk"
    5.       }
    6.     },
  3. Run: eas build -p android --profile preview
  4. Created APK can be downloaded from eas.dev (or by scanning code on eas.dev).
  5. For APK install on emulator or device, if dev version of APK was installed earlier then it has to be uninstalled. APK install itself is straightforward.
  6. Running app is straightforward.
For details, see initial part of 9 Apr 25 entry below.
--------------------------------------

B) Key steps in building Ignite boilerplate app APK dev version (which needs a running dev server to run app) as well as preview version (which runs without need for dev server) are given below.

[I used my 4G mobile Internet connection which is slow.]
[The boilerplate app is created using: npx ignite or similar [For details, see https://docs.infinite.red/ignite-cli/cli/Ignite-CLI/ ]. It takes a lot of time to download stuff.]

For development/debug build of Ignite boilerplate app

I created it locally following some instructions in some Ignite docs IFIRC. But I think an easier alternative could be to do it using eas.dev.
  1. Run: npm run android [involves lot of download]
  2. I struggled to fix the build errors I got from above step:
    1. Download read timeout errors. My 4G daily data quota and then also data packs were getting exhausted and resulted in read timeout error. The issue was that the message, "Read timed out" was in the middle of lot of other stuff and so I missed it. To avoid such issues, one should carefully go through the error messages part searching for "Read timed out" in which case it is just a straightforward issue. A good thing here is that restarting the build ('npm run android') does not seem to re-download most of the stuff that was downloaded in the aborted build. However, if a later error not related to download comes up, one may have to consider a rebuild where one cleans out the caches and then builds which results in re-download of most of the stuff.
    2. After rebuilds including after deleting caches (see details entry for procedure to delete caches), eventually I got to a non download error. That was:
      1. > Task :react-native-reanimated:buildCMakeDebug[arm64-v8a] FAILED
      2. C/C++: ninja: error: mkdir(src/main/cpp/reanimated/CMakeFiles/reanimated.dir/C_/Users/USERNAME/CurrProjects/VSCode/ReactNative/pizza-app/node_modules/react-native-reanimated): No such file or directory
    3. Initially I thought it is a long path error as an earlier warning indicated a long path issue. So I modified Windows 11 registry to support longer pathnames. But that did not fix above error. The eventual solution was from https://stackoverflow.com/questions/79103323/cmake-build-error-with-react-native-reanimated-mkdir-no-such-file-or-director . I did the following:
      1. Installed CMake latest version of 3.31.6
      2. $Env:CMAKE_VERSION = '3.31.6'
      3. npm run android
    4. That fixed the issue and the development build was successful. It created a development/debug APK file.
  3. After APK install on emulator (I think I did it through the 'npm run build' command itself by saying Y to a related prompt), followed by run, it showed the screens correctly. However, 'pizza-app isn't responding' message was shown. That disappered after I closed the app and restarted it. But later after uninstalling app and then reinstalling it on emulator, running it showed blank screen with Expo icon. "Extended Controls -> Virtual Sensors -> Move -> moving X Y Z seekbar" did not result in dev server modal showing up. But closing the app and restarting it showed the dev server modal where I specified the right URL of dev server running on PC, and then the app screens showed correctly on emulator. 
  4. Dev APK install on phone was smooth. Running it was also straightforward as dev server modal came up. ...
For details, see 11 Apr 25 entry below.
------

For preview build of Ignite boilerplate app
  1. If project is not set up on eas.dev, run: eas init
  2. Note that eas.json file is already present in Ignite boilerplate app with preview profile to create preview APK. The related build entry is given below:
    1.     "preview": {
    2.       "extends": "production",
    3.       "distribution": "internal",
    4.       "ios": { "simulator": true },
    5.       "android": { "buildType": "apk" }
    6.     },
  3. Run: eas build -p android --profile preview
  4. Created APK can be downloaded from eas.dev (or by scanning code on eas.dev).
  5. For APK install on emulator or device, if dev version of APK was installed earlier then it has to be uninstalled. APK install itself is straightforward.
  6. Running app is straightforward.
For details, see  11 Apr 25 entry below.
=======================================================

Details

15 Apr 2025

Very useful HTML formatter online: https://www.freeformatter.com/html-formatter.html
...
WinMerge compares text files within two zip files! Used it to compare 20250411-2002-BackupCmds.zip and 20250411-2002-BackupCmds - Copy.zip, which it reported as identical. Great!

But it could not compare 20250411-2002-BackupCmds.zip and BackupCmds folder as the first zip file has a BackupCmds folder. As just a test, I copied BackupCmds folder into a test folder and compared 20250411-2002-BackupCmds.zip with that test folder. That worked. So WinMerge compares a zip file with a folder.

7z can update an archive but does not seem to have a list before update and give option to abort kind of functionality. So one will have to make a copy of an archive and then try 7z with update option. If it adds files then we know that the folder has newer files than the archive had. I have not tried this out as of now as I am not sure if I really need this feature for my current needs.

=======================================
11 Apr 2025

Exploring EAS preview build of DG ToDos app so that I get a preview APK without dev stuff.
I had done that for StickerSmash and those steps are mentioned in https://raviswdev.blogspot.com/2024/12/notes-on-react-native.html . I have copy-pasted below the related part from the post:

Build APKs for Android Emulators and devices, https://docs.expo.dev/build-reference/apk/
Development build by default creates APK but has dev stuff.
So a preview build can be used to create APK. In eas.json:
"build": {
    "preview": {
      "android": {
        "buildType": "apk"
      }
    },
-----

The build command I ran: eas build -p android --profile preview

--- end extract ---

In DG tutorial ToDos: Made of a copy of existing eas.json as eas json-v1.txt. Made above change in eas.json
In CrudApp directory, ran:
eas build -p android --profile preview
----

It uploaded the project files and queued the build.
Simply to know, I went to eas.dev Dashboard and confirmed that the build was in progress. Then I exited out of above eas build command on VSCode terminal with Ctrl+C. My understanding is that this will not interfere with the build. Once the web dashboard shows that the build is done, I should be able to download the preview APK.
Got the same Expo Doctor warning in this build as in dev build, but that did not prevent the build from progressing further.
It finished successfully taking total time of 8 min. 51 secs.
The 'Upload application archive' entry shows: " - /home/expo/workingdir/build/CrudApp/android/app/build/outputs/apk/release/app-release.apk (68.3 MB)"

Downloaded the APK (application-b54eac62-debe-42f5-9ee8-e89dde9dd689.apk) in DownloadedAndroidAPK\CrudApp-Preview on PC.
Copied it to phone (in DGToDosPreview folder) and also copied earlier dev APK from phone to PC.
On Phone, uninstalled older dev version CrudApp.
On Phone, installed the preview App. It went through smoothly. Ran app (without Expo dev server running on PC) and the TodDos app opened and showed its ToDos screen! Modified the ToDos, closed the app and reopened it. It reopened quite fast (perhaps in around or even less than 1 second) and showed the modified data. Fantastic! I am happy with the smooth way I was able to create a non dev APK and install it on phone. I don't exactly know/recall the difference between preview and regular production APK but eas.dev shows preview profile build as 'production' environment, and development profile build as 'development' environment. So the preview APK is a type of production APK.
I think that completes the DG tutorial 'refresher' with some later parts being fresh study.
=============

Doing a quick browse of https://reactnative.dev/docs/getting-started ... It is quite exhaustive and so from Inclusion onwards I mainly looked only at the page titles. I think this is enough for me now. Later, if required especially when I am doing some RN programming, I can dig deeper and study required material.
...

To go through and choose few apps for deeper study/trial: https://github.com/ReactNativeNews/React-Native-Apps

Going through https://docs.expo.dev/ . I recall having gone through most of it related to standard Expo dev (excluding stuff like Expo Modules API).
Installed Expo Tools for VS Code
...
reactnative.directory is a searchable database for React Native libraries. If a library you are looking for is not included in Expo SDK, use the directory to find a compatible library for your project.
=====================

Next I moved on to try out Ignite

npx ignite ... took lot of time (lot of downloading)
pizza-app got created with timestamp of 22:45 (it may have taken perhaps 10 to 15 minutes to get done)
After that, npm run android took lot of time (lot of downloading). I think I started it few minutes later - perhaps around 22:50. After long download (of NDK (Side by side) 26.1.10909125), the disk light is on for long. Finally it got done. Now some more downloads. Now it is 23:14 - it is still downloading! It shows "100% CONFIGURING [27m 41s]" but it has been 100% for quite some time now.
Now it has moved to "EXECUTING". Once again, it is downloading stuff. My Jio daily quota got over. Trying to add 1 GB. Was able to add it without breaking 'npm run android' command. Downloading speed has got back to 10 Mbps to 18 Mbps.
Finally I got 'build failed'!!!! 

> Task :app:checkDebugAarMetadata FAILED

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:checkDebugAarMetadata'.
> Could not resolve all files for configuration ':app:debugRuntimeClasspath'.
   > Failed to transform react-android-0.76.9-debug.aar (com.facebook.react:react-android:0.76.9) to match attributes {artifactType=android-aar-metadata, com.android.build.api.attributes.BuildTypeAttr=debug, org.gradle.category=library, org.gradle.dependency.bundling=external, org.gradle.libraryelements=aar, org.gradle.status=release, org.gradle.usage=java-runtime}.
      > Could not download react-android-0.76.9-debug.aar (com.facebook.react:react-android:0.76.9)
         > Could not get resource 'https://repo.maven.apache.org/maven2/com/facebook/react/react-android/0.76.9/react-android-0.76.9-debug.aar'.
            > Read timed out

* Try:
> Run with --stacktrace option to get the stack trace.
> Run with --info or --debug option to get more log output.
> Run with --scan to get full insights.
> Get more help at https://help.gradle.org.

BUILD FAILED in 32m 58s
53 actionable tasks: 53 executed
Error: C:\Users\USERNAME\CurrProjects\VSCode\ReactNative\pizza-app\android\gradlew.bat app:assembleDebug -x lint -x test --configure-on-demand --build-cache -PreactNativeDevServerPort=8081 -PreactNativeArchitectures=x86_64,arm64-v8a exited with non-zero code: 1
Error: C:\Users\USERNAME\CurrProjects\VSCode\ReactNative\pizza-app\android\gradlew.bat app:assembleDebug -x lint -x test --configure-on-demand --build-cache -PreactNativeDevServerPort=8081 -PreactNativeArchitectures=x86_64,arm64-v8a exited with non-zero code: 1
    at ChildProcess.completionListener (C:\Users\USERNAME\CurrProjects\VSCode\ReactNative\pizza-app\node_modules\@expo\spawn-async\src\spawnAsync.ts:67:13)
    at Object.onceWrapper (node:events:639:26)
    at ChildProcess.emit (node:events:524:28)
    at ChildProcess.cp.emit (C:\Users\USERNAME\CurrProjects\VSCode\ReactNative\pizza-app\node_modules\cross-spawn\lib\enoent.js:34:29)
    at maybeClose (node:internal/child_process:1101:16)
    at Process.ChildProcess._handle.onexit (node:internal/child_process:304:5)
    ...
    at spawnAsync (C:\Users\USERNAME\CurrProjects\VSCode\ReactNative\pizza-app\node_modules\@expo\spawn-async\src\spawnAsync.ts:28:21)
    at spawnGradleAsync (C:\Users\USERNAME\CurrProjects\VSCode\ReactNative\pizza-app\node_modules\@expo\cli\src\start\platforms\android\gradle.ts:134:28)
    at assembleAsync (C:\Users\USERNAME\CurrProjects\VSCode\ReactNative\pizza-app\node_modules\@expo\cli\src\start\platforms\android\gradle.ts:83:16)
    at runAndroidAsync (C:\Users\USERNAME\CurrProjects\VSCode\ReactNative\pizza-app\node_modules\@expo\cli\src\run\android\runAndroidAsync.ts:48:24)
=====================================
[Update: Later I realized it is simply a read timeout error most probably due to my data pack running out. The details of the error message mention, "Read timed out". The cache deletion stuff that I did based on link below was not necessary, I think. I should bear this in mind for future.]


Close android studio if it is open already and then delete all the contents of these directories.

C:\Users\USER_NAME\.gradle\caches
C:\Users\USER_NAME\.android\build-cache
C:\Users\USER_NAME\.android\cache
Start Android Studio and and it will probably work. It may take a little bit time to load for the first time.
-----

Did the above (needed logout (and also restarted to be on safe side) for some folders delete).
Ran 'npm run android' again.
As I had deleted the caches, it had to do fair bit of downloads again but lesser than first time (I think NDK did not get redownloaded. NDK is very large - over 500 MB, IFIRC).
...
Got the error:
> Task :app:checkDebugAarMetadata FAILED

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:checkDebugAarMetadata'.
> Could not resolve all files for configuration ':app:debugRuntimeClasspath'.
   > Failed to transform webpsupport-3.2.0.aar (com.facebook.fresco:webpsupport:3.2.0) to match attributes {artifactType=android-aar-metadata, org.gradle.category=library, org.gradle.dependency.bundling=external, org.gradle.libraryelements=aar, org.gradle.status=release, org.gradle.usage=java-runtime}.
      > Could not download webpsupport-3.2.0.aar (com.facebook.fresco:webpsupport:3.2.0)
         > Could not get resource 'https://repo.maven.apache.org/maven2/com/facebook/fresco/webpsupport/3.2.0/webpsupport-3.2.0.aar'.
            > Read timed out
...
BUILD FAILED in 19m 33s
=========================

Looks like it was due to data pack running out (See 'Read timed out' message in error details above). Added 1 GB pack and will try again. 

Now I got the below error but the build was much faster - "BUILD FAILED in 4m 10s":

> Task :react-native-reanimated:configureCMakeDebug[arm64-v8a]
C/C++: CMake Warning in src/main/cpp/reanimated/CMakeLists.txt:
C/C++:   The object file directory
C/C++:     C:/Users/USERNAMEr/CurrProjects/VSCode/ReactNative/pizza-app/node_modules/react-native-reanimated/android/.cxx/Debug/632j1r55/arm64-v8a/src/main/cpp/reanimated/CMakeFiles/reanimated.dir/./
C/C++:   has 188 characters.  The maximum full path to an object file is 250
C/C++:   characters (see CMAKE_OBJECT_PATH_MAX).  Object file
C/C++:     C_/Users/USERNAME/CurrProjects/VSCode/ReactNative/pizza-app/node_modules/react-native-reanimated/Common/cpp/reanimated/NativeModules/NativeReanimatedModuleSpec.cpp.o
C/C++:   cannot be safely placed under this directory.  The build may not work
C/C++:   correctly.

> Task :react-native-reanimated:buildCMakeDebug[arm64-v8a] FAILED
C/C++: ninja: error: mkdir(src/main/cpp/reanimated/CMakeFiles/reanimated.dir/C_/Users/USERNAME/CurrProjects/VSCode/ReactNative/pizza-app/node_modules/react-native-reanimated): No such file or directory

FAILURE: Build failed with an exception.

...

  C++ build system [build] failed while executing:
      @echo off
      "C:\\Users\\USERNAME\\AppData\\Local\\Android\\Sdk\\cmake\\3.22.1\\bin\\ninja.exe" ^
        -C ^
        "C:\\Users\\USERNAME\\CurrProjects\\VSCode\\ReactNative\\pizza-app\\node_modules\\react-native-reanimated\\android\\.cxx\\Debug\\632j1r55\\arm64-v8a" ^
        reanimated ^
        worklets
    from C:\Users\USERNAME\CurrProjects\VSCode\ReactNative\pizza-app\node_modules\react-native-reanimated\android
  ninja: error: mkdir(src/main/cpp/reanimated/CMakeFiles/reanimated.dir/C_/Users/USERNAME/CurrProjects/VSCode/ReactNative/pizza-app/node_modules/react-native-reanimated): No such file or directory

... 
BUILD FAILED in 4m 10s
===============

Seems to be a long path error.
Fix may be: How to enable long file path names in Windows 11, https://learn.microsoft.com/en-us/answers/questions/1805411/how-to-enable-long-file-path-names-in-windows-11 : (MS External staff in Jul. 2024)
...
In the Registry Editor, go to HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\FileSystem.

[Modify LongPathsEnabled Value to 1. Restart PC]
================

Did the above. Now retrying 'npm run android'
Now I got the (same, I think) error:
> Task :react-native-reanimated:buildCMakeDebug[arm64-v8a]
C/C++: ninja: error: mkdir(src/main/cpp/reanimated/CMakeFiles/reanimated.dir/C_/Users/USERNAMEr/CurrProjects/VSCode/ReactNative/pizza-app/node_modules/react-native-reanimated): No such file or directory

> Task :react-native-reanimated:buildCMakeDebug[arm64-v8a] FAILED

FAILURE: Build failed with an exception.

...
  C++ build system [build] failed while executing:
      @echo off
      "C:\\Users\\USERNAME\\AppData\\Local\\Android\\Sdk\\cmake\\3.22.1\\bin\\ninja.exe" ^
        -C ^
        "C:\\Users\\USERNAME\\CurrProjects\\VSCode\\ReactNative\\pizza-app\\node_modules\\react-native-reanimated\\android\\.cxx\\Debug\\632j1r55\\arm64-v8a" ^
        reanimated ^
        worklets
    from C:\Users\USERNAME\CurrProjects\VSCode\ReactNative\pizza-app\node_modules\react-native-reanimated\android
  ninja: error: mkdir(src/main/cpp/reanimated/CMakeFiles/reanimated.dir/C_/Users/USERNAME/CurrProjects/VSCode/ReactNative/pizza-app/node_modules/react-native-reanimated): No such file or directory
...
BUILD FAILED in 1m 5s
======================

I think the earlier failed run is interfering. I may need to clean the old data and run a fresh 'npm run android'


Deleted android/app/build dir
Now will run: 'npm run android'
Did not work and got, I think, the same error... Hmm. Need to understand this clean stuff properly. 

==============

An active person in field recommended book:
Designing Data-Intensive Applications
by Martin Kleppmann
Released March 2017
Publisher(s): O'Reilly Media, Inc.
ISBN: 9781491903100

...

Don't know if this free resource is related: learning-notes/books/designing-data-intensive-applications.md,  https://github.com/keyvanakbary/learning-notes/blob/master/books/designing-data-intensive-applications.md

===================

Deleted contents of C:\Users\USER_NAME\.gradle\caches
C:\Users\USER_NAME\.android\build-cache is not there
C:\Users\USER_NAME\.android\cache is already empty.

Also will follow ChatGPT instructions:
Cleaning an Ignite React Native project (or any React Native project) can help resolve weird build issues, outdated caches, or package conflicts. Here's a comprehensive step-by-step guide to clean it up properly:

1. Clear Node Modules and Reinstall
rm -rf node_modules
rm -rf yarn.lock package-lock.json
yarn install   # or npm install

2. Clean Watchman Cache (macOS/Linux) - does not apply to me

3. Reset Metro Bundler Cache
npx react-native start --reset-cache

4. Clean Android Build
cd android
./gradlew clean
cd ..

5. Clean iOS Build (macOS only) - skipping

6. Delete Derived Data (iOS) - skipping

7. Rebuild and Run
npx react-native run-android
# or
npx react-native run-ios

Optional (Ignite-specific):
ignite generate screen ScreenName
ignite generate component ComponentName

--- end ChatGPT extract (edited) ----

Did (equivalent of): 1
Running 3 asked for latest react-native installation (which is a different version from react-native in package.json). Started and later aborted it.
Running 4 gave error:
* What went wrong:
Error resolving plugin [id: 'com.facebook.react.settings']
> Included build 'C:\Users\USERNAME\CurrProjects\VSCode\ReactNative\pizza-app\android\null' does not exist.
----
But I think that's b'cos I had deleted some folders in android directory of project.
Prior to running 7, I am running 'npm install'. That got done in around 3 minutes. node_modules size is 530 MB.
Running 7 as 'npm run android'. I expect this to take long as download speed now seems to be in 1 to 4 or 5 Mbps range. 
"0% EXECUTING [19m 7s]" ... So all the steps of initialization and configuration seem to have been repeated (which is what I wanted).
"64% EXECUTING [27m 53s]" ... So far, so good.
"90% EXECUTING [30m 1s]"

Then failed with what seems to be same error as before:
> Task :react-native-reanimated:configureCMakeDebug[arm64-v8a]
C/C++: CMake Warning in src/main/cpp/reanimated/CMakeLists.txt:
C/C++:   The object file directory
C/C++:     C:/Users/USERNAME/CurrProjects/VSCode/ReactNative/pizza-app/node_modules/react-native-reanimated/android/.cxx/Debug/632j1r55/arm64-v8a/src/main/cpp/reanimated/CMakeFiles/reanimated.dir/./
C/C++:   has 188 characters.  The maximum full path to an object file is 250
C/C++:   characters (see CMAKE_OBJECT_PATH_MAX).  Object file
C/C++:     C_/Users/USERNAME/CurrProjects/VSCode/ReactNative/pizza-app/node_modules/react-native-reanimated/Common/cpp/reanimated/NativeModules/NativeReanimatedModuleSpec.cpp.o
C/C++:   cannot be safely placed under this directory.  The build may not work
C/C++:   correctly.

> Task :react-native-reanimated:buildCMakeDebug[arm64-v8a] FAILED
C/C++: ninja: error: mkdir(src/main/cpp/reanimated/CMakeFiles/reanimated.dir/C_/Users/USERNAME/CurrProjects/VSCode/ReactNative/pizza-app/node_modules/react-native-reanimated): No such file or directory

FAILURE: Build failed with an exception.                                                                                           
...
  C++ build system [build] failed while executing:
      @echo off
      "C:\\Users\\USERNAME\\AppData\\Local\\Android\\Sdk\\cmake\\3.22.1\\bin\\ninja.exe" ^
        -C ^
        "C:\\Users\\USERNAME\\CurrProjects\\VSCode\\ReactNative\\pizza-app\\node_modules\\react-native-reanimated\\android\\.cxx\\Debug\\632j1r55\\arm64-v8a" ^
        reanimated ^
        worklets
    from C:\Users\USERNAME\CurrProjects\VSCode\ReactNative\pizza-app\node_modules\react-native-reanimated\android
  ninja: error: mkdir(src/main/cpp/reanimated/CMakeFiles/reanimated.dir/C_/Users/USERNAME/CurrProjects/VSCode/ReactNative/pizza-app/node_modules/react-native-reanimated): No such file or directory
...
BUILD FAILED in 31m 8s
========================

I had thought that the warning below may be the cause for the error:
C_/Users/USERNAME/CurrProjects/VSCode/ReactNative/pizza-app/node_modules/react-native-reanimated/Common/cpp/reanimated/NativeModules/NativeReanimatedModuleSpec.cpp.o
C/C++:   cannot be safely placed under this directory.  The build may not work
C/C++:   correctly.
----

So I manually tried creating filename (as just copy of .cpp file): C:/Users/USERNAME/CurrProjects/VSCode/ReactNative/pizza-app/node_modules/react-native-reanimated/Common/cpp/reanimated/NativeModules/NativeReanimatedModuleSpec.cpp.o
That worked!
So looks like CMake warning is not the issue.
==============


[Cmake to be upgraded to latest]
[Build the android app.]
[If above fails, use "$Env:CMAKE_VERSION = '3.31.0' in a powershell terminal" and retry above.]
====

Trying the above. I checked CMake latest version of 3.31.6 (3.22.1 was installed), and clicked on Apply which started the download (after a prompt). It got done quickly.

Now trying (after closing and reopening VSCode): 'npm run android'. 
Got what seems to be same error but in 15 seconds.
Hmm..
Now trying:
$Env:CMAKE_VERSION = '3.31.6'
npm run android
----
That's taking longer: "99% EXECUTING [1m 15s]"
It seems to have got done successfully! "BUILD SUCCESSFUL in 1m 19s"
After Android bundling and app getting installed on emulator (both took some time but not too much), the Ignite app's 'Log In' screen is shown. But I am being shown 'pizza-app isn't responding' message. But the app is responding to taps with later screens being shown. 
Closed the app and restarted it. Now the 'pizza-app isn't responding' message is not shown.

===================

Create a React Native app using Ignite boilerplate, https://blog.logrocket.com/create-react-native-app-using-ignite-boilerplate/

---------
Package.json for pizza-app has the following under "scripts":
    "start": "expo start --dev-client",
    "android": "expo run:android",
    "ios": "expo run:ios",
    "web": "expo start --web",
----

https://docs.expo.dev/more/expo-cli/ - covers npx expo start, npx expo run:android


---------------

I ran npm start:
> pizza-app@0.0.1 start
> expo start --dev-client
----
It started Metro bundler, mentioned using development build.
I located the debug (dev) APK in C:\Users\USERNAME\CurrProjects\VSCode\ReactNative\pizza-app\android\app\build\outputs\apk\debug dir with filename: app-debug.apk.
I started the Android Emulator through Android Studio. Then I uninstalled the pizza-app from emulator. Next I drag-and-dropped above app-debug.apk onto the emulator. It started the install and completed it quickly. But when I opened the app, it showed the blank screen with Expo icon. My blog post: Notes on React Native and Expo, https://raviswdev.blogspot.com/2024/12/notes-on-react-native.html explains an earlier similar issue I had faced (see the part having "Now I understand the issue I was facing on Android emulator when it simply showed blank screen with Expo icon in the middle.") One has to shake the device to open up the dev menu and then specify the dev server URL in it, after which the dev/debug app shows the app screen (perhaps driven by the dev server running on VSCode terminal). The solution to 'shake' the emulator of "Extended Controls) -> Virtual Sensors -> Move -> moving X Y Z seekbar" did not work this time. ... But closing the app and then reopening it showed the dev menu. Specifying the dev server URL led to app screen showing on emulator.

Now I want to try installing the apk on my phone and then seeing if it can connect to the dev server and show the app on the phone. It worked and the app showed the screens correctly. Hmm. That's quite satisfying though it took huge amount of time from my starting Ignite trial this time around, to get to this stage with only the boilerplate app and no changes made from my side. Now I wonder if I can create a preview production build app of this boilerplate app.

Am trying to run web app from the dev server running in VSCode terminal .... That got done quickly and the web app worked as expected. Hmm. Cool!

======================

pizza-app has an eas.json file. That file already has this build entry:
    "preview": {
      "extends": "production",
      "distribution": "internal",
      "ios": { "simulator": true },
      "android": { "buildType": "apk" }
    },
----

So let me try:
1) eas init  (To set up the project in eas server) 
[Worked. Created pizza-app on eas server]
2) eas build -p android --profile preview
 [It uploaded the project, queued the build and later started the build. Expo Doctor found one issue but proceeded further. Now 'Run gradlew' step is going on.
 Build finished in 10m 2s. Availablility is listed as 14 days.
Application archives:
- /home/expo/workingdir/build/android/app/build/outputs/apk/release/app-release.apk (67.5 MB)]
---
Seems like it succeeded. But note that both the profile and enviroment are shown as "preview" in eas.dev.
Downloaded the apk file on PC (in PizzaApp-Preview folder; dev APK created on PC is copied to PizzaApp-Dev folder). Also exited the build command on VSCode terminal (skipped install and run on Android emulator).

Uninstalled dev app from emulator. Installed preview app on emulator. Ran it (without any dev server running on VSCode terminal). It worked! Awesome!
Uninstalled dev app from phone. Installed preview app on phone (copied to phone from PC). Ran it (without any dev server running on PC). It worked! Awesome! I think it opens little faster than dev version.

====================

9 April 2025

Top React Native ESSENTIALS Tech Stack for 2025, https://www.youtube.com/watch?v=I_J7N0n5YPs , 16 min. 13 secs., by Simon Grimm, Jan. 2025.
...
List files & directories in zip file:
7z l zip-file-name
OR
7z l zip-file-name1 zip-file-name2 [* or *.zip should also work]


[On quick browse, it seems to be complicated:] How to list the files in a zip in powershell?, https://stackoverflow.com/questions/14204230/how-to-list-the-files-in-a-zip-in-powershell

====================


---------------------------
7 April 2025

To clear expo cache:
npx expo start -c
DG says that it could be used anytime you see something (odd) in the app (on running it).

In lesson-6, first useEffect's data variable dependency seems unnecessary. It could be an empty dependency array as the useEffect seems to need to run only once.

Lesson-6 app on web works as expected with local storage coming into play (so user data is saved and on refresh of web app, picked up)
....

Now wanted to retry loading app on phone.

Tried 'npx expo start -c' (in CrudApp folder) and then tried to load app on phone. Got the same error.


It gave a message: "The following packages should be updated for best compatibility with the installed expo version:" and then a list of them. I chose to fix dependencies. It did lot of install stuff.
Then tried 'npx expo start -c' (in CrudApp folder). The app loaded on phone via Expo Go!
On phone too, the app saves data to local storage and reloads it on restart. Great!
On phone, the status bar is shown both in light and dark mode.

lesson-7 works as expected both on web and on phone.
[id].jsx useEffect() does not seem to set ToDo state variable when the id is not found. That may result in a bug.
Went through the code and got a good top-level understanding of it.

----

PS C:\Users\{username}\CurrProjects\VSCode\ReactNative\react-native-course\CrudApp> eas -v
eas-cli/16.1.0 win32-x64 node-v22.13.1
...

DG tutorial does an 'eas init' before 'eas build:configure'.
EAS doc: https://docs.expo.dev/build/setup/ does not mention eas init.
But 'eas help init' on console gives info. on the command:
create or link an EAS project
...
https://docs.expo.dev/tutorial/eas/configure-development-build/ says "For any new project, the first step is to initialize and link it to the EAS servers. Run the following command:" ... "eas init" . I think this is what I followed to create Stickersmash apk. Strange that the tutorial page mentions 'eas init' but the regular/reference page does not!

The DG tutorial is mostly in sync with above tutorial/eas link. But https://youtu.be/WDunoPNBxKA?t=15044 covers an explanation of how eas build may check for presence of Android and ios directories in which case it may skip the cloud build presuming that the local build has been done. It further says that if .gitignore has /android and /ios entries then even if those directories are there in the project, eas build will do the (android and/or ios) (cloud) build(s).

It also mentions using: npx expo install --check [I ran it earlier on to fix the app not running on Expo Go issue as mentioned earlier.]
Then DG upgrades '    "@react-native-async-storage/async-storage": "1.23.1",' (from package.json) to (then) latest version (2.1.0)

That results in an Expo Doctor warning in EAS build but which does not prevent it from going forward and completing the development build.
Next step is to run 'npx expo start' (or, if that does not work, 'npx expo start --tunnel) in VSCode. It should start a 'development build' and show its QR code.
Then DG scans the earlier QR code put out by eas build on the phone which then goes ahead and installs the apk (from eas site).
On running the app, it looks for the dev server on PC. It needs a restart of the dev server on pc and then the installed app shows its screen.
DG stops at only development build and does not do a preview or production build.
....

Did the following for my project in VSCode terminal (in CrudApp directory) [I checked that I was already logged into eas]:
eas init
eas build:configure
eas build --platform android --profile development [It prompted me for installation of expo-dev-client which I accepted]
[I gave default responses for some prompts like Generate a new Android Keystore]
The project got uploaded and the build got queued with the message: "Build in progress" being shown in the terminal.
Got the message "Build finished"
https://expo.dev/accounts/.... shows the total build time as 7m 13s and availability as 13 days (for APK file).
Only Run Expo Doctor command was listed with a warning. Key part of it is:
Check that packages match versions required by installed Expo SDK
  The following packages should be updated for best compatibility with the installed expo version:
    @react-navigation/native@^6.0.2 - expected version: ^7.0.14
  Your project may not work correctly until you install the expected versions of the packages.
  Found outdated dependencies
  Advice: Use 'npx expo install --check' to review and upgrade your dependencies.
----
Hmm. Maybe I need to run 'npx expo install --check' again to avoid above warning.
But as the APK file did get created, I can go ahead with install of the APK on phone.
Clicked on Install in above expo.dev web link and was shown scan code which I picked up on phone (not through Expo Go).
Phone gave option to open a link on browser which I chose. Then I chose Build artifact install (also I first chose EAS Install which prompt appeared on bottom of phone which gave a short message about install and then the prompt disappeared). Build artifact install resulted in file being downloaded (140 MB) in Downloads folder. Moved the apk file to suitable folder on phone. Tapped it and chose Install (CrudApp). That got done quickly (note that MyFiles App settings were already set earlier to allow for APK installs).
Opened the app. It started 'Searching for development servers'.
...
Switched to VSCode on PC. Chose no to install app on Android. That exited the eas build command.
Now ran 'npm start'. It started the app 'Using development build'.
The CrudApp on phone did not pick up the development server on PC.
Using phone scan (not Expo Go scan), read the QR code of dev server on PC, and then opened the link in browser, which resulted in CrudApp screen getting activated. In a short time, the lower part of screen showed the developer menu message and then the upper part showed initial part of ToDos app screen. Closed the developer menu message and then the entire app screen showing ToDos was shown.
Modified ToDos in CrudApp on phone. Closed app and reopened it using its App icon. It took time to show the first screen but showed it correctly with modified data.
Great!!! I have been able to do all that DG showed in his tutorial in terms of creating the APK and installing and running it on phone.
I can now explore making a preview build on eas and use that APK on phone where I will not need a expo dev server to be running on PC. Fascinating!
Saw that the EAS app was also installed on phone and I could open it to see my EAS dashboard on phone.

---------------------------
3rd April 2025

Logged in to https://expo.dev/ with my username. Was able to see build activities of past but all output files seem to be deleted as the time period has expired.
Ran: npm install -g eas-cli

https://www.npmjs.com/package/eas-cli/v/0.24.1 has some info. on the commands
Also 'eas help' gives some info.
'eas whoami' lists the logged in user.

eas.json seems to be the main configuration file for eas. 'eas copy.json.txt' seems to be the original version.

Chose not to do an eas build as I think that is not required now.

...CurrProjects\VSCode\ReactNative\Expo-Tut\DownloadedAndroidAPK has two folders: StickerSmash-Dev and StickerSmash-ProdAPK each of which have an .apk file. This would be the outputs of eas builds (dev and preview) done in end Jan. 2025. Further, it seems that prod/preview APK was installed then in both phone and emulator and that installed app is still on them.

With this, my refreshing of StickerSmash app seems to be done.

==
Had a quick look at: Notes on using React Native without Expo framework and Expo Go, https://raviswdev.blogspot.com/2025/02/notes-on-using-react-native-without.html and associated project folder on PC. Opened main project folder in VSCode and confirmed that Expo framework is not used. Then I opened Android folder in Android Studio - that auto started a Sync (and "Gradle Daemon") which downloaded lot of stuff but finally gave a message: 'BUILD SUCCESSFUL in 1m 59s'. I decided not to spend more time on it as I think I will surely be using Expo framework for my future mobile apps even if I don't use Expo Go.

Got back to Dave Gray tutorial.

Lesson-5 of DG tutorial was also easy to refresh. The app ran right away and I could understand the code at a top level quite easily.

Switched to lesson-6 which resulted in download of that branch from remote. I get the impression that during my last look at this tutorial and associated code around two months back, I stopped trying out the app at lesson-5 and may have quickly browse-viewed the video tutorial for lesson-6 onwards. So from lesson-6, I am having to spend more time in this current look at the tutorial and associated code.

Ran npm install but that seems to have installed older version of Expo. So phone Expo Go could not open the app.
So used same fix as from earlier lesson-5 (see previous related post) of: npm audit fix --force
which updated Expo to 52.0.43
Now Expo Go could attempt to load the app on phone but gave a different error:
on PC VSCode:
 (NOBRIDGE) ERROR  Error: [Reanimated] Mismatch between JavaScript part and native part of Reanimated (3.10.1 vs 3.16.7).
    See `https://docs.swmansion.com/react-native-reanimated/docs/guides/troubleshooting#mismatch-between-javascript-part-and-native-part-of-reanimated` for more details. [Component Stack]
---
On phone the error message is different:
Error while updating property 'source' of a view managed by: RCTImageView
java.lang.Double cannot be cast to com.facebook.react.bridge.ReadableArray
-----

I am not sure whether it is worth spending time trying to understand and fix above error. Saw that the web app works. So maybe I will use only that. 

---------------------------
2nd April 2025
Sometimes Android Emulator continues to show old Expo app instance and does not update it to new instance till old instance is closed and then Expo Go is used to connect to URL provided on VSCode 'expo start' terminal process.
----
Android Emulator takes up full vertical height of screen and so its bottom part gets obscured by Taskbar. Solutions are: use Ctrl + Down to scale down (zoom out) (and Ctrl + Up to scale up (zoom in)), and to hide the Taskbar. Ref: https://stackoverflow.com/questions/29737499/how-can-i-resize-the-avd-emulator-window-in-android-studio.
-----
react-native-course of Dave Gray:
React Native Full Course for Beginners | Complete All-in-One Tutorial | 4 Hours, https://www.youtube.com/watch?v=WDunoPNBxKA, 4 hrs 25 mins, Dave Gray, Nov. 2024
GitHub: https://github.com/gitdagray/react-native-course . This repo has each lesson as a branch. Downloading the repo seems to download all branches but one has to use 'git checkout branchname' e.g. 'git checkout lesson-4' to switch that branch, view its files and do the npm install and start.
...
Switched to lesson-4, did npm install in MyApp folder and then ran npm start. That ran the app (through Expo) on web, Android Emulator and phone. It was straightforward though the npm install took some time, and Android Emulator initially showed an earlier app instance which had to be closed ... Overall, it is good that I could easily set up the project again and run the app through Expo. It is increasing my confidence in React Native app  development.

Now I have to go through the code and perhaps parts of the video that deal with it to refresh my knowledge of the app.
...

How To Handle Deep Linking in a React Native App, https://jscrambler.com/blog/how-to-handle-deep-linking-in-a-react-native-app : "Deep linking is a technique in which a given URL or resource is used to open a specific page or screen on mobile. So, instead of just launching the app on mobile, a deep link can lead a user to a specific screen within the app, providing a better user experience."

https://docs.expo.dev/router/basics/layout/ : "The Stack component implements React Navigation's native stack and can use the same screen options"

Going through above docs, code of lesson-4 and also comparing it to that of standard starter app, gave me a decent top-level idea of the code. If needed, I can delve into details by looking up the docs. I did not have to see the video.

Thought of taking a quick look at StickerSmash tutorial: https://docs.expo.dev/tutorial/introduction/ . I think I will go through it before moving on to Dave Gray lesson-5.

Running npm start in StickerSmash project folder resulted in development build coming into play which perhaps may be from Expo dev website where I would have created that build around 2 months back. To switch to Expo Go, IFIRC, I used 's' command. After that loading on Android Emulator (with 'a') resulted in an option on Emulator where I chose Expo Go. Then the android bundling activity started which took quite some time but eventually got done and the app got shown on emulator. It was similar on phone. ... So it was quite straightforward to run the app from this project after a break of 2 months (and after I moved the project folder to another folder). That's great!

Finished going through StickerSmash code and now have a pretty good idea of how it works though I have chosen not to delve into some details as I am sure that I will be able to do that when needed using the docs.

---------------------------
1st April 2025
After around 2 months, I am restarting my React Native learning. First step has been to refresh my knowledge about the various React Native project folders on my PC. Next step was to refresh my knowledge of the basic React Native tutorial: https://reactnative.dev/docs/getting-started . In that context, I logged some info. which is given below:

When I tried using the project folder I had for this tutorial (called AwesomeProject) with Expo Go, it did not work. Updated Expo go on phone and also am running 'npm update' on the project. npm update did not update Expo to 52 as the package.json entry has: " "expo": "~50.0.14",". I think I should re-create a simple Expo project.

Did that as testapp project. That works with Expo Go on phone. Trying it on Android emulator. It needs old Expo Go (SDK 50 I think which got installed today when I was trying out older AwesomeProject above!) to be uninstalled and new Expo Go (SDK 52.0.0) to be installed. Got stuck initially due to mobile data issues. Later around 10 to 10.30 PM, was able to get the download and setup done quickly (and automatically).

Saved starter testapp source code as testapp-XF-starter folder. Then in testapp project, ran 'npm run reset-project'. Made trivial change in index.tsx and it gets reflected almost immediately in Expo Go app running on phone. Next I deleted app-example or whatever the old code folder is called (I had to permenant delete to avoid some user owner related error). Now the app source code is very much simplified with an index.tsx main source file and an empty _layout.tsx file. There don't seem to be any other source code though an assets folder with one font and few images is present.
Later I deleted the assets folder also which results in a "Unable to resolve asset "./assets/images/icon.png" from "icon" in your app.json or app.config.js" warning in VSCode terminal. But that's OK. I want the app folder size to be minimum and use this as a trials base. Confirmed that this minimized app works. Saved source code as "testapp-XF-minimized-starter" with size of 854 KB. I should be able to use this folder to restart any simple trials.
Zipped the folders: 20250401-2120-testapp-XF-starter.zip (617 KB) and 20250401-2119-testapp-XF-minimized-starter.zip (465 KB).
Deleted old AwesomeProject that is now broken.

Was able to easily try out https://reactnative.dev/docs/getting-started examples like PizzaTranslator, ScrollView using simple testapp folder. Also was able to easily get the app running on Android emulator (press 'a' on VSCode terminal running 'expo start'). I think using Android Emulator this way is very convenient to test React Native with Expo apps.
----------------------------------

https://docs.expo.dev/more/expo-cli/#tunneling : "Restrictive network conditions (common for public Wi-Fi), firewalls (common for Windows users), or Emulator misconfiguration can make it difficult to connect a remote device to your dev server over lan/localhost." ... If Expo Go on phone cannot connect to Metro on PC, the afore mentioned link can help. In particular the command, "npx expo start --tunnel" may help (needs ngrok package to be installed).
---------------------------------

AwesomeProject in C:\TestRNWE

This AwesomeProject seems to correspond to info. in: Notes on using React Native without Expo framework and Expo Go, https://raviswdev.blogspot.com/2025/02/notes-on-using-react-native-without.html "Ran 'npx @react-native-community/cli@latest init AwesomeProject' again in another folder close to C drive root. It created the project and downloaded dependencies in around 3 to 5 minutes." ... "PS C:\TestRNWE\AwesomeProject>  npx react-native run-android"

Tried out the above project folder today (1st April 2025). Did the following:
1) Opened project folder in VSCode.
2) Ran 'npx react-native run-android' from VSCode terminal while in project root folder. That started Android Emulator but did not start this app on it. Cancelled the command in VSCode terminal and restarted it. Now it is downloading react-android-0.77.0-debug.aar (203 MB). I just noticed that in the earlier run of this command too it was downloading this file and it had got to 122 MB or so. I got confused by the Metro console window giving me an error on trying to reload the app ('r'). When I switched to the VSCode terminal window, I scrolled up and saw older messages which were reporting errors and thought that they were related to the current issue I was facing. Perhaps if I had simply waited in the earlier run today, it would have finished the download and then perhaps proceeded with loading the app in the emulator. ... Yes, after the download and extraction, the app got installed on emulator and is running on it.
-----------

Comments

Post a Comment