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

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.

Read More →

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.

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.

Create an Animated 3D Effect Airhorn Button in React Native

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.

Create a useMousePosition Hook with useEffect and useState in React


In this lesson we'll explore how to combine useEffect with useState to create a reusable hook. It will listen add a window listener for mousemove and update state with each movement.

Create a componentDidMount useEffect hook in React


In this lesson we'll explore how to create useEffect call, and listen to the window for mouse movement. We'll learn about cleaning up our effects, and how to pass an empty array into the second argument of our effect to create a componentDidMount like effect. Finally we'll trigger a mount/unmount to show effects getting cleaned up correctly.

Immutable Data with Immer and React setState


In this lesson we'll show the traditional method of updating state with a spread operator and then transform it into using the Immer produce functionality. This will allow us to achieve immutability on our data with simple mutations We'll then show how Immer can use currying to create updater functions that can be passed directly to setState.

Custom Handling the Android Back Button with React Navigation

React Navigation

In this lesson we'll explore setting up a stack navigator in React Navigation. We'll create a custom component that uses withNavigation to allow us to listen to navigation transitions. Using the BackHandler from React Native we can ask the screen if custom needs are required when the hardware back button is pressed. Finally we'll prompt the user if they want to navigate.

Conditional JavaScript Callbacks with Reanimated in React Native

React Native

In this lesson we'll explore how to setup a draggable circle. Then we'll dive into using the call method to create JavaScript callbacks whenever certain conditions are met inside of Reanimated.

Create a Draggable Opacity Changing Circle with Reanimated in React Native

React Native

In this lesson we'll use a PanGestureHandler to track a single gesture state. We'll use additional declarative animation functions like cond, eq, add, set, and event. We'll then use interpolate to create opacity and border effects whenever the circle is dragged to new locations.

« Previous
2 of 8