Notes on React Native

Last updated on 21 Jan. 2025

Note: Related post: 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 .

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:

https://www.intel.com/content/www/us/en/products/sku/75608/intel-celeron-processor-2955u-2m-cache-1-40-ghz/specifications.html

https://www.cpu-monkey.com/en/cpu-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.