Complete React Native Animations Course

React Native has increased in popularity over the past year. It’s growth will only sky rocket as more companies like AirBnB, Uber, Facebook, and even smaller agencies learn to leverage it.

One missing piece that I’ve attempted to document for the past 2 years is animations. I started when I didn’t know animations at all, and have grown to be able to breakdown and reconstruct them using the powers of Animated and React.

In my course we will walk through basic animations, understanding interpolation, and move onto real world examples like shared element photo grid transitions. I’ve condensed all the knowledge I have about animations down into this course. Including animation breakdowns and explaining my mental model for how I build out UI before animating.

If you have learned anything from the free content I’ve put out and want to support me, or are just getting started then come master React Native animations with my course.

You can purchase it at https://reactnativeanimations.com/.

Tagged under animations,, complete,, course,, master, react-native,

New Tutorials on Code Daily

I’ve officially launched my new site Code Daily. This site will now house all of my tutorials, screencasts, and courses.

The goal is to post some bit of content on a daily basis. Anything from a tutorial, to a screencast, or even full courses could be published daily!

These will primarily be focused on React, React Native, and general web development practices. However as I slowly grow and see where the web/mobile is headed I will devote more time towards that content.

I will do my best to provide value and making the “bleeding edge” of web/mobile technologies less intimidating.

I will still update some content on this site, but at some point redirects will be setup to my new site.

So if you still want to get content visit Code Daily, and follow me on twitter at https://twitter.com/codedailyio.

Check it out here => Code Daily

Tagged under new, site

A Year in Review and What is Next

Absence

I made a decision to not post as much on this blog over the past year. Despite reaching upwards of 300,000 views in the past 1.5 years, I wasn’t seeing the positive feedback I was hoping for. Not compliments, but increase knowledge around animations, and just a general positive impact on the community.

I now realize I was wrong. Over the course of the year many people have been posting new animated blog tutorials. I won’t go through my entire twitter timeline but one recently was from someone who posted an animation tutorial.

Lurking in chat channels, many have been helping others with animations and referencing my blog as where they learned. It’s a good feeling. This year I will return to the blog.

Read on →
Tagged under 2017, me, react, react-native, review

Migrating Ava to Jest

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.

First and last step to transition tests

First install jest-codemods

npm install -g jest-codemods

Then run jest-codemods in a desired directory. It will prompt you with Ava, Tape, or a both option. Then you provide a glob. I was running in my root so I provided the glob **/__tests__/**/*.js to convert all of my tests.

That was it.

Read on →
Tagged under ava, jest, react, testing

React Native - Maintain Touchable Items with a Parent PanResponder

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.

Read on →
Tagged under Native, PanResponder, React, Touchable