FluidTransitions
FluidTransitions copied to clipboard
fram-x
Feature: Support TabRouter in Fluid Navigation
Currently, I have a tutorial screen with a shared element between them which moves into the correct position depending on the screen with this awesome library! Currently, I have the user tap to navigate horizontally to the next screen (text comes in horizontally, shared element slides to the left). With gestures enabled, I am able to easily swipe back and the text and shared element begins to go back with the movement of my finger. I would like to also be able to do this from the other side of the navigator. Essentially, it'd be awesome to handle swiping forward into the next screen, rather than just back to the previous screen in this use case. Do you know I could approach this if it's not possible with the library right now? I don't want to look too much into other components, because I don't want to loose my shared element transition!
I can see something in the source here about inverted gestures. Would something along those lines work?
Hi @ntomallen! Thanks for your feature request, this is something I've been thinking of for a while already.
The reason for not supporting this yet is that the library is using the StackRouter which never knows the next screen before it is pushed - and when it is pushed it is animated directly and there is no way to intercept this and add a gesture.
The solution is to build a new fluid navigator based on the TabRouter where all screens and their order is known in advance. This is a bit complex and a big change for the library so I'm unsure when I'll have time for this rewrite.
I've changed the title of your issue and marked it as a feature request.
Gotcha. How does the StackRouter know how to "goBack"? Would it be possible to specify a "next" route which would always happen on the forward gesture? I'm looking forward to where this goes, I love the library!
The StackRouter has the history of pushed routes, but knows nothing of what the next route would be. The integration between FluidTransitions and React Navigation makes it a little bit hard to fix this. I think the best way to solve this would be to add support for the TabRouter instead.