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.
In this lesson we'll explore how to combine
useState to create a reusable hook. It will listen add a window listener for
mousemove and update state with each movement.
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.
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.
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.
In this lesson we'll explore how to setup a draggable circle. Then we'll dive into using the
In this lesson we'll use a
PanGestureHandler to track a single gesture state. We'll use additional declarative animation functions like
event. We'll then use
interpolate to create opacity and border effects whenever the circle is dragged to new locations.
In this lesson we'll explore using Reanimated and React Native Gesture Handler to create a touchable opacity button using
TapGestureHandler. With declarative animations in Reanimated we'll use tools like
eq to create a purely native opacity animation.
In this lesson we'll explore using Reanimated and React Native Gesture Handler to create a button using
TapGestureHandler. With declarative animations in Reanimated we'll use
eq to create a purely native opacity change animation when the button is pressed.
In this lesson we'll show how to create an always rendered but invisible modal. Then using
measure we can find our action locations. We'll use a
PanResponder to register presses on an image. When you press and hold we'll use
Animated to show the modal. With the
onPanResponderMove we can check if the user has moved their finger onto an action. We'll use
setState updater function to highlight the action in bold and show how to take action in