Support for react-native-screen 's createNativeStackNavigator

[ijzerenhein]

Support for react-native-screen 's createNativeStackNavigator

[IjzerenHein]

Dear fellow coders,

All good things come to an end. And I have decided to stop working on shared-element as it no longer fits into my life and I lack sufficient time, energy and motivation.

One of the most important reasons for that is that I haven't used shared-element myself in the last 2 years. And maintaining Open Source libs is something you do mostly because of the love and utility you have for it yourself. As I've grown older the energy to spend time on my OS libs (either in my spare time or between projects) has decreased, to the point that I get very little satisfaction from it. I'm content with how the native building blocks turned out and it's an interesting solution to a rather tricky problem. The react-navigation binding has however been a struggle from the start. When ReactNavigation@4 support was completed, ReactNavigation@5 was released, and in the beginning things were still changing and breaking at a regular pace. Supporting, testing and making sure the code-base is maintainable requires a far greater dedication than I am willing to put into it, for something I don't use myself.

Looking back I should probably not have accepted the donations/funds to work on this project/feature. But it felt like such great energy and love for the project that I wanted to give it a go. Circumstances have however not been favourable and breaking up with my GF, moving to a new place and being an emotional wreck at times have not helped. Some good progress has however been made but it's not there yet. The testing app has been extended to showcase all the tests with the native navigator. The whole lifecycle mechanism has been reworked to capture the start of the navigation faster. Temporary patches have been applied to react-navigation to fix certain issues. The current state is that it somewhat works, but there is an issue with determining the position of the target element. Which seems somehow related to the native code performing its measurement sooner in combination with react-native-screens. This requires deeper analysis and debugging in order to understand the problem and hopefully fix it.

Which brings me to this last paragraph. I would love to see that shared-element continues to exist, as it solves a problem within the react-native ecosystem. Functionally it's probably not essential, but it's one of those things that brings shine to an app, and takes the attention of the user on a journey to make for a better UI experience. I'm therefore looking for a new home or maintainer for both react-native-shared-element and react-navigation-shared-element. And I will make $1000 of the donation funds available to the person or company willing to take this on (and continue with native-stack support). Please reach out to me personally if you want to take this over or have ideas or suggestions for a new home.

peace out,
Hein

[Jarred-Sumner]

software-mansion/react-native-screens#317

[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]

Status update (as I send to a stakeholder by email)

I have not not been able to work on it this month. I injured my back earlier in Januari, but luckily everyone is fine again.
And at the moment I am putting all my time into reaching a deadline for a client, and another client also requires attention for their app launch.

The current status is that the JS part is about finished in terms of functionality. I still need to create PRs in react-navigation to make some changes there. As for performance and timing. That is the biggest problem. I've sped up the time it requires react-navigation-shared-element to trigger the transition, in order to have a smooth transition, but that has revealed new problems. For some reason, the layout measurement is incorrect when snapshotting the views earlier. I'm pretty sure it has something to do with how RN does layouting or something with react-native-screens, but that requires further investigating and deeper probing. It's a tough problem for which I really need to dedicate some time to understand (and hopefully fix).

[haibert]

@IjzerenHein

Really sorry to hear about your recent struggles. You did your best. Thank you for the progress that you did provide and over all mental health and life balance is more important than anything else, and Im glad you chose a path that will give you more of that. Wish you the best Hein!

[MauriceNino]

@hirbod I don't think you understand what a donation is. You willingly supported an open source creator for a library that he has already put great efforts in to, in the hopes that he is then motivated to implement a feature you would like to see. But that is not how Open Source works. You did not pay for a product, and you are not entitled to any return on that money.

If you absolutely need this feature, create it. Fork the library and create your own version, or create a pull request and add the features you want.

If @IjzerenHein gives you a refund or not is his decision, but I would definitely not. He is putting his clients (who probably paid for a certain performance/product) and his health first, and an open source project second. I don't think there is anything wrong with that.

[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

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

[Johan-dutoit]

All the best to you @IjzerenHein! Mental health trumps everything.

Is this something the react-navigation team or SWM team could bring into their space?
Totally get it's a hard ask and both do so much to help the RN community already!

cc @satya164 & @kmagiera

[nandorojo]

@IjzerenHein - wishing you the best. The open source path can be tough. Thanks for everything you contributed. I hope someone else is able to continue your great work.

[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]

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

[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

[mrousavy]

Could software-mansion/react-native-screens#499 be of any help?

[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]

@IjzerenHein it's been 6 months now. Do you really think that's ok how you treat your sponsors?
You can't accuse us of being impatient or not understanding your situation, but now I've reached the point where I feel really screwed.

I have brought the whole thing with haibert to work and it comes absolutely nothing more from you.

I'll wait until the end of the month, otherwise I expect a refund.
Exactly this kind of stuff is the reason for people developing trust issues and being extremely careful funding projects or developers.

[mrousavy]

I don't want to take any side in this argument here, but also note that Hein is a very good developer and $200 pays for about 1 or 2 hours of development in this business. That's not a lot of time, we can't expect a car to be built for $200 either.

[brentvatne]

i know @IjzerenHein personally and can vouch that if he had the time to work on this then he would.

it's important to have empathy and recognize that sometimes things don't go to plan. i understand that some folks are very interested in this feature, but please remember that we are all humans here trying to do what we think is best. feel free to reach out to me if you have any concerns.

[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]

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

[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!

[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 😄

[hirbod]

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

[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

[hirbod]

JSI + Web would be huge!

[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]

JSI + Web would be huge!

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

[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!

[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!

[davesimtech]

As far as I'm aware the moneypool stated it would be used towards the development of the feature, however it was no guarantee that it could actually be achieved. I donated (although a rather small amount) fully aware of that situation with the hope it could be achieved and more out of support for the library and all of work @IjzerenHein has done, as it was described on the moneypool.

@IjzerenHein I know sometimes explaining what needs to be done actually takes more effort than actually doing the implementation. However, is there anything that we can do to help, any pointers for things I can look at?

[nandorojo]

This would be great!

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

[hirbod]

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

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

[hirbod]

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

[hirbod]

@IjzerenHein any news on the progress?

[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

[bogdansoare]

Would be awesome to have this implemented

[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 software-mansion/react-native-screens#317 👀

[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: software-mansion/react-native-screens#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

[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!

[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

[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

[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 😃

[nandorojo]

That's awesome to hear!

[nandorojo]

Huge!

[haibert]

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

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

[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]

@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]

@IjzerenHein thank you very much, these are good news!

[hirbod]

@MauriceNino I did not make a donation, I funded for this specific feature. I am not using this library, because it has this missing piece. I also came up with the idea to collect this funds FOR THIS SPECIFIC feature. Not more, not less. Do your research until you try to tell me how kickstarting/funding works.

I am sponsoring PLENTY open source projects. I am donating couple of hundreds every month on open source projects (I am changing them every month to show my appreciation to libs I am using on a regular basis). This is something totally different and I would never do a call out on them to have anything specific developed, just asking for what they have offered through github sponsor tiers.

This one is different, since I am not using it and I wanted to kickstart this specific feature. But the project progress has been stuck for couple of months now.

[MauriceNino]

@hirbod Still, you donated (or funded, you can call it however you want...) to a progress, not a product. What if the goal is unachievable? What if it would take way too much time? You can't just pay a fixed sum of money and expect that whatever you want will be done.
Sure the author may have communicated it better, but he is not obligated to complete a feature for you, unless you set up a legal contract with him (and on the moral side: pay him a fixed hourly rate).

There is also no GitHub Sponsors tier that says "You earn the right to get a feature in a set amount of time". Do your own research before telling me how to do mine.

Also, I don't give a damn what you donate to other projects and I also don't care if you use this library or not? Bringing up how generous you are doesn't prove your point, nor add anything to your argument.

[hirbod]

@mrousavy I am not saying it is much. But the whole campaign gathered 2k, thats a decent amount for a feature imho.
I am just speaking for myself, that I did not donate money, I funded for something. Thus I except some transparency and some ETAs. Its been more than 6 months now. I would rather donate that 200 bucks to an Ukrainian fund (which I also already did)

[MauriceNino]

@hirbod It is a decent amount, I'm not saying it isn't - I am just trying to tell you that you are not obligated to get anything for your money. It doesn't matter if you think it is a donation, or not.

If you think you have been wronged, try talking to GitHub about it, but I am pretty sure they will tell you more or less the same thing.

Also, please stop bringing up all your other donations, the humblebragging is just weird.

[hirbod]

@MauriceNino

Still, you donated (or funded, you can call it however you want...) to a progress, not a product.

It is a big difference if you donate or fund something.

What if the goal is unachievable?

If a goal is unachievable, then just be transparent and we can move on. I also lost money and time on kickstarter. This is basically the same: you fund for something with risks, but at least get some insights, ETAs etc. There has not been much traction on this project lately anyway. It feels like it has been frozen.

There is also no GitHub Sponsors tier that says "You earn the right to get a feature in a set amount of time"

The tiers are promises the developers make by themselves. Some do not have any, some have. I was referring to those who do pledge what you can except from a tier. This one was funded trough PayPal Moneypool anyway.

Also, I don't give a damn what you donate to other projects and I also don't care if you use this library or not? Bringing up how generous you are doesn't prove your point, nor add anything to your argument.

It is a big difference if I use this library or not. If I was a regular user of this software, I would've been quiet on the whole topic, since I have use for it and would count this in as a donation. But in its current form, it might be helpful for others, but not for me, because I am only using the native stack.

The whole reason I started this argument with you was not to prove how generous I am (which I am), but to prove that I know the difference between a donation and a funding and that I do have a lot of respect for open source software developers and I do my best to give something back. I am done arguing with you.

P.S: Don't tell me what to talk about and not and mind your own business.

[jkk]

My company donated -- no hard feelings from us. "No guarantees" was literally in the moneypool description. We actually considered doing a small up-front donation, no strings attached, and another larger donation contingent upon completion, for that exact reason. But we didn't do that, so no expectations were violated. We appreciate all the work done so far!

[hirbod]

@IjzerenHein thanks for the statement and honesty.
Through your open statement I have of course full understanding for the process and your situation. I wish you all the best for the future.

[fukemy]

@andreialecu pay 10000$ for this help

[andreialecu]

I'm not sure what that's supposed to mean, but there's a draft PR here that is supposed to implement this into react-native-screens so if you have any bounties to throw, perhaps throw them over here: software-mansion/react-native-screens#1479

[RajeshChoudhary1700]