Shared Element Transition with React Native
Submitted by Narendra N Shetty (@narendrashetty) on Monday, 14 August 2017
Section: Full Talk Technical level: Intermediate
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.
- What is shared element transitions.
- Advantages of having a smooth continuous experience.
- Why is this a talk? Does React Native support true shared elements?
- Overview on what we are building.
- Brief details on the approach where I will explain the clever trick of smoke and mirror.
- Implementing Entry and Exit animation during transition.
- Implementing Transition layer for the shared element.
- Will then talk about ways to implement animations in transition layer.
- One way is to interpolating on the width, height, top and left and analyze its performance and why useNativeDriver cannot be used
- 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
Basic knowledge of React Native
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.