🦸🏻‍♂️ Hero/Shared Element Animation for Native Stack Navigator

Intro

Hi!

I’m currently using react-navigation-shared-element to create shared element transitions between screens, which uses the StackNavigator from react-navigation under the hood (so not the native one from react-native-screens, there’s an issue for this here) and therefore suffers from bad performance. (It is an awesome library though!)

Approach

So I’m trying to come up with performant alternatives. I have thought about creating a Native Module/library which wraps the Hero library and an Android alternative, so you can declare React Components like this:

<Hero id="image1">
  <Image source={source} ... />
</Hero>

… wrap those in a Native Stack Navigator and let the library automatically create Shared Element / Hero Transitions for you on each navigation (props.navigation.navigate(...)).

      

So why am I opening this issue?

I wanted to ask first before I try to dig around the source code and eventually waste a lot of time:

1. How is the Native Stack Navigator implemented, does it essentially create multiple View Controllers between routes?
2. If it does, do I have access to those View Controllers? (That wouldn’t be the biggest problem, since I can use parentResponder in a View to go up the View tree anyway)
3. Do you have any advice I should look out for?

If it does not create multiple View Controllers, then I guess there would be no way of getting the Hero library to work, since that requires navigation between multiple View Controllers.

Thanks!

[nandorojo]

I appreciate the detailed and quick response. I’m pretty deep into using React Navigation (and managed Expo), so this solution unfortunately won’t work for me.

The video on your Twitter looks awesome though, congrats! Glad you were able to solve it for your app.

For now, I’ll keep trying to figure this one out. I’d love to use it with native stack if possible.

[hirbod]

I donated $200 😛

Here is the branch with the current progress: https://github.com/IjzerenHein/react-navigation-shared-element/tree/native-stack

Quote from @IjzerenHein : “As far as progress, I’ve made a start but have not yet been able to spend any more time on it as I’m in the process of moving and also due to other work obligations. I’m expecting to resume work within the next 2 weeks.”

This was a week ago, so he hopefully will continue in a week or so.