Build Mobile iOS, Android, and Web Apps Using React and Ionic, Part I

Write Once Run Anywhere Is Alive And Well In Modern JavaScript Development

This article will be the first in a series introducing Ionic 4. And showing how you can keep your existing skill set for the web, to create attractive and fully functional mobile applications.

Originally, I had planned to use React Native for my mobile app. I’m a React developer so it seemed reasonable to assume it would be what I needed. But one of the things that annoyed me right away was the syntax. It was quite different from React for the web. In addition I found some frameworks that I liked don’t work in React Native. Things like standard CSS and React Router are not used in React Native development. So after trying it out I started shopping around for something better. I think Ionic is what I was looking for.

Some of you React devs might be thinking Ionic is an odd choice. Isn’t that the framework for Angular? So I’ll give a quick overview of what Ionic is, in its current v4 iteration. The latest version is a complete rewrite of the framework. It’s actually more like three distinct components than a single framework. At its core is something called Stencil. According to Ionic documentation Stencil is a compiler that emits standard Web Components. But it is also its own coding framework that allows creation of custom Web Components; with no dependency on external frameworks like React or Angular. This decision allows Stencil to be framework agnostic. Next up is the piece known as Ionic. Ionic React, Ionic Angular, Ionic Vue are basically wrappers around Stencil that allow you to code in your desired app framework and still emit the same Ionic components. Think of it like how TypeScript eventually gets converted into native JavaScript. So when using Ionic React you can continue to use SASS, React Router, Redux, etc without issue. It even supports Hooks! And then finally we have Capacitor. Capacitor is a runtime that allows the web view, that your app lives in, to communicate with your device API and access hardware and services (it also does the work of attaching your dev build to the native iOS or Android build system, XCode or Android Studio).

OK so all this sounds cool but what’s the big deal? What this all means is that now you can write your iOS, Android, Web or even Desktop App entirely using a web framework of your choosing. So if you are a React dev you can keep using your favorite npm packages and coding techniques to build mobile apps that look and feel just like native apps. No quasi CSS like object syntax; no HTML wanna-be tags. Just standard React in all its glory. So let’s get a feel for what Ionic development is like by building a small photo app and deploying onto an iPhone. First let’s install Ionic globally.

npm i -g ionic

Once you have Ionic installed globally we can use it like create-react-app to setup our initialized application. Let’s create our app by calling Ionic cli without any parameters.

ionic start MyPhotos
Select React as web framework

As the screenshot shows, the first thing to do is select which web framework you will be using to build your app (note Vue is currently still in beta). Let’s select React and then go to the next step. This step allows us to select which starter template to use to build our app. To allow for simple navigation in our app let’s select tabs.

Select tabs as template

Finally after hitting enter Ionic should start setting up your project. It has to download quite a few packages so this can take a while. Once it completes cd into the MyPhotos directory and type

ionic serve

You should see the app load in your browser, and if you use chrome’s debugger and switch to mobile mode you should see the below.

Tabs navigation based Ionic template

As you can see the built in template is quite attractive and has a theme fairly similar to other native iOS apps. Now let’s take a look at the contents of the MyPhotos directory and see how Ionic has laid out this project.

The layout is a pretty standard React-like folder structure. You have a src folder, index and App files, an npm packages.json file, and a public build folder. Also as is clear by the file extensions Ionic uses TypeScript by default, although this can be disabled. If you open the App file you should see the following.App.tsx file

import React from 'react';
import { Redirect, Route } from 'react-router-dom';
import {
} from '@ionic/react';
import { IonReactRouter } from '@ionic/react-router';
import { apps, flash, send } from 'ionicons/icons';
import Tab1 from './pages/Tab1';
import Tab2 from './pages/Tab2';
import Tab3 from './pages/Tab3';
import Details from './pages/Details';
/* Core CSS required for Ionic components to work properly */
import '@ionic/react/css/core.css';
/* Basic CSS for apps built with Ionic */
import '@ionic/react/css/normalize.css';
import '@ionic/react/css/structure.css';
import '@ionic/react/css/typography.css';
/* Optional CSS utils that can be commented out */
import '@ionic/react/css/padding.css';
import '@ionic/react/css/float-elements.css';
import '@ionic/react/css/text-alignment.css';
import '@ionic/react/css/text-transformation.css';
import '@ionic/react/css/flex-utils.css';
import '@ionic/react/css/display.css';
/* Theme variables */
import './theme/variables.css';
const App: React.FC = () => (
<Route path="/tab1" component={Tab1} exact={true} />
<Route path="/tab2" component={Tab2} exact={true} />
<Route path="/tab2/details" component={Details} />
<Route path="/tab3" component={Tab3} />
<Route path="/" render={() => <Redirect to="/tab1" />} exact={true} />
<IonTabBar slot="bottom">
<IonTabButton tab="tab1" href="/tab1">
<IonIcon icon={flash} />
<IonLabel>Tab One</IonLabel>
<IonTabButton tab="tab2" href="/tab2">
<IonIcon icon={apps} />
<IonLabel>Tab Two</IonLabel>
<IonTabButton tab="tab3" href="/tab3">
<IonIcon icon={send} />
<IonLabel>Tab Three</IonLabel>
export default App;
view raw Ionic Tabs App file hosted with ❤ by GitHub

Again Ionic fully supports hooks without additional updating. If you look at the code you notice the JSX starts with IonApp at the root. Every Ionic app must have the IonApp component at its base. After that you can see the IonReactRouter component. This is a wrapper around React Router that Ionic has created to allow for better integration with their framework, it’s comparable to the BrowserRouter. After that you can see the IonTabs component which will host the individual tabs involved in navigation. And finally you should see the IonRouterOutlet. This component is roughly equal to the Switch component in React Router.

Now that we have a feel for a basic Ionic app I need to explain how we go from this web app to an iOS or Android app. So as previously mentioned Ionic at its core uses only web technologies. There is a clean separation of concerns between Ionic the web framework and the native mobile pieces. So then the question is how do we build an app that works, on iPhone and Android, like a native app? This is where Capacitor comes in. Capacitor is the glue that ties your web app to native services. It wraps your code, so that it can function as a native app. Capacitor also provides the integration to our native development environment, for example XCode on Mac, so that our web app will be compiled into a native binary and can hook into all the native device capabilities that we want.

Note in order to build a native binary we need a computer running XCode. Unfortunately Apple does not provide XCode on non Mac computers so you’ll need a Mac to build your iOS app. However, I do want to be clear on this point, you can develop your app on any platform that allows for React web development. Only when it comes time to compile into an iOS binary and test hardware services will you need a Mac computer. Android fortunately does not have this limitation.

Let’s setup Capacitor now. First we start by enabling Capacitor in our existing application. Type

ionic integrations enable Capacitor

When it’s complete you should see something like this.

Now that we’ve enabled Capacitor in our app we’ll need to add the iOS integration. But before we do that make sure you’ve built your app at least once since Capacitor needs the build folder to exist in order to setup properly. Now type

ionic cap add ios

If you get asked to install the Capacitor cli, enter yes as you’ll need it to run commands. Once this setup completes we can open our iOS app in XCode. Type

ionic cap open ios

Once your XCode project opens you will need to attach your iPhone via usb and then select it in XCode as the device to use for testing (it is also possible to use their emulators, but final testing should always be done on a real device). Now once all this is done and you try and run your project from XCode you will see this error.

This error is indicating Apple’s requirement to associate a developer account with an application. Go back to your file explorer view on XCode and click on the root App icon. You should see this

As you can see on the darker right side of the screenshot, there are multiple tabs and you end up on the General tab first. Click on the Signing & Capabilities tab and you should see this.

On this tab you should see the Team drop down. Select it and choose your desired dev account. Obviously if you don’t have one you’ll have to create it. Once you select the proper team account it will automatically update your Signing Certificate and you’re ready to start your app!

Make sure your iPhone is connected and selected within XCode as the test device. Then click the play button on the upper left corner of XCode. You should see the app auto start up on your iPhone. It will look just like the web app that we started earlier in the web browser.

Great we built and started our first iOS mobile application using Ionic. This was quite a bit of reading and configuration so I’ll end Part I here. In the next post I’ll show how to update the tab navigation and start modifying the components to create our photo app screen.

Part II has been released.

As always if you like helping other devs try

Published by David Choi

Developer Lead Where devs help devs and make money.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Create your website with
Get started
<span>%d</span> bloggers like this: