Notes on React Native and Expo
Last updated on 4 Feb. 2025
Note: Related posts:
Notes on Android Emulator for running React Native developed app on 4 GB RAM PC, https://raviswdev.blogspot.com/2024/12/notes-on-android-emulator-for-running.html .
Notes on using React Native without Expo framework and Expo Go, https://raviswdev.blogspot.com/2025/02/notes-on-using-react-native-without.html .
My last look at React Native tutorial code seems to have been in April 2024: Notes on React Native tutorial and using Expo on my Android phone to explore the tutorial, https://raviswdev.blogspot.com/2024/04/notes-on-react-native-tutorial-and.html, LU 20 April 2024. But that seems to have been an earlier version tutorial as it seems to match https://reactnative.dev/docs/0.73/environment-setup (React Native 0.73) but does not match the current version tutorial: https://reactnative.dev/docs/set-up-your-environment (shows version as React Native 0.76)
----
The official tutorial, it seems: https://reactnative.dev/docs/getting-started .
-----
React Native for Beginners tutorial, https://www.youtube.com/watch?v=Hp9sTsiTZ_I , 22 mins, Dave Gray, Oct. 2024.
Extensions used: React Native Tools, Expo Tools
Full course video alternative to above video which is just a first part video:
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.
Finished watching above video.
After a couple of retries, was able to build and run first app (lesson01) on web and mobile.
Dave Gray tutorial lesson-4 branch uses expo 51, but app loaded on phone needs expo 52. To load expo 51 on phone requires 'sideloading' (from apk file disabling some protections) which I think is too risky for me at this stage.
Alternative fix was to try to upgrade app to expo 52.
Tried suggested fix of:
npx expo install expo@^52.0.0
which went through followed by
npx expo install --fix
which gave some (fatal) errors.
Then tried:
1) Deleted node modules
2) npm install
3) npm audit fix --force
which gave messages of 'Updating expo to 52.0.18, which is outside your stated dependency range.' and
'Updating expo-router to 3.1.0, which is a SemVer major change.'
So that seems to have updated expo to v52 from v51!
4) npx expo install --fix
This sequence succeeded and I could successfully run 'npm start' afterwards.
The web app seems to work.
The app on expo on phone/mobile worked!
----
Committed some changes above process automatically made to lesson-04 branch.
Switched to lesson-05 and cd'd to CrudApp. Doing the following:
1) npm install
2) npm audit fix --force
3) npx expo install --fix
4) npm start
Trying to load Expo app on phone (before web) ... Very slow but eventually it did load! Then the app. was reacting fast. So only initial load was slow ... And the loading icon was missing but that seems to be a minor issue (the video also covers that issue IIRC).
Now am trying to open web app ... Took some time but lesser than above Android app load. And then the app. ws reacting fast.
When using both Android app and web app the to do lists are not in sync. Perhaps that's expected behaviour - don't know.
Hmm. That's cool! Later I could look at how apk's can be made of say the last DG tutorial app (lesson), and then try it out on H96Max where I can take some risks of installing apks (sideloading).
===================
From React to React Native in 12 Minutes, https://www.youtube.com/watch?v=6UB3gw3SKfY , 12 min. 32 secs., July 2024 by Simon Grimm.
Why Choose React Native For Mobile App Development?, https://ripenapps.com/blog/react-native-for-mobile-app-development/ , 25 Sept. 2024.
Build apk file from React Native Application, https://www.youtube.com/watch?v=2yHI0e4MzUE, 5 min. 45 secs, Aug. 2023.
[Covers APK creation initially which can then be used on Android device without using Google Play Store; IIRC, doesn't need Android Studio] How to Build, Test, and Deploy Your React Native Expo App to the Google Play Store, https://www.youtube.com/watch?v=pb6OvvSi8Qk , around 14 mins, Mar. 2023
===========
Build APKs for Android Emulators and devices, https://docs.expo.dev/build-reference/apk/
From timestamp (3 min. 27 secs) in following video till around 10 min. 30 secs., building apk is covered: https://www.youtube.com/watch?v=fUS_BjOHi-c&t=207s : Building an Android APK with React Native Expo | Tutorial EAS Build
========
What are the risks of sideloaded Android applications?, https://www.samsungknox.com/en/blog/what-are-the-risks-of-sideloaded-android-applications , April 2020.
=============
https://github.com/ReactNativeNews/React-Native-Apps, "React Native Apps is a showcase of only open source React Native apps. These apps do not have to be published to the App Store or anything, they are simply here to showcase work from within the community, and to help React Native developers by seeing how others are building and structuring their applications."
React Native Developer, Step by step guide to becoming a React Native developer in 2025, https://roadmap.sh/react-native
Ignite - the battle-tested React Native boilerplate, https://docs.infinite.red/ignite-cli/ : "With over seven years of active development, Ignite is the most popular React Native app starter boilerplate for both Expo and bare React Native." ... Has screenshots of the boilerplate that are very impressive.
Getting Started with Ignite, https://www.youtube.com/watch?v=KOSvDlFyg20 , 13 mins, Sep. 2023 (by Ignite guy Jamon)
Robin Heinze - Sweetening React Native Development With Ignite (Chain React 2024), https://www.youtube.com/watch?v=dNWkJOpD6YE , around 25 mins, Aug. 2024 (by Ignite person)
Ignite 9 is all-in on...EXPO?, https://www.youtube.com/watch?v=QmkMsUYrTlk , around 11 mins, Dec. 2023 (by Ignite person)
Intro to MobX-State-Tree, https://www.youtube.com/watch?v=n_VjjJxyd8Q , around 15 mins., Feb. 2024 (by ignite guy Jamon)
Ignite X - Best New Features!, https://www.youtube.com/watch?v=COwz5OBTmQE, 5 min. 26 secs. Oct. 2024 (by Ignite person JP)
21 Jan. 2025 Update
Expo and Ignite, https://docs.infinite.red/ignite-cli/expo/Expo-and-Ignite/ : "Now in version 10 (or Ignite X), we no longer support the option for the Expo Go during setup. This is due to Expo's recommendation for building and distributing production applications." .. "You can of course convert your Ignite project back to being Expo Go compatible."
Tools for development, Expo Go, https://docs.expo.dev/develop/tools/#expo-go : "Note: Not recommended for building and distributing production apps to the app stores. Instead, use development builds."
My understanding of the above: So only Expo Go (sandbox) is not supported by default in Ignite version 10 (seems to be latest version). The Expo framework is still supported. Developers will have to use the Expo development build to use Ignite default setup with Expo.
Further, to use Expo Go with Ignite version 10 there seems to be some procedure to be followed. So Expo Go can still be used with Ignite version 10 after following this procedure.
End 21 Jan. 2025 Update
My AMD FX-4100 quad-core PC stopped working few days back. Probably the motherboard has died (bought in 2017 and repaired in 2021). I am exploring upgrading to low-end i3 (quad-core) 10th or 12th gen. Meanwhile I am using my fallback computer - Dell Mini-Laptop (DML) which has low config of Celeron 2955U (dual core) but with 4 GB RAM and SSD. I tried out creating ignite starter project using npx on DML. Downloading files with npm took super-long and after all that the build crashed. Perhaps I simply need to try it out on a more powerful machine for it to work. The plus side was that the source code of the starter project was available to go through.
==================
What Is React Native? Complex Guide for 2024, https://www.netguru.com/glossary/react-native
=================
20 Jan. 2025: Tried out React Native app build and run on my Dell Mini Laptop (DML): Inspiron 3137, https://downloads.dell.com/manuals/all-products/esuprt_laptop/esuprt_inspiron_laptop/inspiron-11-3137_reference%20guide_en-us.pdf .
DML config: Intel Celeron 2955U (Dual core, 1.4 GHz), 4 GB RAM
Intel Celeron 2955U:
Note that I have connected PC monitor (22 inch), keyboard and mouse of my regular desktop PC (OldPC) to DML and so user interface wise it is as if I am using my desktop PC except that the PC box is DML instead of my desktop PC. DML display is only 11.6 inch.
Was able to build and run ReactNative\rilesson01 from OldPC backup on DML. Steps followed:
1) Copied ReactNative\rilesson01 from backup dir to work dir
2) npm install (in VSCode)
3) npm start - Succeeded with some warnings
4) Opened web app (from link shown) - Took lot of time to get loaded but eventually got loaded and worked.
5) Opened Android app using Expo Go on my Samsung M21 phone - Took lot of time to get loaded but eventually got loaded and worked.
Was able to build and run CrudApp of ReactNative\react-native-course from OldPC backup on DML. Steps followed:
1) Opened VSCode from react-native-course directory. Note that various lessons are in various git branches. Initially VSCode did not show git data due to some Workspace Trust issues (I don't think I got the option to trust or not trust when I opened VSCode from this directory). Used some link/button which let me specified workspace as trusted. Then git data was shown and I could see that the current branch was lesson-5.
2) cd'd to CrudApp
3) npm install
3) npm start - Did not take very long .. succeeded with some warnings
4) Opened web app (from link shown) - Took lot of time to get loaded but eventually got loaded and worked. I could add new To dos, delete old Todos, mark a Todo as done and change it back to undone. App was reacting quickly.
5) Opened Android app using Expo Go on my Samsung M21 phone - Took lot of time to get loaded but eventually got loaded and worked. I could add new To dos, delete old Todos, mark a Todo as done and change it back to undone. App was reacting quickly.
Fascinating that DML with its Intel Celeron 2955U (Dual core, 1.4 GHz), 4 GB RAM config was able to build and run these React Native tutorial apps using Expo Go. It was slow to load the app both on web and mobile but once the app got loaded, it was quick to react to user input. I wonder whether code changes will result in quick changes in running app (hot reloading) like, if I recall correctly, was the case when I used it on the AMD FX-4100 (3.6 GHz, quad core), 4 GB RAM oldPC. I think what this means is that students/learners who are on a low budget but want to learn React Native could use a low-end PC like DML along with Expo Go. But this may not be good enough perhaps even for small production app development. I don't know that as of now as I have not reached that point yet.
=================
[Entry probably dated around 22nd Jan. 2025:]
Learn the Basics, https://reactnative.dev/docs/tutorial is a very short tutorial that's useful even if its coverage is very small but it does not show a left hand side panel and so I don't know where exactly it fits in with the official tutorial which is longer and has multiple pages: https://reactnative.dev/docs/getting-started
Somewhat quickly, went through 'The Basics' section of React Native documentation (1st section link: https://reactnative.dev/docs/getting-started). It was quite easy to read and understand. But I need to use the core components covered in some React Native project.
Had a very quick look at Workflow and UI & Interaction sections.
Quick look at Networking, https://reactnative.dev/docs/network indicates that standard fetch and even axios is supported. Has example code for fetch.
...
Core Components and APIs, https://reactnative.dev/docs/components-and-apis gives an over of core components. Left sidebar has links for various core components. ... First API link: https://reactnative.dev/docs/accessibilityinfo .Left sidebar has links for various APIs.
Hmm. Quick browse of above pages have given me a decent top-level idea of React Native programming using core components and APIs.
https://expo.dev/ : "Expo and EAS are an ecosystem of tools that help you" (develop review & deploy)
"Create universal native apps with React that run on Android, iOS, and the web. Iterate with confidence."
Impressive home page!
Tutorial: Using React Native and Expo, https://docs.expo.dev/tutorial/introduction/
Expo Go app. on phone was adding --/ to about link and so not finding it. Solution was to update Expo Go App. on phone! Then it worked correctly.
The hot update feature does not seem to work at times (tabs was not working till I forced the update). Refresh of web app. forced the update and worked. On Android Expo Go, I had to close the app and reopen/relaunch it from Expo Go (Home page) to force the update at which time it worked.
In chapter 2, I used for tabs header and tabbar I used: backgroundColor: '#086385',
instead of colour specified in tutorial as the latter was not distinguishable (to me at least) from the main page colour.
[1 Feb. 2025 Note
IFIRC, till chapter 2 of the abovementioned React Native and Expo tutorial, I was using my low-end Dell Mini Laptop (DML). On 30th Jan. I continued the tutorial but now on my upgraded PC. The notes below were updated or added on or after 30th Jan.
end 1 Feb. 2025 Note]
Quickly completed the tutorial getting overview info. but without delving into code details. However, for each chapter, I updated the tutorial source code and ran it to confirm that it worked properly.
Then I went to next step of trying out development build: https://docs.expo.dev/get-started/set-up-your-environment/?mode=development-build . Issues faced are given below:
1) "The following issues were found when validating your dependencies against React Native Directory:
No metadata available: dom-to-image
Advice:
- Update React Native Directory to include metadata for unknown packages. Alternatively, set expo.doctor.reactNativeDirectoryCheck.listUnknownPackages in package.json to false to skip warnings about packages with no metadata, if the warning is not relevant."
I solved it by adding below json entry in package.json and changing "listUnknownPackages" to false . Ref: https://docs.expo.dev/versions/latest/config/package-json/
{
"expo": {
"doctor": {
"reactNativeDirectoryCheck": {
"enabled": true,
"exclude": ["/foo/", "bar"],
"listUnknownPackages": true
}
}
}
}
====
That solved 1st EAS build error
2) For 2nd EAS build error, as advised by error report, ran 'npx expo install --check'
3) EAS error: "✖ Prebuild failed
Error: [android.dangerous]: withAndroidDangerousBaseMod: ENOENT: no such file or directory, open './assets/images/splash-icon.png'
Error: [android.dangerous]: withAndroidDangerousBaseMod: ENOENT: no such file or directory, open './assets/images/splash-icon.png'"
I have to look into solving this error.
=============
31 Jan. 2025
To fix EAS 3rd error, in app.json changed line to:
"image": "./assets/images/splash.png",
---
Earlier it referred to splach-icon.png (which was non existent).
Trying build now. It is taking too long! Perhaps over 15 minutes as of now. Earlier builds which gave errors perhaps at stage before actual build completed much faster though some of that also took some minutes, IFIRC.
Eventually the build finished (seems to have been successful)!
[Build stats from expo.dev: Status: Finished, Start time: Jan 31, 2025 3:54 PM, Wait time: 0s, Queue time: 44s, Build time: 11m 18s Total time: 12m 3s]
The app is 168 MB (trying to run on emulator and so app is getting downloaded first)
Why did my APK size increase after upgrading to React Native 0.73?
React Native 0.73, which is used in Expo SDK 50, bumped the Android minSdkVersion to 23. This had the side effect of changing the default value of extractNativeLibs to false.
If set to false, your native libraries are stored uncompressed in the APK. Although your APK might be larger, your application loads faster because the libraries load directly from the APK at runtime.
------
It shows a table with SDK 49 having APK (debug) as size of 66 MB whereas SDK 50 has APK (debug) has size of 168.1 MB (which tallies with what I got). The APK release variant is 27.6 MB for SDK 49 and 62.1 MB for SDK 50. But Google Play store size is same and only 11.7 MB.
useLegacyPackaging can be set to true in gradle.properties or by using expo-build-properties to revert to previous behaviour.
==========================
On desktop VSCode, the download got stuck at "Downloading app (167 MB / 168 MB)" for many minutes. Eventually I cancelled it.
Then scanned QR code from phone which led to link on eas server IFIRC where I had an install apk or something like that button. That too started downloading this 168 MB file! But it downloaded it quite fast as compared to desktop. Transferred that file to PC using 'Link to Windows' app and 'Phone Link' on PC.
Was able to install the app on Android device emulator by dragging file on to it (used Ctrl for copy instead of move). But on running the app, there was a problem of blank screen with Expo icon in the middle.
Also installed the apk on Samsung phone by overriding warning and allowing My Files app to be a source for apk install. Later I disallowed install for 'My Files' app (back to safe settings as earlier).
But running the app on phone brought up an Expo screen (not Expo Go but Expo only) advising that a development server has to be started. The video below helped me to understand that to some extent.
How to create and run a cloud build for Android | EAS Tutorial, https://www.youtube.com/watch?v=D612BUtvvl8 , 7 min. 23 secs, by Expo, 27th Jan. 2025.
I understood that we need npx expo start to be running on PC. I used phone's scan (not Expo Go's scan) to read the scan code shown by npx expo start. That started the app. Note that Expo Go was not running.
Introduction to development builds, https://docs.expo.dev/develop/development-builds/introduction/ :
A development build is a debug build of your app that contains the expo-dev-client package. By using development builds instead of Expo Go, you gain full control over the native runtime, so you can install any native libraries, modify any project configuration, or write your own native code. With Expo development builds, you are building your own native app, while with Expo Go you are running your project in a sandboxed native app environment.
-----------
How are development builds different from Expo Go?, https://docs.expo.dev/develop/development-builds/introduction/#how-are-development-builds-different-from-expo
If the dev server ('npx expo go') is not running and one runs the app on phone, after splash icon, it shows a blank screen with Expo icon in the middle. To access the settings for dev server from this screen, shake the phone or long press with three fingers.
These settings do not seem to have a scan option. The 'Searching for development servers' does not pick up the expo server started later on. But it says, "Alternatively, open the Camera app and scan the QR code that appears in your terminal". Camera app -> copy url ... In app's Expo settings, used manual URL (or something like that) and pasted url there ... Connect -> App started loading and loaded properly. [Open in browser is the other option camera app gave. Using that also worked and was easier - no need to copy-paste].
...
Now I understand the issue I was facing on Android emulator when it simply showed blank screen with Expo icon in the middle. At times, it shows the dev menu at start time but most of the time it does not do so.
But how to use shake gesture (or three fingers long-press) on Android emulator to bring up dev menu?
How can I shake an Android Emulator device in Android Studio 3.0?, https://stackoverflow.com/questions/48344247/how-can-i-shake-an-android-emulator-device-in-android-studio-3-0
Ctrl+M did not work. [Even after starting emulator as a separate window it did not work (suggested by some article).
But "Goto Setting->Virtual Sensors in emulator menu" .. "Click on Move checkbox" .. "Now try moving X Y Z seekbar" suggestion led me to try: Extended Controls (three vertical dots on top of device emulator) -> [opens up separate window ... Extended Controls) -> Virtual Sensors -> Move -> moving X Y Z seekbar.
That worked! The dev menu showed up on Expo app in Android emulator.
Copy-pasting dev server url into "Enter URL manually" and pressing Connect, does the job. The app gets loaded. On closing the dev window, the app gets shown (on the Android emulator). The app works on the Android emulator as expected (including placing emojis on loaded pics and saving them (as new pics automatically)).
----
In Android Emulator, to close a running app, in recent apps view, click and hold bottom part of app card and drag up to top of device.
===============
How to reduce APK size in react native expo, https://www.4waytechnologies.com/blog/how-to-reduce-apk-size-in-react-native-expo
===============
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
The build got done successfully with build time of 13 min 14 secs (plus 1m 19s wait time) (on 31 Jan. 2025).
APK Download size: 77.6 MB.
I downloaded the APK on PC and transferred to phone (using Phone Link and 'Link to Windows').
On both Android emulator and my Samsung phone, I uninstalled the dev version and installed this production version. The app runs right away. Expo dev does not seem to be in the picture. Further, the app. loads fast both on emulator and phone.
The main functionality of the app seems to be working OK on both but on Samsung phone, the status bar is shown as a blank white bar (but it is OK on standard (Pixel) Android emulator). I have also noticed that if I try out slightly odd stuff then the app can freeze on emulator (have not tried such stuff on phone). Also having both dev and prod version on emulator created some confusion and Android emulator itself got stuck and had to be 'cold booted'.
Hmm. I have been able to run the Expo tutorial app on Expo Go sandbox as well as build the Expo tutorial app (dev version and production version) using EAS, install it directly as an APK on my Samsung M21 phone as well as Android emulator and run it on them. That's nice!
--------
1 Feb. 2025
EAS stands for Expo Application Services. Ref: https://expo.dev/eas , https://docs.expo.dev/eas/ .
------
2 Feb. 2025
https://docs.expo.dev/workflow/overview/ - Seems to be a good overview of Expo app dev
Importing Images With React, https://stackabuse.com/importing-images-with-react/
For tutorial app., I tried to switch to Expo Go with 'npx expo start' but by default the server used the 'development' build. On phone, I did not have development build app. Instead I had production APK app. So Expo Go app on phone ran the app but changes made through VSCode in project source files were not reflected in the running app on phone.
Saw that there was some command ('s') on the server running on PC to switch to Expo Go build (instead of development build). Initially I did not understand that using that command restarted the server with a new scan code. Later I understood that and then was able to use Expo Go app on phone to scan the 'Expo Go' build scan code and then the running app refleced the source code of the project. Changes made to the source code got immediately reflected in running app.
The status bar being shown as a white bar with no visible content issue is not there for the 'Expo Go' app running on Samsung M21 phone. That issue is there only for the production APK app.
------
3rd Feb. 2025: Over past few days, went through the code of expo tutorial is little more detail but skipped styling part. Also skipped the gestures chapter code details. Now am more comfy with my understanding of expo tutorial code excluding gestures chapter.
---
4th Feb. 2025: Readers may want to see my post: Notes on using React Native without Expo framework and Expo Go, https://raviswdev.blogspot.com/2025/02/notes-on-using-react-native-without.html .
Comments
Post a Comment