Expo is a framework for building universal apps: iOS, Android and WebApps can all be built using Expo. You can use either TypeScript or JS. Using the managed workflow, Expo will reduce boilerplate code, and will handle over-the-air updates, the build process, and push notifications. During the development phase, it is packed with features that improve your quality of life: Incremental rebuilding, hot reload, and, most importantly, it all runs within the Expo Client. All you have to do is install the Expo Client, run expo start on your computer, and scan a QR code with your device to run your app.
The Expo SDK is fully-fledged and will cover most of your needs.
Add in NativeBase
While Expo handles well most of the system interactions, it doesn’t provide UI components. This is where NativeBase comes in: it provides a library of cross-platform UI components.
As it claims, it provides the basic UI Elements you would expect, and are not provided by React Native. All the components are based on a stylesheet. Out of the box, you can choose from three starting stylesheets: Platform, Material, CommonColor. Of course, you will need to override the styles to perform your branding, but rest assured, any major UI changes will be handled by NativeBase (such as changes to the safe areas due to the notch in recent phones)
Define strict formatting rules & choose a programming style
Luckily for us, linters and code formatters exist, so we can enforce some formatting rules, and some programming rules. For the formatting part, we can start by using a code formatter such as Prettier, and create our .prettierrc file. Here you will define if you should be using single or double quotes, the number of spaces and so on. Then configure your favorite IDE to format code on save. Gone are the days of those pesky commits with whiteline differences.
Now let’s get on to the linter: choose the appropriate linter for your language then? You should probably start by using a pretty restrictive ruleset. The Airbnb ruleset is pretty popular, and is a good starting point. From here, you might notice that some rules don’t suit your needs. If so, get your hands dirty and dig into the .eslintrc file, and tweak the rules.
Having your app crash because you passed the wrong prop to a component is never enjoyable. How can you avoid this? By declaring PropTypes: declare what each component is expecting. Now you will get nice warnings when you fail to initialize correctly a component.
Add in some automation
Our project is now built by Expo, enforces strict coding rules, and performs some simple validation.
Depending on how your branches are managed, maybe you would like to reject commits that don’t comply with your rules. To perform this automatically, we could use some pipelines.
New commits pushed to your feature branches: Run the linter and warn about the number of errors.
New merge on one of your protected branches: Run the linter, if errors, fail fast and reject the merge request. If no errors: start the build. If the build fails: reject. If the build succeeds: publish to a specific release channel using Expo’s Codepush capabilities.
Going further – E2E testing
If you want to go further, you can also automate some E2E testing. You could use Appium + Jest to run your tests, bundle the build and tests together, and run them on a device farm such as AWS Device Farm.
About Christopher Robert
Christopher is a Software Engineer with a strong .Net background. In the last years, he has been more focused on Front End/Mobile and Cloud development. He has been working on CI/CD with Azure Pipelines, leveraging Cloud capabilities and scalability with Azure and developing mobile applications using different stacks such as Xamarin, Native iOS and Android, or React Native.
More on Christopher Robert.