My ReactNative Journey - 3 - Configuring VS Code, Using the Expo CLI and setting up Expo GO on the emulator

Configure VSCode for React Native Development

VSCode provides settings for Themes, Editors etc for comfortable viewing of the code editing environment. It provides built in support for Code Completion, Navigation and Refactoring. It helps with Syntax highlighting, Bracket Matching,  Auto Indentation, Box Selection, adding Code Snippets and more.

It also provides optional 3rd party code libraries, known as extensions. These are very helpful in making the development environment much easier.

Some interesting plug-ins are:

  • Material Icon Theme - to change the file icons that we see in the folder/file explorer view. 
  • VS Code ES7 React/Redux/GraphQL/React Native Snippets - This extension helps complete your lines of code and includes shortcuts for repetitive componens.
  • React Native Tools - for debugging and running projects easily
  • Color Highlight - Highlight web colors in your editor.
  • Bracket Pair Coloriser - This used to be an extension, but is now part of VSCode itself.
  • npm Intellisense - to autocomplete npm statements
  • GitLens - Cleans cluttered code. Use Alt-Shift-F to structure your code.

Explore much more in the native VSCode toolbars. It provides lots of features to make development easier.

Running the App 

Installing Expo GO on the emulator

This is a step missing from the documentation. We need to install Expo Go on the device (emulator or physical device, whichever is being used). Type this command from the project folder on the terminal.

expo client:install:android

This will install expo Go on the device.

*** Note that the command 'expo start' will install 'Expo Go' on the device/emulator by itself.

Running the app

From the app folder, ipen the terminal, and run any of the three commands below. 

expo start OR npm run android OR react-native run-android
This will open Metro Bundler and wait for you to choose the device on which you want to run the app.

› Metro waiting on exp://192.168.31.27:19000

› Scan the QR code above with Expo Go (Android) or the Camera app (iOS)
› Press a │ open Android
› Press w │ open web
› Press r │ reload app
› Press m │ toggle menu
› Press d │ show developer tools
› shift+d │ toggle auto opening developer tools on startup (disabled)    
› Press ? │ show all commands

Choosing 'a' will by default run on the physical device. To avoid this and ensure it runs from an emulator, press 'Shift+a'. This will open up the list of devices for you to select from.
› Opening on Android...
? Select a device/emulator »
>   Redmi_Y2 (device)
    Pixel_XL_API_28 (emulator)
    Pixel_XL_API_33 (emulator)
You can now select the device you want the application to run on.

Things that can go wrong
1. Sometimes the build fails, as in my case. Scrolling to the top, I see this line - 

> Task :app:installDebug
Installing APK 'app-debug.apk' on 'Redmi Y2 - 9' for app:debug
Installing APK 'app-debug.apk' on 'Pixel_XL_API_28(AVD) - 9' for app:debug
> Task :app:installDebug FAILED
37 actionable tasks: 2 executed, 35 up-to-date
Unable to install D:\ReactNative\MainApp\android\app\build\outputs\apk\debug\app-debug.apk

com.android.ddmlib.InstallException: INSTALL_FAILED_INSUFFICIENT_STORAGE        at com.android.ddmlib.internal.DeviceImpl.installRemotePackage(DeviceImpl.java:1310)

Soltion: I think this may be because I already have an emulator that is running another application. On the emulator, went back, and switched the emulator off and on. I guess, one can also uninstall the previous application to solve the problem.

Now I get BUILD SUCCESSFUL. I can now see the app running on the emulator.

2. Soemtimes, the emulator won't open up, or act weird. There is a process called adb.exe that runs in the background. 

Solution: Terminating this process in the task manager allows a new version of the emulator to open up.

3. Sometimes, despite terminating the adb.exe process, there will be issues opening the emulator. e.g.

D:\ReactNative\wordle\node_modules\metro-hermes-compiler\src\emhermesc.js:77
          throw ex;
          ^
RuntimeError: abort(Error: protocol fault (couldn't read status): connection reset). Build with -s ASSERTIONS=1 for more info.
    at process.abort (D:\ReactNative\wordle\node_modules\metro-hermes-compiler\src\emhermesc.js:402:15)

What worked for me:  Resetting portproxy settings with the command
                 netsh interface portproxy reset
4. Error: adb server version (36) doesn't match this client (41); killing...
What worked for me:  
    1. Terminate adb.exe, 
    2. close the emulator, 
    3. Open Android Studio,
    4. select the emulator, 
    5. save, 
    6. Run the emulator. 
    7. From the folder, run the application using npm start instead of expo start.


Ejecting an app built with expo CLI to convert it to ReactNative CLI

From your application folder, open the terminal. The command is 'npm run eject'

RN will confirm committin the changes to git working tree. Type yes to proceed.

Next, it will ask you what your Android package name should be. Note that this should be atleast two words separated by a '.'. In my case, I gave the name com.first_app. This will create the native project, and also update package.json and adds index.js entry point for both iOS and Android.

Make sure the emulator is running. At the terminal prompt, type 'npx react-native run-android. This shows up the application on the emulator. The expo project has been successfully converted to an RN CLI project.

I see lots of expo references in the files, including .expo and .expo-shared folders being retained. I decide to come to that later.

Running the program post eject.

I restart the emulator. Then, from my app folder, I type into a terminal - react-native run-android (my package.json file says that is how to start android). 

Bang! I get an error.. 'react-native' is not recognized as an internal or external command, operable program or batch file.

The path mentions C:\Users\{user}\Appdata\roaming\npm, so path is not the issue.

I try installing react-native globally with 'npm -g install react-native-cli' and check.

Bingo. It worked!!

Comments

Post a Comment

Popular posts from this blog

Reading a pre-populated sqlite database using react native with expo..

Image
I recently needed to read an existing sqlite database, and return its contents to the react native front-end on an android emulator.  I  read several related posts on the subject but they all give examples of console logging, never returning.  I faced quite some difficulties, and hence decided to create this post as a blog. Hope it helps someone who comes here looking for a solution. Usually, there are two main issues that you would face. One, you would notice that simply opening a database and fetching won't work. You need to copy the local database to an internal document store and then use that database. Second, you would notice that there is no way of 'returning' the value of  a variable in the traditional sense of the term. You must handle it within the async function itself. So follow me for the solution.  Step 1. Create the root folder. From the terminal in the root folder, create the react native app with expo using : expo init newApp Choose the blank te...
Read more

React Hooks - useState Vs useRef (An explanation)

Image
I have tried to provide a brief  flowchart representation of how useState, useEffect and useRef work. The source for this explanation is from  WebDev Simplified's you tube channel . Suppose you wanted to show a name field and a count field to count how many times you updated the name field.  The diagram below shows the code (not focussing too much on the syntax and stuff), how one would normally do it, and the challenges/details of how react will work in each case. In general, on the left part of the diagram, I have provided the code, the middle part displays the contents of the form as things happen, and have included some explanation on how it all works on the right part.  Hoping the picture is self-explanatory.  The biggest usecase for useRef is to refer to the elements inside of the HTML. Each element inside the focument has a 'ref' attribute which can be set to anything. Most common use is to set focus to a certain element in the DOM. In the pictorial below...
Read more