Monthly Archives: September 2019

Watching with eslint

If you have your dev environment set up like me, you’re used to having Jest in a terminal window of it’s own continuously running and watching for changes to test files, but what about eslint, there doesn’t appear to be the same option out of the box.

Whilst there are npm packages for adding this capability the easiest way is to simply use watch, although you’ll need to install it using npm install watch -g if not already installed. Our CLI command would then look something like this

yarn watch 'eslint --ext *.ts,*.tsx,*.js,*.jsx src' src

if we ignore the ‘eslint…’ section, basically we’re just telling watch to watch the folder src (the src text at the end of the command). Ofcourse if you’re working on a specific folder, for example src/components/mediaPlayer, you’ll want to watch that specific folder. Just don’t forget we’re running two separate commands, so it’s no good watching one folder but having lint run against a different folder.

console.log and React Native

The easiest way to view console.log messages is using Chrome.

Select CTRL+M within your Android emulator then select Debug JS Remotely. This will start a Chrome browser window and connect it to a debugger session.

As usual within Chrome, type CTRL+SHIFT+I to view the dev tools and ensure the Console is displayed, now you should see console.log messages in the Chrome console tab.

warn and error

Alternative to using console.log, we can use console.warn and console.error which will display yellow and red pop-ups within the emulator, which Debugging-React Native states are disabled within production builds.

Standalone dev-tools

Interestingly the standalone dev tools seem not to display console.log messages. I think I read something on the chat on the React GitHub issues which suggests console logging is not part of React devtools but supplied by Chrome. However, standalone React devtools offers more debugging tools – such as viewing props/state etc.

To try out the standalone dev tools, run the following

npm install -g react-devtools

Now run 

react-devtools

React Native “Hello World”

This posts assumes you’ve installed the Android studio. I won’t go through the steps for installing as, to be honest, I’ve had an installation too long to recall any steps.

Getting started

To begin with we need to use npm or yarn to add the react native scaffolding application.

yarn add global create-react-native-app

Assuming everything’s installed we can now run

yarn create-react-native-app helloworld

Replace helloworld with your application name.

You’ll then be prompted for the template to use, managed workflow, blank, blank (TypeScript), tabs or bare workflow, minimal or minimal (TypeScript).

Let’s choose minimal (TypeScript).

Next you’ll enter the name and displayName or your application, finally you’ll be prompted to install dependencies, select Yes.

From our application folder we can run

yarn android
yarn ios

In this case I’m working on Android, so before we go any further you need to run up one of the installed Android emulators before running the next step.

Now run 

yarn start

which will run react-native start followed by

yarn android

in another terminal run. This will run react-native run-android.

If all goes well then the emulator should display some text (depending on the template you used).

Using the emulator

In emulator type r r in quick succession in the emulator to reload your application. Or you can enable automatic/hot loading by pressing CTRL+M in the emulator and selecting Enable Live Reload.

Problems

Whilst setting up Android studio on Linux or Windows you need to make sure ANDROID_HOME, ANDROID_PLATFORM_TOOLS and ANDROID_SDK_ROOT environment variables are set up. For example on Windows these are

  • ANDROID_HOME – C:\Users\<Username>\AppData\Local\Android\Sdk
  • ANDROID_SDK_ROOT – C:\Users\<Username>\AppData\Local\Android\Sdk
  • ANDROID_PLATFORM_TOOLS – C:\Users\<Username>\AppData\Local\Android\Sdk\platform-tools

Hello World

At this point, hopefully we’ve got everything running so let’s open App.tsx and replace

<Text>Open up App.tsx to start working on your app!</Text>

with

<Text>Hello World</Text>

Double clicking r in the emulator will reload the application displaying Hello World. So we’re on our way to the first React Native application.