Node

React native uses node to interface with the native JS runtime on Android and iOS. The runtime allows for hooks into native code which is how we can build high performing native apps. I use NVM to manage my node installs. It lets me manage many versions for various projects.

Watchman

React native uses watchman to watch changes, compile, and refresh the app on your device. I install this from brew; no management required.

Ruby

React native needs ruby to use CocoaPods (a ruby gem) for handling iOS dependencies. I started out using rvm but have since switched to rbenv. Both libraries allow managing ruby version. I found rbenv much easier to set up than rvm.

Xcode

React native needs Xcode for iOS development tooling including the iOS simulator. For a while I installed this via the Mac App Store but downloads took forever and sometimes got stuck. I have switched to using Xcodes to manage having many versions of Xcode installed. Downloads don’t take as long and have not gotten stuck thus far.

JDK

React native needs a JDK for Android development. I use jenv to manage jdk versions and prefer openJDKs. I grab openJDKs from brew and add them into jenv.

Android Studio

React native needs Android Studio for Android development tooling. During install include Android SDK, Android SDK Platform, and Android Virtual Device. The latest Android SDK installs by default. Check that it’s compatible with the version of react native you’re using. You can use the SDK Manager within Android Studio to install the correct version. In order for react native to build apps with native code some environment variables need set up.

export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/platform-tools

Create An App

At this point the system is set up to run react native applications. There are several options for spinning up a new react native app. I have used the CLI to create apps with and without expo. I have also used a 3rd party CLI called Ignite from InfiniteRed. My next project will use a template from TheCodingMachine called React Native Boilerplate.

To begin we’ll need a React Native application to add SVGs to. Either create a new one with the npx react-native init PROJECTNAME command or use existing app but you’ll have to check version compatibility. Our next step is to fire up the app. I run npm run start which just calls react-native start. Now metro is running in this terminal and we need to open a new terminal. In the new terminal let’s fire up the app in either iOS or Android. I started with Android so I ran npm run android which just runs react-native run-android. Now we have an Android emulator running our app! Here’s a screenshot of where we’re at on Android:

Drawing SVGs

React Native doesn’t support SVG out of the box. So we’ll have to install a package to handle SVGs for us. I chose svg-react-native. Here’s where we need to pay attention to the versions we’re on. There are various steps to getting this package to work in the app depending on the versions it has. Be sure to read through the Readme and the table of versions. Since I’m on a brand new app I ran npm i react-native-svg to install the latest. Now with the package installed we can import it and start drawing SVGs in our app! I added a separate component to contain my SVG: /components/svg.js. Here’s my component code:

import React from "react";
import type { Node } from "react";
import Svg, { Circle, Rect, Path } from "react-native-svg";
import { View } from "react-native";

const SvgComp = (): Node => {
  return (
    <View>
      <Svg height="100" width="100">
        <Rect x="0" y="0" width="100" height="100" fill="black" />
        <Circle cx="50" cy="50" r="30" fill="yellow" />
        <Circle cx="40" cy="40" r="4" fill="black" />
        <Circle cx="60" cy="40" r="4" fill="black" />
        <Path d="M 40 60 A 10 10 0 0 0 60 60" stroke="black" />
      </Svg>
    </View>
  );
};

export default SvgComp;

And here’s a screenshot of how it renders in the Android emulator:

NOTE

I had to restart metro and re-run the android command to get SVGs working.

Check out the supported elements to see what else we can do with SVGs now.

Using SVG Files

Maybe we have some SVG files we want to include rather than drawing them. For this case we’ll need another package. Kristerkari has us covered with react-native-svg-transformer. Install the package with npm i --save-dev react-native-svg-transformer. Next we’ll update our metro config to handle transforming SVGs. Here’s what my metro.config.js looks like now:

const { getDefaultConfig } = require("metro-config");

module.exports = (async () => {
  const {
    resolver: { sourceExts, assetExts },
  } = await getDefaultConfig();
  return {
    transformer: {
      getTransformOptions: async () => ({
        transform: {
          experimentalImportSupport: false,
          inlineRequires: true,
        },
      }),
      babelTransformerPath: require.resolve("react-native-svg-transformer"),
    },
    resolver: {
      assetExts: assetExts.filter((ext) => ext !== "svg"),
      sourceExts: [...sourceExts, "svg"],
    },
  };
})();

I needed some SVG files so I grabbed these:

• A colorized one: firefox.svg from Kristerkari’s example repo
• And a customizable one: coffee.svg from Feather

And another new component for SVG files: ./components/svg-files.js. Here’s the component code:

import React from "react";
import type { Node } from "react";
import { View } from "react-native";
import Coffee from "../assets/icons/coffee.svg";
import Firefox from "../assets/icons/firefox.svg";

const SvgFilesComp = (): Node => {
  return (
    <View>
      <Firefox />
      <Coffee />
    </View>
  );
};

export default SvgFilesComp;

And here’s a screenshot of how it renders in the Android emulator:

NOTE

I had to restart metro and re-run the android command to get SVGs working.

Notice that our coffee SVG isn’t visible but taking space. That’s because its designed to be customizable. We need to pass in some arguments if we want it to render in color. Which arguments and whether it’s customizable at all depends on the SVG.

For instance, both SVGs I chose have widths and heights set for them. If we don’t include those properties then their defaults are used. If we pass in a width to the firefox SVG check out what happens:

<Firefox width={50} />
<Coffee />

The image is the correct size but the overall SVG is still taking up a lot more room than it needs. We have to pass in both sizes to fix this. While we’re at it, let’s give some color to our coffee icon by passing in a fill color.

<Firefox width={50} height={50} />
<Coffee fill={'blue'} />

Now our firefox looks good but our coffee icon does not. This particular icon isn’t meant to have a fill. Rather, we should pass in a stroke to get the desired look.

<Firefox width={50} height={50} />
<Coffee stroke={'#333'} />

Using an SVG Font

Now let’s pull in an SVG font with a bunch of icons we can use. I chose a set of open source icons called Feather. Install Feather with npm i feather-icons and grab an SVG file. I created another separate component to try out Feather icons in my app: /components/feather.js. Here’s my component code:

import React from "react";
import type { Node } from "react";
import { View } from "react-native";
import ArrowUpCircle from "feather-icons/dist/icons/arrow-up-circle.svg";

const FeatherComp = (): Node => {
  return (
    <View>
      <ArrowUpCircle stroke="red" fill="#fff" width={32} height={32} />
    </View>
  );
};

export default FeatherComp;

And here’s a screenshot of how it renders in the Android emulator:

This is great because now we have access to all of the Feather icons as React components. But what if we had an SVG file we wanted to use?

Now those are some good looking SVGs in a React Native app!

Conclusion

In this article we covered how to include SVGs inside a React Native application using three different methods:

1. Drawing them
2. Importing an SVG font
3. Loading from .svg files

Thanks for reading!

Why have multiple versions?

Why not? Not all apps are able to keep up with Java versions and those that do might need some time when a new version comes out. For example: I’m working with React Native building mobile apps for both iOS and Android. To build the Android app it uses Gradle 6.5 which doesn’t support the latest version of Java (16) yet.

Installing

I have OpenJDK installed through AdoptOpenJDK using brew. I like to keep all my apps and libs as up-to-date as possible so I run brew upgrade a lot. One of those times it upgraded AdoptOpenJDK to 16. Lucky for me they also publish older versions on brew but there’s an extra step.

My initial thought was to run brew install adoptopenjdk@15 but it didn’t work. The versioned casks are contained in their Tap which I found out by checking out their brew page and subsequently their open-source tap code.

So the fix was to get into the tap (brew tap adoptopenjdk/openjdk) and run the command above again.

Switching between versions

Now I have two versions of OpenJDK available to my system: 16 and 15. To switch between them I found a little function to pop into my .zshrc file:

jdk() {
  export JAVA_VERSION=$1
  java -version
}

Now to switch between JDK versions I run jdk 15 or any version I have installed.

Thanks for reading!

• Physical
  • MacBook Air (Light but powerful)
  • Logitech MX Master 2S
  • Bose QC 25
  • Fidget Spinner
  • Moleskine grid notebook
  • Lamy Safari Fountain Pen
  • Blackwing Pencil
• Digital
  • Zsh (as well as Oh-my-zsh and zsh-completions)
    • .zshrc
  • Brew
  • NVM
  • RVM
  • VSCodium (No MS branding/telemetry)
    • Extensions:
      • Bookmarks
      • Bracket Pair Colorizer 2
      • ES7 React/Recux/GraphQL/React-native Snippets
      • ESLint
      • GitLens
      • JavaScript (ES6) code snippets
      • Live Server
      • Material Icon Theme
      • Night Owl
      • REST Client
      • SVG
      • TODO Highlight
      • YAML
    • Settings
  • Firefox (main driver)
  • Hyper
  • LICEcap
  • OBS
  • Chromium (for testing apps)
  • Chrome (for testing apps)
  • Vanilla
  • Time Out
  • OpenJDK
  • Nginx
  • SVGO

Thanks for reading!

Why Mint

Based on this Dev.to article it sounded like where a Linux newbie like myself should start. I tried a couple versions inside VirtualBox before committing. I used OSBoxes to quickly get them up and running.

Why Dual-Boot

I chose to dual-boot because I didn’t want to risk losing Windows if I messed up the Mint install. Also because the Mint install made it really easy.

How I did it

Disclaimer!

I’ll recount the steps I took and the references I used but can’t guarantee any of it for anyone else. Also it’s a good idea to follow along with Mint’s install docs.

1. Back Up Data

I backed up my data because there’s always a chance it could get wiped from existence.

2. Download Linux Mint

I grabbed the 64bit Cinnamon version from here.

3. Create a Bootable USB

I used Etcher to flash the image onto my USB drive but any flashing software should do the trick.

4. Create Disk Space

My first attempt didn’t take because I didn’t have any room. I ended up freeing up some space from my Windows partitions.

5. Update Boot Configuration

I had to disable secure boot and change the boot order in the BIOS.

6. Install Mint

I followed the on-screen instructions at this point. Here are the important bits:

• Dual booting with Windows
• Create partitions
  • Root (I used 20Gb)
  • Swap (I used 8Gb)
  • Home (I used the rest of my free space) A few more on-screen instructions and I was ready to go!

7. Use Mint

Mint is installed and ready to go. I’m on a Razer Blade Stealth and everything works out of the box except for closing the lid. I’m sure there are other things that don’t quite work that I haven’t encountered yet. When I close the lid Mint is supposed to suspend but when I open the lid back up I have to hard shutdown before my laptop will wake up and respond. Other than that I’m very happy with Mint and hope that this article helps you!

Thanks for reading!

Requirements

Here are the requirements before we get started:

• NodeJS (A JavaScript runtime)
• Selenium JavaScript language bindings (But we’ll use NPM to grab these)
• MochaJS (Mocha is a JS test framework)
• ChaiJS (Chai is an assertion library)
• Any browsers installed that you want to test Supported Platforms

Selenium Prep

If you haven’t read through my quick Overview of Selenium you should do that now. Selenium will need a few things configured before it’ll do its magic!

NodeJs Tutorial

If you’re unfamiliar with NodeJS I recommend this tutorial to get you started: NodeHero. It’s packed with helpful information. It’s a good resource to keep open in a tab while working through this post.

Create Project

To kick things off we’ll need a new project. Using a command prompt or Explorer we need to create a new folder for our project. Once we have our folder we can use the command prompt to begin installing the packages we’ll need.

Initializing Project

NodeJS comes with its own package manager: NPM. It is also used to initialize a project. Run the following command and fill in each section: npm init. This will create the package.json file. This file tracks dependencies and project information.

Installing Packages

NPM is also responsible for installing packages. The command for installing a package is npm install <package>. We need to install Selenium, Mocha and Chai.

• npm install selenium-webdriver --save
• npm install mocha --save
• npm install chai --save

These will install in the node_modules folder and get tracked in our package.json file.

We can now write our first test and use our installed packages! Here’s what the package.json file should look like at this point:

{
  "name": "selenium-js-mocha",
  "version": "1.0.0",
  "description": "A project to go along with blog posts explaining how to get started with
  functional testing using Selenium, JavaScript and Mocha. ",
  "main": "test1.js",
  "dependencies": {
    "chai": "^3.5.0",
    "mocha": "^2.5.3",
    "selenium-webdriver": "^2.53.2"
  },
  "devDependencies": {},
  "scripts": {
    "test": "mocha test1.js"
  },
  "author": "Stephen Cavender",
  "license": "ISC"
}

Write Test

We’ll write our test against The Internet¹.

Let’s create a new JS file in our project folder: I’ll create test1.js.

// Load dependecies
var assert = require("chai").assert,
  test = require("selenium-webdriver/testing"),
  webdriver = require("selenium-webdriver");

// Our test
test.describe("Test", function () {
  test.it('Title should be "The Internet"', function () {
    // Set timeout to 10 seconds
    this.timeout(10000);

    // Get driver
    // var driver = new webdriver.Builder().
    // withCapabilities(webdriver.Capabilities.firefox()).
    // build();
    // var driver = new webdriver.Builder().
    // withCapabilities(webdriver.Capabilities.edge()).
    // build();
    // var driver = new webdriver.Builder().
    // withCapabilities(webdriver.Capabilities.ie()).
    // build();
    var driver = new webdriver.Builder()
      .withCapabilities(webdriver.Capabilities.chrome())
      .build();

    // Go to URL
    driver.get("http://the-internet.herokuapp.com");

    // Find title and assert
    driver.executeScript("return document.title").then(function (return_value) {
      assert.equal(return_value, "The Internet");
    });

    // Quit webdriver
    driver.quit();
  });
});

1. Load dependencies
2. Create test
3. Set timeout (test runs too fast and fails without increasing the timeout)
4. Get a web driver
5. Set the URL property (tells the driver to go to that URL)
6. Assert on the title of the driver
7. Dispose of the driver

Run Test

Now that we have a functional test we can run it. Save the test file and let’s grab our command prompt. To run tests we call the mocha command and our test file.

mocha test1.js

Run that in the command prompt and we should see our test run and the command prompt will tell us the result of the test. If the package.json is set up with a test script we can also run our test by calling the npm test script.

npm test

Now our test results will show in the terminal!

This is a basic, and brittle, example of how Selenium works. We’ll cover a much better testing approach in a later post to avoid such things! This is not an example of best practices by any means. This is to get you a working example of Selenium. Stay tuned for more posts on how to use Selenium and best practices for automating tests!

Thanks for reading!

Selenium is an umbrella project for a range of tools and libraries that enable and support the automation of web browsers. - From Selenium HQ

Selenium enables us to:

1. Open browsers
2. Navigate web pages
3. Find web elements
4. Manipulate web elements
5. Run JavaScript

Language Bindings

First we’ll need to get the language bindings we want. The bindings will need to be downloaded and referenced in our project. Some IDE’s have package managers that will do this for us. We’ll talk more about how that’s done in separate articles. For now just know that we’ll need some language bindings to get Selenium to work.

Webdrivers

Selenium’s power comes from webdrivers; called such because they “drive the web.” In the articles to come we’ll be using Chrome, Firefox, Edge and IE; we’ll need drivers for each.

Chrome

ChromeDriver is a separate executable loaded by Selenium when Chrome is the desired browser. Download the latest driver and place it in an easily-accessible location. I keep mine in C:/webdrivers/. Download and install the latest Chrome.

Firefox

The FirefoxDriver comes built-in with the Selenium language bindings. Download and install the latest Firefox. Mozilla is working on a new driver for their browser called MarionetteDriver. However, it has not been released as of this writing. Feel free to download the latest driver and put it in the same location as the ChromeDriver.

Edge

The Microsoft WebDriver is a separate executable loaded up by Selenium when Edge is requested as a browser. Download the latest driver and keep it in the same location as the other driver(s). Make sure you have the latest updates for Edge.

IE

The IEDriverServer is maintained and distributed by the Selenium group. Download the latest driver and put it in the same location as the other driver(s). Make sure you have the latest updates for IE.

Adding to PATH

Now that we have all the drivers we’ll want to use we need to add an entry to our PATH environment variable. If you’ve never done anything with environment variables I would recommend reading this guide. Follow the instructions and add the folder containing your webdrivers.

Now Selenium will be ready to go! Check out one of my other articles for the environment you want to use with Selenium:

• C#, Selenium & MSTest
• JavaScript, Selenium & Mocha

Thanks for reading!

Requirements

Here are the requirements before we get started:

• Visual Studio (A Microsoft Integrated Development Environment or IDE)
• Nuget (A package manager for Visual Studio)
• Selenium C# language bindings (But we’ll use NuGet to grab these)
• Any browsers installed that you want to test Supported Platforms

Selenium Prep

If you haven’t read through my quick Overview of Selenium you should do that now. Selenium will need a few things configured before it’ll do its magic!

Create Project

To kick things off we’ll need a new project.

File > New > Project

Select the Unit Test Project template (Templates > Visual C# > Test), give it a name and configure some options. Press Ok to create the project. Visual Studio will create the project and open up your first UnitTest class.

Import/Install Selenium

Now we’ll need to grab the Selenium DLLs and give our project access to them.

Tools > NuGet Package Manager > Manage NuGet Packages for Solution

Select Browse, search for ‘Selenium’ and install both Selenium.WebDriver and Selenium.Support for your new project.

Write Test

Now the fun begins; we can write the first Selenium test! We’ll write our test against The Internet¹.

Here’s some code to put inside the TestMethod1()

//var driver = new OpenQA.Selenium.Firefox.FirefoxDriver
//var driver = new OpenQA.Selenium.Edge.EdgeDriver
//var driver = new OpenQA.Selenium.IE.InternetExplorerDriver
var driver = new OpenQA.Selenium.Chrome.ChromeDriver
{
Url = "http://the-internet.herokuapp.com/"
};
Assert.IsTrue(driver.Title == "The Internet");
driver.Dispose();

1. Get a web driver
2. Set the URL property (tells the driver to go to that URL)
3. Assert on the title of the driver
4. Dispose of the driver

Run Test

Now that we have a functional test we can run it. First, if the Test Explorer isn’t displayed we need to add it.

Test > Windows > Test Explorer

Our test isn’t showing up yet. We need to build the solution for it to recognize that we’ve written a test it can run. Right click on the solution in the Solution Explorer and Build or Rebuild the solution. If the build is successful we should see our test show up in the Test Explorer. Now we can right click on our test and tell it to run. If all went according to plan we should see a Chrome window pop up, navigate to Google’s home page and then close.

This is a basic, and brittle, example of how Selenium works. If our assertion returns false the test will report a failure but the browser window will still be alive. This test is brittle in that it can’t run any code after the Assert if the Assert returns false. We’ll cover a much better testing approach in a later post to avoid such things! This is not an example of best practices by any means. This is to get you a working example of Selenium. Stay tuned for more posts on how to use Selenium and best practices for automating tests!

Thanks for reading!