Notes on React Native

Last updated on 22 Dec. 2024

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)

----

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.