A look at react-native-nfc-manager
With iOS 13, Apple finally opened the SDK to write data on some of the most popular NFC chips.
Thankfully one of the most popular (and to my knowledge, only) NFC React Native libraries, react-native-nfc-manager, also added (some) support to do this. Let’s see how it works in practice!
TL;DR 1: Too lazy to read? Watch the video:
TL;DR 2: Just want the code? Here is the code!
Installing the Library
Installation is actually super simple. First, we need to add the module via npm.
npm i --save react-native-nfc-managerFor Android, that’s it. For iOS, you have to do a couple of extra steps. …
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:
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 #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…
Disclaimer: This post is not a rant. We are not delusional, PH is a business and as such it needs to cater for their community as well as their business logic. This post is merely an outline of our failed product launch.
As you probably don’t know we officially launched our design focused cryptocurrency portfolio application, f0l.io this Wednesday. Not necessarily a life altering product, but it ticks all the boxes that we know Product Hunters would love. It has a very unusual UX and crypto is all the rage these days.
We did a ton of preparation before the launch. Read all the “How to make it on Product Hunt” articles available, and trust me there are a lot of articles. We also spent the month before the launch to build a small, but loyal following of early beta power users. …
