More notes on React Native, Expo etc.

Last updated on 4th 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

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

Logged in to https://expo.dev/ with ravisiyer 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 (and Ctrl + Up to scale up), 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