Tutorials

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 makers. 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.

We'll explore how to use various Animated apis including Animated.timing, Animated.parallel, Animated.sequence, setValue, and Animated.delay to build a notification that fades and slides in and out.

We'll learn about using a ref and the measure function to get the dimensions of a particular view. Additionally we'll show how to use the measure function in conjunction with the componentDidUpdate callback on setState.

We'll explain using translateY and to move views around performantly.

We'll explore the concept behind child function components and how to add dynamic return values and hiding state management inside the component. Then we'll explore how to setup functional render props that allow for complex components with simple APIs. Finally we'll show how these 2 concepts can compose together like any other React component.

The Yellow warning box in React Native can be both helpful and annoying. There are many errors that can be ignored but end up blocking necessary pieces of the application.The Yellow warning box in React Native can be both helpful and annoying. There are many errors that can be ignored but end up blocking necessary pieces of the application.

The iOS AsyncStorage implementation has an unlimited amount of space by default. This is not the case on Android, the default size of AsyncStorage is 6MB. This is generally enough for a casual application however there are many cases when you may need more, like when you are using PouchDB async adapter.

TextInputs on React Native receive the native defaults. In general this is ideal because it's how native the native components look however on the Android platform this takes the form of a dark underline.

First off. Star the repo here https://github.com/facebook/jest so you can show some love for the hardwork that has been put into it.

Props

I was an early adopter of Jest back in the early days ( ~v0.4). It was okay but difficult to setup and slow with sometimes weird results and behaviors.

Tireless effort has been done by Christoph Pojer to get to the latest Jest (v16.01) so props to him and others working with him.

Check out the fantastic documentation here https://facebook.github.io/jest/docs/getting-started.html

Migrating in seconds

There is almost nothing to write about on this topic because it was almost too easy. Mostly because of jest-codemods. It is a set of codemods crafted to transition your Tape or Ava project to Jest.

It is worth it. Jest has come along way when it comes to speed, functionality, configuration options, and ease of configuration (or lack there of to get started).

There were minor configurations I had to setup, but most were copying and pasting from the documentation.

Lets dive into the process real quick.

What Are We Building

Intro

One of the issues I've noticed with PanResponder is that people assume it is an all or nothing. By that I mean adding a PanResponder in a parent view means it will steal all of your touches and Touchable items won't be touchable any longer.

You may be running into this because you copy and pasted it from here the documentation here https://facebook.github.io/react-native/docs/panresponder.html and it includes a capture phase returning true. (I copy and paste this all the time). We'll talk about the capture phase next.