ReactFoo 2017

A conference on React

Shared Element Transition with React Native

Submitted by Narendra N Shetty (@narendrashetty) on Monday, 14 August 2017

videocam_off

Technical level

Intermediate

Section

Full Talk

Status

Confirmed & Scheduled

View proposal in schedule

Vote on this proposal

Login to vote

Total votes:  +16

Abstract

I will be talking about how to achieve Shared Element Transition with React Native for both iOS and Android.

Will explain the advantages of having a smooth continuous experience.

And since React Native doesn’t support true shared elements, I will explain how we can achieve this with a clever trick of smoke and mirror.

Outline

Outline:

  1. What is shared element transitions.
  2. Advantages of having a smooth continuous experience.
  3. Why is this a talk? Does React Native support true shared elements?
  4. Overview on what we are building.
  5. Brief details on the approach where I will explain the clever trick of smoke and mirror.
  6. Implementing Entry and Exit animation during transition.
  7. Implementing Transition layer for the shared element.
  8. Will then talk about ways to implement animations in transition layer.
  9. One way is to interpolating on the width, height, top and left and analyze its performance and why useNativeDriver cannot be used
  10. Another way is to interpolating on transform and using useNativeDriver

The summary of this talk is put together into a blog: https://medium.com/@narendrashetty/shared-element-transition-with-react-native-159f8bc37f50

Requirements

Basic knowledge of React Native

Speaker bio

Narendra is a Frontend Developer at Booking.com. He is been working with React & React Native for over a year now. He cares about performance and believes that performance is a key for conversion.

Links

Slides

https://www.slideshare.net/narendrashetty/shared-elementtransitions

Comments

  • 1
    Narendra N Shetty (@narendrashetty) Proposer a year ago

    I will submit the slides for the talk over this weekend. Hope that’s not too late

    • 1
      Sandhya Ramesh (@sandhyaramesh) Reviewer a year ago

      Yes, please do and then email me as well. sandhya@hasgeek.com

      • 1
        Narendra N Shetty (@narendrashetty) Proposer a year ago

        Sure! I will.

Login with Twitter or Google to leave a comment