React Native Ecosystems

This month, Bob continues his series on Mobile App Development from an embedded designer’s perspective. We will also examine the React Native development environment options. There are so many options from which to choose when building a mobile app, that you can spin your wheels for some time just to get started. Which ecosystem? Which app framework? Which option within the ecosystem? It is enough to cause your eyes to cross. This month, Bob will try to help us sort these out.

Every software designer needs a programming editor. My first good programming editor was Brief [1]. It greatly increased my productivity in creating code. Any repetitive task could quickly be made into a macro. The interface and functionality of it were so popular, it was cloned and is still available. The humorous among us loved to create spin-offs of Brief since the company that authored it was UnderWare. Similar knock-off editors with silly names naturally sprung up such as Boxer, GRIEF, and Short. At just under $200 in 1985 ($600 in today’s currency), that seems like an outrageous amount compared to what we get for free today.

IDE’s from Borland and Microsoft were equally pricey compared to what is available today for free. Simulators that we used for Z80 and 8085 microprocessors were also expensive.

When I think that I developed my React Native app with a powerful program editor with built-in source control, an IDE with auto-correcting code, with powerful refactoring and amazing virtual devices for hundreds of phones for zero cost, I am amazed. Let’s dig into exactly which tools I used as an embedded system designer to design my first serious mobile app.

Overview

By choosing React Native, you are immediately faced with a few additional choices for how you will develop your app. There are a number of ecosystems [2] to develop your React Native mobile app. Let’s start with a look from 5,000 feet.

I would summarize these development environments as follows:

• Android (Android Studio [3]) and iOS (Xcode [4]) tools: React Native calls this approach the React Native CLI. Both of these toolchains provide virtual devices (Android Studio’s is an emulator and Xcode’s is a simulator) with which you can run your code on your development system. The beauty of using a virtual emulator is that you are offered scores of devices and screen sizes to test how your app works. In addition, you can connect your development system via Wi-Fi or USB to a real device. The big drawback of this approach is that Xcode only runs on macOS. This means that unless you own a Mac, you cannot test your iOS release until you release the code for alpha testing with Apple’s Test Flight app (more on that in a later article). This is comparable to problems we will talk about with Flutter. Flutter projects (until Google releases the idx development environment [5]) must be developed this way—requiring you to own a Mac. Both tools are free but a Mac obviously is not.
• Expo [6]: With Expo, you can prototype modules using Snack. You can use one development environment to develop, test, and release your app to their respective stores. From your Linux, Windows, or Mac device, you can load your app via Wi-Fi to any iOS or Android device. If you are using a Mac with Xcode and have Android Studio installed, you can use the Android and iOS virtual devices. If you are using Linux, Mac, or Windows, you can directly launch an Android virtual device. One disadvantage is that Expo uses a command line interface (CLI). Having grown up on CLIs, this did not present a problem to me. And batch files for commands that are repeated over and over again keep me from having to memorize all of the switches. Expo is free. But you are only allowed 30 production builds (released to the stores) per month at the free level. Given the way the builds work (only if the underlying native code changes do you have to run a build during development), this did not prove to be a limitation. This is sometimes called managed workflow with Expo. Once you are satisfied with your app, you can release the code to the App/Play store with one easy command. Expo handled all of the heavy lifting for signing the app and releasing it to the store. It was relatively simple.
• Bare Workflow with Expo—There is a version of Expo that uses Android Studio and Xcode. The advantage is that you have access to native code whereas in managed workflow, you can only change the Javascript (or Typescript—more later on that). Again though, you will need a macOS development station to build iOS with this approach.
• Development Build with Expo—If you have already built packages (from GitHub, for example) that use native code, you can still use managed workflow with Expo but you must do a special development build (this is another place where the 30 builds/month comes in for the free version). This is what I used because of the Bluetooth interface in one of my packages. Again, for development testing, if you only change the Javascript code, you do not need to re-build.

Overall, I had a good experience using Expo with managed workflow for development builds. The deciding factor for me was the requirement of a Mac for React Native CLI. I did buy a used MacBook to try some of the iOS simulators, but it was hopelessly under powered and died after about 2 months (still under warranty but useless while they fixed it). For this article we will dig a little deeper into the Expo development environment.

Snack

Before I got into serious development, a great Expo tool that helped me get started was Snack. Snack provides a full IDE. You do not need to load the Expo toolchain or use the Expo CLI. You can create a pretty complicated app (called Snack) and run it on iOS or Android virtual devices, iOS or Android devices connected via Wi-Fi, or even on the web using a Windows, Linux, or macOS development system.

Using the virtual device with Snack has the limitation that the free account has only so many iOS or Android virtual devices in the cloud available to the world. This means that when you run your app on a virtual device, you may have to wait in a queue until one is available.

Figure 1 provides a mini-app to demonstrate the Snack IDE. This code is available in the Resources. The IDE provides all the typical functions of an IDE with the virtual device on the right. On the left is your project and in the middle is your open file. The open files can be edited. Sorry, it doesn’t have Brief functionality, but it compiles live on either the virtual device or a real device.
Every change you make immediately goes live. It has a pretty print function to easily conform to React Native coding styles. Figure 2 shows how the app looks in the Android emulator.

By the way, when you click on “My Device” it provides a QR code (see Figure 3) that you can use on your iOS or Android device with an app called Expo Go. Think of Expo Go as the App store for your Expo developed app. Scan the code with device and your app will start on that device.

Code

Let me digress a bit to talk about the example code. This article is about the toolchain/ecosystem so I won’t get too deep into the code except as it relates to the tools. React Native’s core functionality comes through its core components. On line 1, we import five of these core components: View, Text, StyleSheet, Button, and Alert. We will talk more about these in the next article. We also import one community developed component: react-native-paper. We will mention a few of these in the next article. Finally, we import a component that we create: AssetExample (we will defer for now about how to create your own).

The thing I really like about Snack, is the ability to lay out your screens very quickly. React Native has a component called StyleSheet. Notice in the code at line 14, we create a set of styles that are used for two components: <View> on line 7 and <Text> on line 8.

These styles (paragraph and container) are an abstraction of CSS StyleSheets. But since they are not exactly the same as CSS (for example, justify-content becomes justifyContent), it can be very confusing. Snack is a great way to create the layout of your screens just the way you like them using the style sheets and to learn what each style does to each component. And it is very quick.

Another note about our simple example. On lines 18 and 19 are two props (or properties of the Button component): accessibilityLabel and accessibilityHint. On iOS, these work with the VoiceOver feature and on Android with TalkBack. These provide help for those with accessibility issues to audibly tell them exactly what button they are pressing (or link or whatever). I bring this up because they don’t work on the virtual devices on Snack. But if you use your own device, the Snack functions beautifully.

One final bit about the code for React Native. You can use either Javascript (with React Native extensions so it is called JSX) or Typescript. If you look at a lot of React Native components on GitHub, you will see that a lot are written in Typescript. So what is Typescript? It is a statically typed language that is a superset of Javascript. It has additional features such as types, classes, interfaces, and modules. I chose to use Javascript because there was already too much to learn and I rarely need a strongly typed language (Because I code flawlessly—NOT!!).

More Serious Development

For more extensive apps (using packages not loaded into Snack), I used the Command Line interface of Expo. You can use whatever editor you want—I used Visual Studio Code because of its extensions for source control and its Lint extensions for checking my JSX code before I run it and because it’s free. I love that before I build and run, I know that the code is “error” free—at least from a syntax point of view. So that is where we start—using the Visual Studio Code as our IDE.

As I said earlier, Expo is controlled from the command line. So, you will need to get familiar with either Command or Power Shell on Windows, your favorite shell on Linux, or a UNIX shell (like bash or zsh) in Terminal on macOS. Visual Studio Code allows you to run these within the IDE. The Expo documentation will tell you how to set up this CLI environment [7].

React Native consists of its standard components and the vast array of other components that are available in the ecosystem. These components are stored in what they call packages. You will need to choose a package manager to add, update and remove packages from your project. I started with npm but eventually moved to yarn, which is the recommended package manager for Expo.

Once you have set up Expo, you will need to install any packages that you will be using with your first app. Of course, as your app expands, you can add these new ones as you go. If you were using our mini-app, you only need to install “react-native-paper” and “react-native-safe-area-content” [needed by react-native-paper].

Following the boiler plate example in the Expo documentation, from the command line in your project’s directory, you would start your app. Clicking on this will start a cloud server. Once started, you will have a QR code to scan to start your app on your mobile device. Or, if you have Android Studio or Xcode installed (only on macOS), you can indicate to Expo to start one or more virtual devices.

One of the advantages of Expo is that you can share this QR code with other members of your team (who have Expo Go installed) for them to start testing your app. Of course, they do have to be on the same Wi-Fi network as the server on your development system.

Creating our Mini-App

This is pretty much defined in the Expo documentation. But let’s walk through the steps to run our first app on our phone or tablet from a Windows machine.

The first thing you to do is install Git [8] and the Node.js [9] latest stable release. Go to the directory in Command or PowerShell where you will base all of your React Native projects. For example:

cd c:\u\bob\home\reactnative2

Next you need to create the Expo React Native Project:

npx create-expo-app mini-app

Now go to the directory that this created:

cd mini-app

Next unzip the file included in the resources into this directory.

Install the yarn package manager with Node Package Manager:

npm install –global yarn

Add the two necessary packages to the project:

yarn add react-native-paper

yarn add react-native-safe-area-content

Finally, start the development server

npx expo start

You should see a screen similar to the one shown Figure 4. If you are running this on an macOS device and have Android Studio and Xcode installed, you will be given the option to start a virtual device. Or you can scan the QR code with your mobile device. I did this with my iPad and got Figure 5.

Conclusion

If you want to get started real quickly with App development, start with Expo’s Snacks. It is in the cloud and eliminates a lot of the tool hassle compared to any other development system.

Now you are dangerous. You can write React Native code from the cloud using Snack and run it on Android and iOS virtual devices or real devices without installing the Expo development environment on your machine. Or you can install Expo and some packages and start writing code from there. Next time we will get into actual code development for React Native—but of course, only in thin slices. 

REFERENCES
[1] Wikipedia has a good article on Brief. https://en.wikipedia.org/wiki/Brief_(text_editor)
[2] By ecosystem, I am referring to the array of organizations all working towards the same goal of supporting a particular platform.
[3] Android Studio IDE can be found here: https://developer.android.com/
[4] Apple’s Xcode is the IDE for iOS apps: https://developer.apple.com/documentation/xcode
[5] Project IDX is a cloud based ecosystem for developing apps for Android and iOS. It is currently only in public review. But when released may eliminate most of the problems I have with iOS app development. https://developers.google.com/idx
[6] Expo can be used to develop iOS and Android apps from cross platform environments. https://expo.dev/
[7] https://docs.expo.dev/get-started/installation/ Very clear instructions for getting started
[8] https://git-scm.com/
[9] https://nodejs.org/en/

RESOURCES
Dart | dart.dev
Expo | expo.dev
Flutter | flutter.dev
React | react.dev
React Native | reactnative.dev

PUBLISHED IN CIRCUIT CELLAR MAGAZINE • JUNE 2024 #407 – Get a PDF of the issue

Sponsor this Article