A gentle introduction to ReactNative Animated
Submitted by Nash Vail (@nashvail) on Wednesday, 14 June 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.
- 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)
- PanResponder API (With Demo)
- Current Caveats with animating in React Native
- Introduction to react-native-animatable (https://github.com/oblador/react-native-animatable)
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.