JSFoo 2016

Tackling speed and performance for JavaScript

Satyajit Sahoo

Fluid animations and gestures in React Native

Submitted Aug 21, 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.

Outline

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

Speaker bio

I’m a self-taught frontend developer with special interest in designing and building user experiences. I’ve been coding in JavaScript for past 3 years, and have used React heavily for past 2 years.

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.

https://twitter.com/satya164/

Comments

{{ gettext('Login to leave a comment') }}

{{ gettext('Post a comment…') }}
{{ gettext('New comment') }}
{{ formTitle }}

{{ errorMsg }}

{{ gettext('No comments posted yet') }}

Hosted by

JSFoo is a forum for discussing UI engineering; fullstack development; web applications engineering, performance, security and design; accessibility; and latest developments in #JavaScript. Follow JSFoo on Twitter more