Shared Element Transition with React Native
Narendra N Shetty
@narendrashetty
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:
- 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
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
{{ errorMsg }}