Fluid animations and gestures in React Native
Submitted by Satyajit Sahoo on Sunday, 21 August 2016
React Native has revolutionized the way we write native apps, with an excellent developer experience without compromising user experience. But can it keep up with native apps in terms of performance and the smooth user experience native apps generally have?
We’ll explore the land of animations in React Native, and discuss how to build nice, fluid animations and gestures. We’ll discuss why animations can be slow in React Native and how to optimize them.
We’ll start at beginner level introduction and gradually go to advanced stuff.
- We’ll start with an introduction to React Native and how it is different from traditional native or WebView based applications
- We will have a quick look at the ways to animate React Native components
- Then, we’ll discuss the native LayoutAnimation API and how is it awesome, and it’s limitations
- Time to discuss the real gem, the Animated API, we’ll discuss about what makes the Animated API so awesome
- Then we’ll talk about the gesture system in React Native and how to use it together with Animated
- We’ll then move on to InteractionManager, scheduling work, and how to prevent stutters in your animations
- We’ll discuss
react-native-tab-view, a fluid tab navigation library utilizing the Animated API
- In the end, we’ll discuss the future directions React Native is taking with native animations
I’m also a core contributor of React Native, helping with patches, managing issues and interacting with the community. Currently I work at Belong, a social platform for local communities.