Support for react-native-screen 's createNativeStackNavigator

[hirbod]

Hi,

would be awesome if this lib would support

import createNativeStackNavigator from 'react-native-screens/native-stack';

since the performance of native-stack is awesome and absolutely no comparison to the usual createStackNavigator

[IjzerenHein]

Nice, that would indeed be very cool. I'm not sure it's possible though as that navigator needs to expose the transition progress as an Animated Value.

Would be great if someone could do some research on this on post the findings here.

[hirbod]

Well I think we need to ask for support @kmagiera or @satya164 since they are building that stuff on the new navigation v5 and react-native-screens

[nandorojo]

This would be great!

[Jarred-Sumner]

https://github.com/kmagiera/react-native-screens/issues/317

[bogdansoare]

Would be awesome to have this implemented

[hirbod]

Instead of createNativeStackNavigator it should support react-native-screens/native-stack (which was moved from react-navigation to react-native-screens).

Its still a pretty similar approach but a totally different API. https://github.com/software-mansion/react-native-screens/tree/master/native-stack

Sad that its "most likely not to be supported" (I've read this on your readme), since the native-stack performance is outplaying the JS navigation.

[mrousavy]

I'm not sure if it's the fault of the JS navigation library, a React-Native bug, a react-navigation-shared-element bug or an Image rendering bug, but on bigger iPhones (such as iPhone X, iPhone 11, etc.) the animation is really laggy. (noticeable micro-stuttering)

Demo in slow-mo:

iPhone 8, very smooth iPhone 11 Pro, very stuttery

Hopefully we will get an update soon at https://github.com/software-mansion/react-native-screens/issues/317 👀

[mrousavy]

The wix/react-native-navigation library supports shared element transitions aswell, I haven't looked into the code much but it looks like their approach is to create a transitions queue which will get worked on batch-wise. They're searching the UIManager for a given View by it's ID (see: this) and then create the animations (text interpolation, rectangle scaling, ...) here. Isn't react-native-screens/native-stack essentially doing the same? Here's the Stack Transition Delegate

[mrousavy]

Could https://github.com/software-mansion/react-native-screens/pull/499 be of any help?

[Irshadmirza]

I have a problem when Im going from home screen to details screen after press back image get stucked in the home screen, and if i press home button on bottom tab navigator its not going back. can anyone please help me out? thanks in advance

[numandev1]

@IjzerenHein Any updates on this? 👀

[mrousavy]

SWM is working on exposing the transition progress, which is exactly what we need for the Shared Element Transitions: https://github.com/software-mansion/react-native-screens/pull/890

I don't know if they expose it via a default RCTEventEmitter (JS Bridge) or if it's going to be sync on the UI thread (REA v2) though

[numandev1]

@mrousavy it is the kind of listener that will give us a callback of every frame. onTransitionProgress I think we have to add support for createSharedElementStackNavigator after software-mansion/react-native-screens#890 merge

[mrousavy]

so that PR was merged and I've DM'd Hein to ask him if he wanted any help in implementing the native stack support :)

[hirbod]

My thread has 21 likes. Let's create a Moneypool and each of us throws 100 € in it as a motivation for @IjzerenHein to support native-stack!

[haibert]

@Hirbod I agree with this! I’m sure many people would be willing to support since it’s such a coveted feature.

Our company is going to make a bigger contribution to Hein already to get this done and I have spoken with Hein.

I was hoping we can gather people with a following on Twitter like @nandorojo @mrousavy to tweet out a funding link and see if we can get further “crowd funding” for such an awesome cause. I’m sure expo will give us a retweet to increase exposure.

[nandorojo]

See https://twitter.com/FernandoTheRojo/status/1430966978135592973

[nandorojo]

I'd gladly donate $100 to make this feature happen. @IjzerenHein does GitHub sponsors work?

[hirbod]

The reason why I started the pool is that sponsors are recurring payments. If trusting me is an issue I am open to anybody with better reputation to take over.

Since I can't use this library without native stack support right now, it's mandatory for me to have that support first.

[nandorojo]

Since I can't use this library without native stack support right now, it's mandatory for me to have that support first.

Same here.

The reason why I started the pool is that sponsors are recurring payments.

One-time payments are allowed on GitHub, but @IjzerenHein would need to add it as an option.

Let’s just wait for Hein to return from his vacation, and he can tell us what the best way to pay him would be

[haibert]

Our company is willing to do a 700 dollar one time payment so far. Hopefully with the crowd funding we can get to a good point. But Fernando's right lets see what Hein decides at the end of the day.

[IjzerenHein]

Hello everyone! Thanks for all the willingness to sponsor and the encouragement regarding the native-stack implementation. It's really heart-warming to see ❤️
I've created an official money-pool for collecting donations to make this is reality. Love, Hein https://paypal.me/pools/c/8Cyt3ED5wV

[nandorojo]

$100 sent on behalf of beatgig.com! Could not be more excited for this feature.

I'll gladly sponsor more for web support as well after native stack. Thank you @IjzerenHein!

[hirbod]

$100 sent! Web support would be huge aswell, but afaik there is already some decent web support irc. I removed my Moneypool!

[IjzerenHein]

Thanks so much you guys!

[haibert]

Thank you for doing the hard work! If this ends up being possible (fingers crossed) The question we are all dying to get answered is would you be willing to implement JSI with the help of @mrousavy ? This would make the library very future proof and guarantee amazing performance <3

[hirbod]

JSI + Web would be huge!

[mrousavy]

There's no place where it makes sense to directly use JSI for this library - it will automatically use JSI when the TurboModules architecture will roll out to community modules (and as we've learned from my Talk at RNEU, TurboModules use JSI under the hood).

However, if this library uses Reanimated v2 Worklets for synchronous measure and animates fully on the UI Thread (which it has to do when using the native-stack API if you've seen the PR from react-native-screens), it will be comparable to a native app's performance/smoothness and implicitly uses JSI since Reanimated is built with JSI

I can help with the reanimated/native-stack API, but I think @IjzerenHein knows his stuff at that part too 😄

[nandorojo]

@mrousavy thanks for the update here.

And we’ve already raised $1k! @IjzerenHein do you think this is enough to kickstart the PR?

If you’re coming across this comment, please consider adding a donation: https://paypal.me/pools/c/8Cyt3ED5wV

[haibert]

@mrousavy Thank you so much for the clarification. That is VERY exciting.

[IjzerenHein]

Thank you guys and @haibert especially for the generous donation! 🧡

As for JSI, @mrousavy already explained it perfectly. There will be virtually no gain by using JSI in this library. This is because react-native-shared-element was already designed to have as little passes over the bridge as possible. It basically collects view-ids in JS and then sends that to native which takes care of all the rest. Also I don't think JSI is quite ready for mainstream and react-native-shared-element should also support older react-native versions.

[IjzerenHein]

I can help with the reanimated/native-stack API, but I think @IjzerenHein knows his stuff at that part too

Thanks, I'll let you know if I need any help @mrousavy 😃

[IjzerenHein]

JSI + Web would be huge!

Yeah Web is definitely also very interesting. I will continue with that after native-stack

[nandorojo]

That's awesome to hear!

[IjzerenHein]

Hey guys, I've started working on the native-stack implementation, you can track progress here: https://github.com/IjzerenHein/react-navigation-shared-element/tree/native-stack

[IjzerenHein]

Nice, support for tracking progress has now landed officially in react-native-screens https://github.com/software-mansion/react-native-screens/releases/tag/3.7.0 https://twitter.com/swmansion/status/1435976788782501891

[nandorojo]

Huge!

[haibert]

My excitement is through the roof! The timing for all of this could not have been better lol, the stars aligned.

[hirbod]

I would like to call on everyone again to make a small contribution to the funding. Not everyone can or needs to contribute large sums, but so far only 12 people have participated in this funding, of which the largest contribution comes from SimplyRem.

I love the open source community, but the model really only ever works as long as everything is free. It's tedious. Development usually takes a lot of free time and doesn't fund the developer's life. I've increased my contribution by another $100, this time in the name of my company nightstomp.

I hope one or two others take my post as motivation to contribute a little too, especially if you make money from open source yourself.

P.S: I haven't used RNSE in any project, so this should not be an excuse not to fund a feature you really like! Thanks to all contributors so far!

[haibert]

Unfortunately SimplyRem cant send anymore right now because we are trying to get some other issues sorted out in our app through some bright people that we will compensate. We should tweet the link some more to get peoples eyes on it once again also.

[hirbod]

@haibert you guys have contributed enough imho :). My post was for all those folks that haven't contributed yet but consuming this library.

[IjzerenHein]

Thanks for all the contributions everyone! The react-navigation Open Collective has also agreed to donate $500 to the cause ❤️

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. Cheers

[hirbod]

Nice! So we're 15$ short :D. I have high hopes someone will fill this gap soon ;)

[davesimtech]

I was just wondering if transitions on gestures (e.g. swipe back) would be something that's possible with native stack compared to the js stack?

[haibert]

@IjzerenHein @davesimtech this would be absolutely the most useful thing! Having to disable gestures from the navigation and implementing a pan gesture handler becomes a pain when the content of the given page has scrollables.. :/ Do you think its possible @IjzerenHein ?

[IjzerenHein]

Hey guys, the money-pool has been closed and in total $2000+ has been collected. I would like to thank everyone who contributed and especially @haibert and the react-navigation Open Collective for their generous contributions. Many thanks!

I hope to find some time soon to continue work on this. I'm currently working on 3 projects and I don't have any spare time atm. I expect to have some time next month and continue work on this.

best regards, Hein

[IjzerenHein]

@IjzerenHein @davesimtech this would be absolutely the most useful thing! Having to disable gestures from the navigation and implementing a pan gesture handler becomes a pain when the content of the given page has scrollables.. :/ Do you think its possible @IjzerenHein ?

Well that will depend on the lifecycle events that are emitted by the stack navigator. If it emits start/stop events and updates the animated-value, then theoretically it should work

[haibert]

@IjzerenHein @davesimtech this would be absolutely the most useful thing! Having to disable gestures from the navigation and implementing a pan gesture handler becomes a pain when the content of the given page has scrollables.. :/ Do you think its possible @IjzerenHein ?

Well that will depend on the lifecycle events that are emitted by the stack navigator. If it emits start/stop events and updates the animated-value, then theoretically it should work

I see, if you make it happen it would be absolutely amazing ❤️ maybe with a prop, animateOnGoBack={true} which can be added to the stack or screen options? Which ever one makes sense.. it would probably be the default behavior everyone wants from this amazing library.

[hirbod]

Hi @IjzerenHein,

could you please provide some insights and transparency on the development? Everything started kinda cool and motivated but after the 8th of September, nothing new happened. First it has been 2 weeks, then there was no spare time at all and you wanted to invest some time this month but nothing has happened and you’re remaining silent on the status.

I understand that you have 3 other projects running but things haven’t sound like that when we’ve been collecting.

I’ve donated 200$ into a library I can’t use in its current state and would kindly ask to see if there is a realistic ETA. I am worried that we will miss out Expo SDK 44, which would cause another 3 months of waiting time for us Expo users.

I hope you don’t get me wrong!

[IjzerenHein]

Hey guys, sorry for the long waits but I have resumed development.

I've also put up a Sponsors section in the readme, but I was not able to locate everyone who donated. https://github.com/IjzerenHein/react-navigation-shared-element#sponsors For those who donated and are not in the list yet, please let me know what your GitHub user-account is so I can add you.

@Hirbod

I’ve donated 200$ into a library I can’t use in its current state and would kindly ask to see if there is a realistic ETA. I am worried that we will miss out Expo SDK 44, which would cause another 3 months of waiting time for us Expo users.

You're assuming that there are native changes needed. This might be needed, but for now I have no reason to believe that this is the case though. All work done so far is pure JavaScript and can be updated anytime.