ReactFoo 2017

In 2017, what distinguishes a great app from a good one is often not what’s under the hood, it’s what the users can see and touch. How rewarding the user’s interaction is with the app is a crucial factor in deciding an app’s success. And an important part of that interaction is user interface animations.

ReactNative supplies a powerful API, Animated, to implement more than just basic animations in apps built using JavaScript. This talk is aimed at introducing the Animated API to people who have some amount of experience with React/React Native. We will start with very basic one line animations (LayoutAnimation) then slowly get into the rest of the API - AnimatedValue, AnimatedValueXY, PanResponder e.t.c. Each of these have an API of their own. There is a lot to take away from this talk.

Outline

• Why animation in apps matter
• Challenges with animating in React Native
• Solution - The Animated API
• LayoutAnimation (plus an aside about Easings) (With demo)
• AnimatedValue (With Demo)
• Interpolation of AnimatedValue to styles (dynamicStyles) (With Demo)
• AnimatedValueXY
• PanResponder API (With Demo)
• Current Caveats with animating in React Native
• Introduction to react-native-animatable (https://github.com/oblador/react-native-animatable)

Speaker bio

I am Nash and I am a front end developer and designer. I have been working with React and React Native for the past one and a half years. UI design and animation has always been a key focus for me as a developer. I have written many articles on UI anmation both for my blog and for Smashing Magazine, each of those articles have been widely appreciated.
Currently I am working on Zulip’s React Native app as part of GSoC 2017. My GSoC project led me to explore the Animated API in depth which helped me discover techniques that could help developers looking to start out or already working on implementing animations in their React Native apps.
I have taken multiple workshops and sessions for a large audience mulitple times and have been called an engaging, entertaining and well informed speaker, which I always try to live up to.
ReactFoo will prove a great platform for me to both share what I have learnt and also to connect with a bigger community.

Links

• https://medium.com/@nashvail
• https://www.smashingmagazine.com/author/nashvail/
• https://github.com/nashvail
• https://twitter.com/NashVail

Slides

https://slides.com/nashvail/ui-animation-in-react-native/