Add adaptive icons to your Android app

In this article, we will go over how you can use add the new adaptive app icons to your Android app. In his article I will be using a React Native project, so the structure of your Android app may vary. Adaptive Icons Adaptive icons are a new feature introduced in Android 8.0 (API level 26). It allows your app icon to be displayed using multiple shapes across different devices and launchers, more information available here. ...

Auto Publish React Native App to Android Play Store using GitLab CI

In this article, I will show you how can automate the publishing of your AAB/APK to the Google Play Console. We will be using the Gradle Play Publisher (GPP) plugin to do automate this process for us. Using this plugin we cannot only automate the publishing and release of our app, we can also update the release notes, store listing (including photos) all from GitLab CI. Note: In this article I will assume that you are using Linux and React Native version >= 0. ...

Using Gitlab CI to Publish an Android React Native App

In this article I will show how you can use the GitLab CI with React Native to create a binary which can be published to the Google Play Store. Prerequisites Google Developers Account A working React Native Android project Keystore First, we have to generate a keystore which we will use to sign our APK. To do this run the commands below, follow all the instructions and keep the file safe. ...

Creating a Simple RESTful App using OpenAPI, Flask & Connexions

RESTful APIs are very popular at the moment and Python is a great language to develop web APIs with. In this article we will go over a documentation first approach to building APIs. We will be using Flask, Swagger Code-Gen (OpenAPI) and Connexions. I will go over an API/documentation first approach to building a RESTful API in Python. Which will try to minimise the differences between what’s defined in the API specification and the actual API logic itself. ...

How to add your own type definitions to DefinitelyTyped

Recently I started using TypeScript (TS) with React Native. Now I won’t be going over the benefits of typescript in this article there are plenty for other articles that will explain the benefits (and drawbacks). TS is a superset of JavaScript (JS) so anything JS can do TS can do (and more). One of the main advantages of TS is it’s strict type checking. JS is weakly typed which means variable and parameters can be of any type. ...

DrawerNavigator, TabNavigator and StackNavigator with React Navigation

In this article, we will create a simple React Native (with Expo) application using React Navigation, for moving between screens/pages within our app. We will create an app which had a Stack Navigator nested in a Tab Navigator, nested within a Drawer Navigator. This might sound a bit complicated so let’s take a look gif below. We have three main pages in the Drawer Navigator Home (purple), Settings (red) and About (blue) pages. ...

Theme your Expo/React Native App with Redux and React Navigation

Recently whilst developing a React Native app (with Expo), I built a simple tab navigator using React Navigation library. I wanted to theme the app so that the header would change colour depending on which page you’re on. For example on the primary page it would be red and on the secondary page, when you change tabs, the header would become blue. I ended up being able to do it using Redux. ...

Testing a Flask App with pytest-mock and pytest-flask

Pytest is a popular Python library used for testing. It is my preferred testing library because it requires less boilerplate code than the alternatives such as (the builtin) unittest, the built in testing library. In this article, I will show you how you can use pytest-flask and pytest-mock to test your Flask app. These two libraries are plugins for Pytest which build upon some of the features that Pytest provides us. ...

Building A Simple Flask App with SQLalchemy and Docker

SQLAlchemy is an object-relational mapper (ORM), it allow us to interact with a database using Python functions and objects. For example, if we have a table called Cats we could retrieve every row with a command like Cats.query.all(). The main advantage of this is that it allows us to abstract away the SQL. Docker 🐳 allows us to quickly bring up a database within a Docker container, this means we don’t have to set up and configure a database on our local machine. ...

Using Multiple Docker Containers to Setup Nginx, Flask and Postgres

Terminology Docker Image: Is a file used to execute code in a Docker container, built from a set of instructions. Docker Container: Is a Docker image that is being executed or run. Docker 🐳 is a relatively new and exciting technology, Docker is a containerisation tool. The main benefits of using Docker is that you can use the same environment for development, testing and production. Since Docker environments are consistent this means if the application works in the testing environment it will also work in production. ...

Pytest with Background Thread Fixtures

Recently I had to test some of my Python 🐍 🐍 🐍 code which required an external dependency and communicating by using TCP sockets 🔌 . You can think of this dependency as essentially a database because it stored information. However, when testing my Python code, I couldn’t rely on there always being a TCP server to send messages to. So I ended up creating a simplified mocked version in Python. ...

Running Expo/React Native in Docker

Running Expo/React Native in a Docker container can sometimes cause issues. In this example, I will be running Docker 🐳 within a guest VM (Ubuntu) which will run on my host machine (Windows). My host machine will also be running another VM as the Android emulator (Genymotion) for Expo to connect to. You can get a more detailed post about how to connect two VMs together here, #Plug 🔌🔌🔌. Since I’ve set up networking on those two VMs already as far as Expo is concerned it might as well be running on the host machine (Windows). ...

Debugging A React Native WebView

The core logic of my React Native app involves using WebViews because I need to access the HTML5 canvas. Whilst developing this code there are bound to be errors and issues with the WebView code. Figuring out how to debug code within the WebView isn’t so obvious. Option 1: Chrome Inspect Start your Expo/React Native app*. Open and chrome and then go to the following URL, chrome://inspect. Then click on the inspect button, click the top link to open the latest WebView, you should see something similar to Figure 2. ...

Inheritance in SQLAlchemy (with Flask)

SQLAlchemy is an Object-relational mapping (ORM) made for the Python programming language. ORMs in theory allow programmers to abstract away SQL. In simple terms they allow us to interact with a database using purely Python (objects/functions). I will be using the flask-SQLAlchemy extension for my examples. Each table is referred to as a model, each model is simply just a python class and each attribute of that class becomes a column in an SQL table. ...

Debugging React Native apps in WebStorm and Visual Studio Code

Visual Studio Code and WebStorm are two popular editors for developing React Native/Expo apps. These editors have lots of useful features, such as syntax highlighting, git integration and auto completion. However working out to debug Expo apps can be a bit confusing. One of the main advantages of working in an editor/IDE (let us be honest Visual Studio Code is pretty close to an IDE) is being able to use a debugger (and breakpoints) to go through your code line by line and see which part of your code is not running as expected. ...

React Native/Expo with VirtualBox and Genymotion

My home PC runs Windows for various conveniences, such as gaming. However, for development, I run an Ubuntu virtual machine (VM) and Genymotion (on Windows) for testing my app. Genymotion also uses VirtualBox to run its Android emulators. So we work out how to let two VMs running on the same host communicate with each other (Ubuntu and Android Emulator). Please Note: This will also work for VMWare Player. Solution There are a few networking options we can choose from when setting up a VM. ...