Shared Element Transitions

1. Shared Element Transition
with React Native
@narendra_shetty

2. @narendra_shetty
Front-End Engineer at

3. What is Shared Element Transition

4. Few good examples

5. Does React Native support
true shared elements?

6. Intent

7. Approach

12. Without
Transition

13. Adding Exit Transition

15. With exit transition
on Grid screen

16. Adding Entry Transition

18. With exit and entry transition
on grid and detail screen

19. Adding Transition Layer

21. Animation in Transition Layer

22. Animation in Transition Layer
By interpolating on the width, height, top and left
By interpolating on transform and using useNativeDriver

23. By interpolating on
width, height, top and left

25. By interpolating on
width, height, top and left

26. Performance Analysis

27. JS: The animation driver uses requestAnimationFrame to execute on every frame
and update the value it drives using the new value it calculates based on the
animation curve.
JS: Intermediate values are calculated and passed to a props node that is attached to
a View.
JS: The View is updated using setNativeProps.
JS to Native bridge
Native: The UIView or android.View is updated.

28. By interpolating on
transform and using useNativeDriver

36. By interpolating on
transform and using useNativeDriver

38. Hiding the source and destination image
during transition

41. After hiding source and destination
image during transition

42. Handling back button

44. Handling
back button

45. Blog: https://medium.com/@narendrashetty/shared-
element-transition-with-react-native-159f8bc37f50

46. Github: https://github.com/narendrashetty/photo-gallery-RN

47. Expo: https://expo.io/@narendrashetty/photo-gallery

48. @narendra_shetty

49. Questions?