Posts

In this article, I will explain how you can use typescript aliases with Babel or TSPath. If you have been using TypeScript/JavaScript (TS/JS) and have a nested folder structure, you may well be used to seeing imports like so (using es6 style imports). This is sometimes referred to as path hell and is a very common occurrence as your project grows in size. import moduleA from "../../../moduleA"; import moduleB from "../moduleB"; These are called relative imports, as we are importing modules using paths relative to our current module/file. As you can see, they can sometimes be very ugly and hard to work out where the module is we are importing. So sometimes you will use the wrong number of “../” etc. There are a few tools we can use to help solve our problem. ...

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. The main advantage of using adaptive icons is so that we don’t have to have to create multiple icons, i.e. round and square versions of your app icon. You provide two layers, a foreground and the background which is usually just a colour. ...

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.60. ...

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. ...

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. ...

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. One of the major downsides of this approach is in larger projects it can make code harder to follow and more bug prune. For example, if you’re expecting a variable to be an integer but turns out to be a string. Typescript makes bugs like this much easier to catch because it is strongly typed and each variable and parameter is given a type. Lets say you have the following function. ...

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. Inside the Home page, we have a Tab Navigator which has two pages, PageA (purple) and PageB (green). Within PageA we have a Stack Navigator with two pages Main (purple) and Secondary (yellow). ...

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. In this article, I will show you how you can theme your Expo app using Redux with React Navigation. ...

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. ...

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. We can simply kill the Docker container when we are done with the database. In this article, I will show you how you can create a very simple RESTful API using Flask and SQLAlchemy, which will connect to a database running in a Docker container. ...

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. ...

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. This way I could run automated tests on my code without needing to either install/rely on this server already existing there. Essentially I ended up creating a TCP server in Python, which would receive some input and respond how I would expect the real TCP server too. ...

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). Also in this example, I will be testing this on an Android device. ...

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. You should see something similar to Figure 1. Now you explore the WebView like a normal web page. ...

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. The database is made up of multiple models. Just like with normal Python models can inherit from other models and share attributes with the parent model. This is very useful if you going to have models that will store similar types of data. ...

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. Debuggers can be a powerful tool when trying to remove bugs from your software, being able to stop your code at any point and check the state, analyse variables etc. ...

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. ...