Notes on learning stage of developing my own React Native education app using Expo Framework

Last updated on 10 Aug 2025

This post is a continuation of: Notes on learning stage of developing my own React Native education app using Expo Framework - Part 1.

Main tutorial used for learning: Simon Grimm: Build Your Own MASTERCLASS clone in React Native, https://www.youtube.com/watch?v=fO3D8lNs10c , 4 hrs. 42 mins, Mar. 2025,

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

Possibly on 4th or 5th of July 2025

I had started viewing the above video perhaps in April 2025 but then felt I need to get some exposure to React Native and Expo. So I migrated an earlier Dave Gray tutorial CrudApp which IIRC used only React Native, to React Native and Expo. That work is covered in the above post and that was done from 18 Apr (2025) to around 21/22 Apr

Key periods reflected in above post dates:

Phase 1: 18 Apr (2025): Beginning tutorial but switching to Dave Gray app work mentioned above quite quickly. Probably just a day or so of this activity.

Phase 2: 21/22 Apr to 25 Apr. This was followed by a break of around 3 weeks.

Phase 3: 15 May to 24 May

-----------

Now I am restarting the work after another break. That will make it:

Phase 4: 4th or 5th Jul to -

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

5 Jul 2025

Was able to run SG lms app on DPC on both web and Android emulator.

Frontend folder: SG-EduApp\lms

Backend folder: SG-EduApp\Ravi-lms-api

[At some point around 19 May 2025, I renamed SG-lms-api folder to Ravi-lms-api and modified its .gitignore to ignore database and image files and thus reduce the .git folder size. info.txt file in SG-EduApp has details.]

I had to check ip address and set in .env file in frontend:

EXPO_PUBLIC_STRAPI_API_URL=http://{ip-addr}:1337

The Android app needed two or three retries but then it came up properly.

Both web and android apps remembered my Google logins properly.

I think now the app on my desktop PC (DPC) is roughly at this point in the video: https://youtu.be/fO3D8lNs10c?t=6499 .

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

20:19 08 August 2025

Restarting study and code-along of SG lms app on DPC after a break.

The app top-level folder has got renamed (NIBSProj is the parent folder now whereas earlier it was NotInBackupScript). That may break current frontend build and may need a rebuild.

Frontend folder: lms

Backend folder: Ravi-lms-api

Was able to run backend (in Ravi-lms-api), with: npm run develop

Strapi admin (http://localhost:1337/admin) userid: riyer02@gmail.com, password: ... worked straight away and I was shown last edited and last published database entries.

I did not have to do steps like clean node_modules and reinstall it.

Tried out front-end (lms) with: npm run start (without any clean and rebuild).

Opened web app at http://localhost:8081/ , showed login, was able to login with Google id. But am not being shown data in My Studio and Browse courses.

Changed ip address in lms .env to current pc ip address:

EXPO_PUBLIC_STRAPI_API_URL=http://192.168.137.1:1337

Now it shows the backend data (image and text in My Studio, and two courses in Browse Courses).

Hmm. So web app is not impacted by parent folder rename.

Opened Expo development build Android app using Scan code of phone (not in Expo Go). Was able to login but am not being shown data in My Studio and Browse courses.

Saw this error on VSCode terminal:

DOM Bundling failed 413ms node_modules\expo\dom\entry.js (1 module)

Unable to resolve "./../../../../../../NotInBackupScript/SG-EduApp/lms/components/HomeBlock.tsx" from "node_modules\expo\dom\entry.js"

-----

This is due to folder rename of NotInBackupScript to NIBSProj.

Tried: npm start -- --clear (Based on Gem input)

Still got the same error.

Deleted .expo folder - got same error

So will now do clean rebuild:

1) Delete node_modules and package-lock.json

2) Delete .expo

3) npm install

4) npm start -- --clear

First npm install gave some error and said it could be due to network connectivity (It was done slightly after 9 PM on Jio 4G).

After node_modules delete again (0 files but some folders), npm install again succeeded. It said:

"added 1256 packages, and audited 1257 packages in 3m" .. "found 0 vulnerabilities".

Ran: npm start -- --clear

Now the DOM bundling error is gone. Also noted that it took quite some time for the step: Android Bundled 35690ms node_modules\expo-router\entry.js (1602 modules)

Looks like it recreated node_modules\expo-router\entry.js which was the source of the DOM bundling error earlier on.

But now there is another error:

(NOBRIDGE) ERROR ReanimatedError: [Reanimated] Native part of Reanimated doesn't seem to be initialized (Worklets).

See https://docs.swmansion.com/react-native-reanimated/docs/guides/troubleshooting#native-part-of-reanimated-doesnt-seem-to-be-initialized for more details. [Component Stack]

(NOBRIDGE) WARN Route "./(app)/(authenticated)/(tabs)/my-content.tsx" is missing the required default export. Ensure a React component is exported as default. [Component Stack]

(NOBRIDGE) ERROR ReanimatedError: [Reanimated] Native part of Reanimated doesn't seem to be initialized (Worklets).

See https://docs.swmansion.com/react-native-reanimated/docs/guides/troubleshooting#native-part-of-reanimated-doesnt-seem-to-be-initialized for more details. [Component Stack]

---

The app opens on phone via dev build Expo. But it does not show home page contents and no courses.

Stopped and ran: Ran: npm start -- --clear

Checked the web app. That seems to work fine. Home page data is shown as well as two courses.

Tried something that Gem suggested wrt babel.config.js that did not work. Then expo prebuild aspect came up.

Restored babel.config.js to earlier contents.

So will now do clean rebuild:

1) Delete node_modules and package-lock.json

2) Delete .expo

3) npx expo prebuild --clean

4) npm install

5) npm start -- --clear

To do the above 22:06 08 August 2025

[Probably on 9 Aug. 2025]

I had forgotten about expo prebuild due to break for some time from React native! Now I will go through the earlier notes on SG edu app checking for install steps. If required, I can look at Launch Timestamp app too.

As per first notes post, npx expo prebuild has to be run after npm install. I think Gemini was suggesting before npm install. .... I could try running expo prebuild in the project as it is now without deleting and reinstalling node_modules.

Search This Blog

Ravi S. Iyer: Software Development

Notes on learning stage of developing my own React Native education app using Expo Framework - Part 2

Comments

Post a Comment

Archive