Published in React Native School·Aug 29Setting Max Width When Supporting Web and Mobile in React NativeReact Native’s Web support continually gets better. With that, we’ve got to consider different screen sizes and orientations. While building a React Native version of the game “Match the Pairs” ( 100% open source) I found that when playing the game in a horizontal landscape on the web everything looked…React Native4 min read
Published in React Native School·Aug 22Why use the Pressable Component over the Touchable ComponentsWay back in v0.63 of React Native the Pressable component was introduced. But we’ve still got all the Touchable components (TouchableOpacity, TouchableHighlight, TouchableNativeFeedback, TouchableWithoutFeedback)… So, which do you choose and why? tl;dr The preferred and suggested component, per React Native, is the component (and by extension the Pressability API). Why Pressable Was Introduced React Native…React Native2 min read
Published in React Native School·Aug 15How to Share from a React Native App (including the Web)React Native’s web support continues to get better and better, especially if you’re using Expo. With Expo it just works out of the box. But adding another supported platform to your app adds complexity! You’ve got to make sure things work on each supported platform. Recently I was building a…React Native4 min read
Published in React Native School·Aug 8Build 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. …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. …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
