Blog Post
Sheffield Apprenticeships - How to develop an app for Android and iOS with React Native
20/12/2019
The Sheffield Apprenticeships app is the quickest way to find apprenticeship vacancies in Sheffield. You scroll through a list, click on a vacancy and then if you’re still interested, go directly to the Gov.uk Find An Apprenticeship website and apply. The app does exactly what Apple recommend in their app developer guidelines and solves a problem; young people can see at a glance the apprenticeship opportunities in Sheffield.
Why did we build the Sheffield Apprenticeships app with React Native and what lessons did we learn on the way?
- Apps built with React Native look like native apps - that means the user interface elements & components (menus, lists, buttons etc) are the standard components you see when you use any modern mobile app, on either Android or iOS.
- React Native means you write one app. There are two major mobile platforms - Android and iOS - and the apps that run on them are built with two very different technologies. The bad news is that could mean two of lots of development in two different languages. The good news is that with React Native you develop one app (using good old JavaScript) that is then automatically built to run on either platform.
- The Sheffield Apprenticeships app seems fairly snappy. There is a slight lag when it first loads (particularly on older Android phones) but it is barely noticeable. The business logic in our app - the code that gets the vacancy data, does the filtering, saves your preferences - is all JavaScript. That might give you a slight performance hit in a more complicated app on an older mobile, but it’s not something we see.
- Right now React Native is super popular with mobile developers. There are plenty of examples, tutorials and documentation on the web. It’s also well supported. React Native is backed by Facebook (they use it to develop their own apps) and it feels like a technology that’s going to be around for a while. React Native is worth investing time in.
- Install Xcode if you use a Mac and don’t worry about Android Studio until a bit later. Yes React Native means one lot of coding, but if you want to see your nascent app running on both platforms, you need to install both Android Studio and Xcode. We didn’t worry about Android at first - we just assumed that it would be relatively easy to install Android Studio later and then get the app running on an Android emulator and then on an actual Android phone (and it was).
- Make the app - even a small app - look as polished as possible. The Twitter app is a good starting point for basic lessons in app design. A simple standard scrollable list is the first screen you see when you open the app. The navigation should be intuitive - it works in a way that is consistent with other apps.
- The coding is easy to pick up if you’re from a software development background. The React component world takes a bit of getting used to and the JavaScript is ECMAScript 6 (so not all the syntax is familiar to web developers because browsers don’t yet support it), but writing the code was the easiest part of the job.
- Aim to release a minimum viable product. This was a spare time project so we wanted a first version that was quick to build, quick to test (not too many obscure bugs) and easy to get through both the Android Google Play and Apple iOS App Store approval processes. There are ideas for a future version - search by category is one - but they can wait until we’ve got some feedback from real users.
- Install Android Studio and start to test/run the app on one or two Android phones (old ones are good). You write one lot of code when you create an app with React Native - that’s 99% true - but there were one or two things in the app that worked on iOS but then needed an extra tweak for Android. It’s annoying that the nice scrollable webview works in iOS when embedded in a scrollview, but doesn’t work in Android.
- Building the app (not coding) prior to release in Android Studio (or Xcode for iOS) is the hardest bit of the job. There are helpful blog posts that take you step-by-step through the different settings you need to apply. The hardest bit - the only time we got stuck - was around code signing in iOS. The final build of the app at the end seemed harder than installing and configuring the dev tools at the start.
- Do the release to the Google Play store first. The approval process is easier than for iOS and the app was live after just a few hours. We then waited 2 or 3 weeks, just in case any real world users found bugs that we’d missed, before submitting the iOS version of the app to the App Store. The Apple approval process feels more thorough (for example, they expect a Privacy Policy), but even Apple took only a few hours to approve the app.
The Sheffield Apprenticeships app is free and it’s got a very obvious target audience (young people in Sheffield who are looking for alternatives to university). But still, app stores feel like graveyards. The real work begins when you start to promote your app.