ReactFoo 2017

A conference on React

A gentle introduction to ReactNative Animated

Submitted by Nash Vail (@nashvail) on Wednesday, 14 June 2017

videocam
Preview video

Technical level

Intermediate

Section

Full Talk

Status

Submitted

Vote on this proposal

Login to vote

Total votes:  +3

Abstract

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

Slides

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

Preview video

https://youtu.be/fV8y_8uSZgw

Comments

  • 1
    Siddharth Kshetrapal (@sidkp) a year ago

    Hi Nash,

    This is a really interesting topic.

    Can you please submit your slides and a 2 minute video on what are you going to talk about. That would help us a lot.

    - reactfoo team

    • 1
      Nash Vail (@nashvail) Proposer a year ago

      Hey Siddharth, Traveling out of Bangalore this weekend so wrapping up some urgent work. Wanted to know if a video would be fine or submitting slides separately is an absolute requirement?

      • 1
        Siddharth Kshetrapal (@sidkp) a year ago

        Slides would really help us shortlist your talk. You can submit the video first and then the slides

Login with Twitter or Google to leave a comment