Recently I got a chance to improve one of the main UI components on my company’s app, called countdown timer. It is used to show the duration of the time-sensitive marketing campaigns. While doing this improvement, I was reminded about one of my interview questions to build a simple countdown timer as well. Back then, my answer was something like this:
Earlier this year, the Facebook team has announced the React Native version that supports Flipper by default. Flipper is a platform for debugging mobile apps on iOS and Android through a desktop interface. You can see it as Chrome’s debugging tools to React Native apps. Since the day it is announced, it’s been my first choice of tool for developing and debugging RN apps. No need to enable remote debugging tool from dev settings in order to see your own logs is a huge pleasure. But do you know that this tool doesn’t stop there?
Recently we wrote about the frontend engineering standards in TenX. This standard gives us a chance to work with incredible libraries out there, such as React Native, Expo, and TypeScript. We also shared a little bit about how we do testing for our relaunched TenX app. In this article, we’ll be digging deeper into testing, especially UI testing, and how we developed a tool that make this process easier.
We use Jest as the testing framework for our TenX app. This library meets our needs as it provides filtering, watch mode, and other cool ways to run our tests automatically.
The new class “property initializers” allows you to define methods (or any property) in your React components using regular ES6 classes without worrying about binding. Yes, I’ll say that again, without binding. The idea behind it is to assign an arrow function to a property which will act like a normal method, and automatically bind this from the value of the enclosing execution context (in this case, the constructor). It’s often used to create a much “cleaner” ES6 class component.
In this post we’ll create a simple screen that renders a…
Playing with gesture and animation in React Native is always a fun but challenging thing to do. My previous post covered how I implemented gesture handler for zooming and dragging a photo. This time I tried another challenge to build a UI that is familiar to Android users: the Pattern Lock.
Pattern Lock is one of the security options supported in Android to unlock your phone. In iOS, there is no pattern lock available. So I took the challenge to build this for both platforms using React Native and Expo.
Before we start coding, let’s see the pattern lock in…
Entering React and React Native world has been a fun yet challenging journey for me. The more I learn, the more I’m interested in building awesome cross-platform apps, which also leads me to venture into parts of UI I never dared to touch before such as Animation.
In most of my previous projects, I’ve used Animated API from React Native for simple declarative animations, but never actually implemented complex gesture-based animations. So, in order to learn gestures and animation even more deeply, I decided to challenge myself to build a prototype of Instagram’s photos, which you can zoom and drag…