Tutorials

In this lesson we'll use yarn and yarn workspaces to create a monorepo that includes a web creat-react-app, a react-native app, and shared code. We'll use react-app-rewired and react-app-rewire-babel-loader to rewire the create-react-app configuration to allow babel to process the shared code from workspace. We'll also use crna-make-symlinks-for-yarn-workspaces and metro-bundler-config-yarn-workspaces to configure the react-native app to be able to find the shared code in the workspaces.

In this lesson we'll use the screen Dimensions and anAnimated.ValueXY to create an animated element that when animated is contained within the screen dimensions. It uses the extrapolate: "clamp" feature of interpolate.

In this lesson we'll see how we can use the componentDidUpdate lifecycle method combined with an animation to create the rotating number effect.

In this lesson we'll abstract our code into a reusable Tick component. We'll explore how React will update existing component instances and give us access to necessary data.

In this lesson we'll walk through the effects of overflow: "hidden". With onLayout we can measure elements even though they are hidden with opacity. Finally we'll show how we can render hidden elements and control what is visible with a translate.

In this lesson we'll use the onMoveShouldSetPanResponderCapture from PanResponder to register touches with out stealing touches from other PanResponders. We can use this method to detect inactivity. This technique can be used for things like video players with auto-hiding controls.

Youtube has a unique video playing experience. It allows you to drag a video to the corner of the screen which continues to play. You can then navigate through the site and select other videos. Additionally if you want to drag it back up you can drag back to the video you were viewing.

We'll build out a map with react-native-maps and custom animated map markers. We'll construct an a scroll view that when scrolled will animate the marker that it is associated with. Once scrolling has stopped we will animate the map region and focus on the marker we are looking at.

We'll use a single Animated.Value and use and explain interpolate in depth. We'll also show how to use extrapolate: "clamp" to lock our outputRange values.

We'll show how to build a reusable ScrollView and ScrollElement component without adding any additional DOM elements. We'll take advantage of React.cloneElement, React.Children.only,findDOMNode, and context to build a registry of scrollable elements in the list. Then we'll use ref on the ScrollView to expose a way to animate to any item at any scroll position in the list.

In this lesson we'll create a heart shaped like button that bounces when it is pressed. We'll use interpolate and Animated.spring to accomplish the effect.