This talk will focus on the Animations in React Native using a demo. Animations are tricky in React Native and there’s are lot of metrics that need to be kept in mind while doing animations that feel smooth.

This talk will also include few animation demos showing animations like easing, stagger, keyframes and transition. I will using the native Animated API to achieve those. I will also talk about where to use InteractionManager or requestAnimationFrame. Most of the animations can be offloaded to the native thread to achieve smooth experience.

The talk will also include the navigation transitions using react-navigation

Outline

This talk will include the following APIs:

• Animated
• InteractionManager
• requestAnimationFrame

The demos will include the following animations:

• Stagger
• Mount/Unmount transitions
• Keyframes
• Interpolations
• Trails

The navigation library used in the talk will be react-navigation and will include the part about how to achieve page transition effects and at the same time improve the performance of transition using react-native-screens.

Requirements

N/A

Speaker bio

I’ve been working as a front end developer with Anarock. Most of JS experience stems from job, which is predominantly React Native development. Recently started working with animations. Figured a bunch of practices to make animations a smoother experience.