React Native Animation

With Hooks

Nagarajan

About Me

Full stack develolper

Fiddle with Js

I Like to 

Sr. Software Engineer @ Snapwiz. Inc.,

Amateur Harmonica Player

@NagarajanFs

Tell others what to do

Animation

• Regardless of the medium should be 60FPS

• UI Animations are necessary for tactile feedback and Perceived Performance

• UI Animations Have to be interruptible

Interruptible Animations

Ui Animations have to be able to handle any kind of changes

To be interactive Animations have to change its course based on User Interactions

So fire and forget timing based animations wouldn't be suitable. 

Obstacles For Smooth Animation 

• React Reconciliation (setState,Props change)

• React Native Bridge

About Hooks

Provide a compact way to create  re-usable stateful logic for React

Came as a solution for numerous (related/unrelated) issues 

Lets you write Components without using classes

It makes straightforward to extract the sideEffects to a re-usable parts

Libraries

react - 16.8.3

react-native - 0.59.2

Notes

Animated - part of react-native

In Built

react-native-gesture-handler - ^1.1.0

3rd Party

Animated implements efficient nativeDriver

Need to See the Code & demo for the rest of the presentation