Published in React Native School·1 day agoBuild a Stop Watch Hook that Works Even When the App is QuitPreviously we built a custom hook to power a stop watch. The problem with that implementation is that it will only work as long as the app is active/running in the background. If the app is quit then the timer stops.React Native9 min read
Published in React Native School·Jul 26Animated Progress Bar with Reanimated 2Animations can add a lot of polish to your app but can be challenging to accomplish in a performant way. Reanimated v2 makes that much easier to do. This article serves as an introduction to the Reanimated v2 API. We’ll be building an animated progress bar, as seen in the…React Native8 min read
Published in React Native School·Jul 19Build a Custom React Hook: StopwatchHooks are a powerful way to abstract logic out of a component to make it reusable and to simplify the component. Today we’ve got an exercise that will help you practice writing your own hooks by creating a stop watch with the ability to track laps.React Native11 min read
Published in React Native School·Jul 11Flexbox Exercise: Building a Card Game BoardIn a recent open source React Native app I had to build a grid of cards to fill the screen. After having a handful of conversations regarding Flexbox recently I thought this would be a nice quick exercise to get some practice. The app is based on the following reference…React Native4 min read
Published in React Native School·Jul 4Fixed Width Text in React NativeDespite working on React Native daily for 7 years, I’m still constantly learning new things about it. Recently it was the fontVariant style prop on a Text component. This post was published a week ago on React Native School. Be sure to visit for the latest tips, tricks and tutorials…React Native2 min read
Published in React Native School·Jun 27Build Themed Components in React NativeBuilding a multi-theme app doesn’t have to be complicated, so long as you take advantage of custom components. In this tutorial we’ll cover how to create your own versions of core React Native components that are automatically themed to use the right colors based on the user’s preferred color scheme. …React Native5 min read
Published in React Native School·Jun 20How to Detect User Color Preference in React NativeReact Native has two ways for you to determine a user’s appearance preferences: The Appearance API which lets you get their current color scheme The useColorScheme hook which provides an up-to-date color scheme (it will automatically update as the user’s preferences change) This post was originally posted on React Native…React Native4 min read
Published in React Native School·Jun 13How to Setup Path Alias in a React Native TypeScript AppSo you’ve got a React Native app, you’re using TypeScript, and you’re being killing by long package imports. Let’s fix that. This post was originally published on reactnativeschool.com. Take the project structure below — if I want to import CircleButton in components from my StopWatch.tsx in screens it's going to…React Native3 min read
Published in React Native School·Mar 10Build a Wordle Clone with React NativeThis post was originally published on React Native School. Wordle has become an increasingly popular game and it’s one that we can build with React Native… in a single file! Here’s a demo of what we’ll be building today. Let’s jump in, shall we? We’ll use Expo and TypeScript throughout…React Native16 min read
Published in React Native School·Jun 9, 2021Simple Free Expo Starter Template with Navigation and TestingThis is a quick walk through of a simple starter template for Expo projects. This post was originally published on React Native School. Be sure to visit for more React Native tips, tricks and tutorials! It works on iOS, Android, and the web. It includes: Navigation (with React Navigation v5) …React Native3 min read
