In August I challenged myself to create a Slot Machine App in React Native that is not just a proof of concept, but ready for the app store. Relatively quickly I managed to create the basics: a “Spin” button and a set of reels that animate smoothly when you press the button. I was also able to add the logic for evaluating the reels after the spin. If you missed you can watch the first two parts here and here.

When it comes to apps (or any development really) I usually make a POC, to see if the idea is even possible, then I reach out to my designer to create something that I can work with. In this case he had a pretty busy September so the graphics were coming along VERY slowly. …

Break away from Helvetica, and give your users something more interesting to read

Up until React Native 0.60, I was using package.json and RNPM to add my custom fonts to my projects.

Since 0.60, however, I was greeted with the following warning on every build:

warn Your project is using deprecated "rnpm" config that will stop working from next release. Please use a "react-native.config.js" file to configure the React Native CLI.

The solution is actually pretty simple, and I thought it warranted a short article.

Step 1: Adding the Assets

As a first step, create an assets folder in the root of your project. Then create a fonts folder inside it. …

A walk through building this classic game with a new twist

Today I’m going to recreate another classic game in React Native: Whack-A-Mole. The mechanical version of this game was an arcade fan-favourite in the late ‘70s and early ’80s. Since then numerous clones on various devices have been made.

TL;DR #1: Watch the video:

TL;DR #2: Grab the source code from GitHub

The gameplay is super simple. On the screen we display 12 slots. Moles will pop out of these slots and then disappear again at a rapid pace — the players’ goal is to hit as many of them on the head as possible. …

Making a fun, playable, and good looking clone of a hit game

In the previous piece, we created a proof of concept version of Flappy Bird using react-native-game-engine and Matter.js. While it was fun, it wasn’t even remotely the kind of game that any sane user would enjoy or even use for more than ten seconds.

Today we are aiming to make the game to be (more or less) production-ready.

TL;DR #1: Watch how I made this on Youtube.

TL;DR #2: Grab the source code on Github

This is what we are going to make:

I love working with lists so I’ve created a little to do list to accomplish the…

Recreating the annoying viral hit game

Flappy Bird is one of those games that most people know about, even if they have never played it. It was originally released in May 2013 by a Vietnamese developer, Dong Nguyen, but didn’t become popular until early 2014, when it skyrocketed into the number one position of the iOS App Store.

The game is undeniably addictive and annoying at the same time, but the bigger question is: can it be made in React Native? The answer is obviously yes, otherwise this post wouldn’t exist!

TL;DR #1: Prefer watching it in a video format?

TL;DR #2: Just want the code? Here you go…

TL;DR #1: Hate reading? Watch the video (please subscribe if you like the content)

TL;DR #2: Just want the code? Grab it here: https://github.com/lepunk/react-native-videos/tree/master/Snake

Snake is a classic video game made popular by the Nokia phones in the 90s. The gameplay is simple: you control the head of the snake and your objective is to eat food. Every time you eat food the snake’s tail grows. (in the classic version) If you hit the wall or hit your own tail, you die.

For me this game is especially nostalgic, as this was the first game that I successfully cloned in Turbo Pascal, during the first year of high school. I even sold a couple of copies to my class mates. …

This is the story of one of the most challenging trips I ever took…

So let’s start at the beginning! The company I’m working for has this amazing perk that allows employees, who’ve been with the company for over 5 years, to take an extra two weeks, paid sabbatical if they take it in a combination with two weeks of annual leave. Amazing, a full month off work!

I’ve been with this company for over 11 years now and I never took advantage of this, but recently I felt that stress is getting to me, so it was time for a longer hiatus. …

Yesterday I made a (more or less) fully functional MineSweeper game in React Native.

MineSweeper is responsible for endless hours of productivity loss since the 1960s, and there is a reason for that: it’s extremely addictive and very easy to understand.

The rules of the game

• You start with a board of a fixed size, let’s say 10x10, giving you a minefield of 100 cells
• A set amount of cells contain mines
• If you click on a cell that is a mine, it’s the end of the game and you lost
• If you click on a cell that is not a mine, but one or more of it’s neighbours contain a mine the game will show you the count of such…