In this course we'll dive into the fundamentals of [Reanimated](https://github.com/kmagiera/react-native-reanimated) as well as how it interacts with [react-native-gesture-handler](https://github.com/kmagiera/react-native-gesture-handler). Both of these libraries are new ways to interact and animate with React Native. They operate natively and declaratively. This means they are fast because they are running natively and aren't touching the bridge and declaratively meaning you define all the necessary code and it responds when things change.

Overall Reanimated is a very powerful new method to help you achieve the most performant animations so your React Native application runs smoothly

React Native

React Native Reanimated Fundamentals

In this course we'll dive into creating an Animated Number Ticker. We'll learn about hiding elements using `overflow: "hidden"`. How to abstract code into a reusable component. Finally we'll use Animated to create the rotation effect.

Creating a React Native Animated Number Ticker

React Native Video is a community supported video element for React Native. It allows for remote loading of videos and also works with the React Native asset management system to load videos. Having a flexible video component is essential to developing and enhancing your application.

Like many React Native elements, the video element is very basic and doesn't ship with anything besides a flexible API. This allows you to develop the exact layout, controls, and custom overlays to match your application.

In this course we'll take a look at a basic setup. Then explore the different ways we can load and show videos. We'll show how to use a few of the custom callbacks to overlay errors and buffering elements. Because there are no controls shipped with `react-native-video` we'll show how to write custom video controls and animate them when the video has not been interacted with.

Finally we'll cover a few common paradigms found in the wild. Including repeating background cover videos, auto-playing videos when they scroll onto the screen and auto-stopping them when they are scrolled away from.

Fundamentals of React Native Video

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 useMousePosition Hook with useEffect and useState 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.

Create a componentDidMount useEffect hook in React

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.

Immutable Data with Immer and React setState

In this lesson we'll explore how to test that an async form submission successfully happened using Jest. We'll also take advantage of react-testing-library to render our react components to a fake dom. We'll use `MemoryRouter` to mock what a browser would normally do in the event of a transition, and create a fake component route to confirm that the submission successfully redirected us to the url we wanted.

Test Successful Async Form Submissions with React Router

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.

your daily dose of code

Featured

Latest Content