Notes on React Native tutorial and using Expo on my Android phone to explore the tutorial

Last updated on 20 Apr. 2024

The official tutorial, it seems: https://reactnative.dev/docs/getting-started . Provides a working web view and "The code is live and editable, so you can play directly with it in your browser." which makes it very interesting. The Android view is very slow as one has to wait in some "Account-based queue". I think this tutorial would be very worth it as even if I don't see the Android view (or iOS view) due to it being stuck in the queue, I get exposure to the coding and see the web view. So I may get a good feel of React Native by going through this tutorial.

I followed the steps in 'Expo Go Quickstart' in Setting up the development environment, https://reactnative.dev/docs/environment-setup to see if I could have a test React Native project shown on my Samsung M21 Android phone. I was successful in that! Key steps I followed were:

1. Ran 'npx create-expo-app AwesomeProject'
2. Opened AwesomeProject folder in VSCode
3. In VSCode terminal, ran 'npx expo start'
4. On my Samsung M21 Android phone, installed Expo (searching for expo go listed it).
5. On opening Expo and scanning QR code shown on VSCode terminal by 'npx expo start', I had to wait for some time and then got an error. I was wondering whether it was a network error as the mobile phone and desktop computer running VSCode have to be on same network (and in my case, it was). The url shown by 'npx expo start' on VSCode terminal was exp://192.168.(x).(y):8081 [x and y are masked numbers]. I tried using http:// instead of exp:// with same IP address and port on Chrome on desktop. I got a JSON object. I tried using the same on Chrome on my Android phone and I got a similar JSON object on it too. That seemed to confirm that there was no network connectivity problem. Then I tried option of 'Entering URL manually' on the Expo app on my mobile where I specified the above exp:// URL. That worked! The expected single line output was shown on the Android phone. It was great to see that. I modified the app.js file to have an additional line. On save, that line got immediately shown on mobile. [20 Apr. 2024 Update: Now I tried Scan QR code to run the app on Expo on mobile and it worked.]

The nice thing about the above is that without Android Studio and mobile emulator (which seems to need 8 GB RAM PC while my PC RAM is 4 GB), I was able to see the app. on my Android phone.

https://reactnative.dev/docs/more-resources#example-apps links to  https://github.com/ReactNativeNews/React-Native-Apps , what seems to be an impressive list of apps.