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

• https://medium.com/@narendrashetty/shared-element-transition-with-react-native-159f8bc37f50
• https://medium.com/@narendrashetty/bubble-animation-with-react-native-72674eab073a
• https://hackernoon.com/how-to-single-sign-on-with-react-native-and-fabric-6fec9de6765a
• https://hackernoon.com/how-i-built-a-super-fast-uber-clone-for-mobile-web-863680d2100f

Slides

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