TutorialsScreencastsCourses
Jason Brown
Build an Animated Page Indicator using Animated Dynamic Value Tracking in React Native

In this lesson we'll build an animated page indicator with React Native. We'll use Animated and Animated math functions to create animations that can be used with useNativeDriver. We'll then look at how to use a second Animated.Value and setValue to create dynamically tracked animations.

React NativeRead more ⇨
Jason Brown
Animated Input Label with Chrome Autofill Detection in React

In this lesson we'll create a label that is centered inside of a text input. We'll look at how to detect Chrome is autofilling the input using CSS animation and CSS pseudo classes. When the input is autofilled, focused, or filled in we show how to animate the label to it's resting place a top the input.

Jason Brown
Build an Animated Page Indicator with Hooks in React

In this lesson we'll build an animated page indicator with React class component. We'll use state, and basic math to setup transforms to allow for automatic page animations even across multiple page changes. Then we'll convert the class component to take advantage of React hooks including useState, useEffect and useRef.

Jason Brown
Create a Snapping Image Swiper like Instagram with React

In this lesson we're going to build an image swiper that works on web and mobile. We'll use a similar technique to Instagram and create a div that hides all overflow and translate an inner container left/right. We'll add in the ability to detect what image the user is looking at and snap to that image.

Jason Brown
Create a Segmented Auto-Moving SMS Code Verification Input in React Native

In this tutorial we're going to build a segmented verification input that will automatically advance while you type. It will be a configurable length and automatically stop when the user has typed the maximum allowed length. We will also take advantage of React controlled inputs to read text changes but never display anything in the input.

React NativeRead more ⇨
Jason Brown
Create a Segmented Auto-Moving SMS Code Verification Input in React

In this tutorial we're going to build a segmented verification input that will automatically advance while you type. It will be a configurable length and automatically stop when the user has typed the maximum allowed length. We will also take advantage of React controlled inputs to read text changes but never display anything in the input.

Jason Brown
Create a Custom Animated Bottom Action Sheet without Measuring in React Native

We'll explore how we can create a custom action sheet in React Native that will animate visible/hidden without measuring any of the views. The technique will use absolute positioning, translation, and interpolation. The backdrop will quickly animate upwards before fading in. We'll position the action sheet container off screen, then translate the action action sheet on the screen. This allows us to not have to measure any of the inner content.

React NativeRead more ⇨
Jason Brown
Create a Dropdown in React that Closes When the Body is Clicked

In this lesson we'll create a dropdown menu that is toggle via a button setting state. We'll then setup a ref to get access to the container div. Finally using event listeners on the document body we will check if the user clicked anywhere outside of our dropdown and then close the dropdown.

Jason Brown
Create a Hoverable Display Card with React and Emotion

In this lesson we'll explore how to get Emotion setup with create-react-app. Then dive into using @emotion/styled to create styled React components. Finally we'll show how to structure styled components to allow you to use :hover and transition to create animated hover effects.

Jason Brown
Create an Animated 3D Effect Airhorn Button in React Native

In this lesson we'll dive into using some clever offset techniques to make a button that appears to be 3D. We'll add in some animations to control those offsets so that when our button is pressed/released the button animates in and out while playing an airhorn sound.

React NativeRead more ⇨
« Previous
2 of 8
Home