Would like to be able to animate the Switches... at least a fade.
Agreed, using this to distinguish between auth/unauthed and the experience is jarring.
Agree with Jackson - in my experience it is quite typical to change between Auth/App screens using a slide-up animation for the Auth flow, to communicate that it is a side-effect concern to main use of the app, and the user needs to 'establish a session' before continuing.
Agreed, a fade is much needed. A nice way of doing it would be a fade through colour!
The navigation event could mount a full screen component with a specified background colour below the initial screen, then fade the initial screen out and unmount it, then mount the target screen/stack and fade out and unmount the intermediary layer.
This way, by setting the background colour of all 3 the same, a clean fade out/in animation could be achieved without the content of the two views blending and overlapping during the animation.
From my perspective, the ideal animation would be the login screen sliding down from view like a modal.
need it very much, without animation feels very weird.
Much needed. The UI and UX just seems... eh without it.
Animations are very welcome, brings a good experience to the user. If we could put our own animations would be quite useful too, and some pre-defined.
if someone wants to submit a pull request for this it'd be welcome! please open a RFC first with details on your approach https://github.com/react-navigation/rfcs
I also need the animation with SwitchNavigator :D
The lack of animation here is basically a non-starter for any app that has a sign-up/login flow. Being able to separate auth flows from app flows is a _great_ feature of react-navigation, however the abrupt transition from sign-up completion to the application screen is jarring.
Aggreed, the animation between login screens and other sceens is much needed. And the animation should be configurable, with default/builtin animation provided.
Agreed, makes SwitchNavigator very unappealing to use.
Totally agree with this.
Is there any workaround for this issue ?
It's great having SwitchNavigator, but the transition is very jarring. It'd be really nice to have an animation between views.
The purpose of this navigator is to only render one screen at a time so animating (ie, keeping the screen that is loosing focus mounted) is not possible.
What kind of animation are you looking for exactly? for side animations you could try tabnavigator without tabs, and otherwise stacknavigator?
@Sébastien Lorber: I'm using CreateSwitchNavigator to navigate from a login screen to a home screen. Natively I would do this with a modal transition that pushes the new view up from the bottom and then clears the ability to go back. The trouble with CreateStackNavigator is that I wasn't able to find a way to clear navigation history and keep the modal animation.
@Matthew Reetz: i agree with this and i imagine its covers 99% of the use cases for CreateSwitchNavigator
I think this FR is the same as here https://react-navigation.canny.io/feature-requests/p/switchnavigator-animate-between-screens
The question here is: would a developer ever want to transition from one screen to another without any animation? Since the answer to that is no ( because it doesnt look native and you're usually trying to showcase that your RN app is close to native ) then people will need to find ways around other navigator methods to achieve what they want which is really to remove the ability to go back to the authentication flow - which renders createSwitchNavigator obsolete -
For anyone looking for a solution right now, I've found ( FluidTransitions ) https://github.com/fram-x/FluidTransitions to be a great drop-in replacement for SwitchNavigator.
@Cameron Ellis: can you show us a demo?
This must be an out of the box feature, because the UX generated is a bit disappointing when a users for serious app built with the library just go do an abruptly change form the login screen to the main app.
Yes please, this is much needed.
I would love to see this!
we're working on a library called react-navigation-transitioner (https://github.com/react-navigation/react-navigation-transitioner) that will be a good fit for this. see more info at https://www.youtube.com/watch?v=1LKqGx3z0W4. until then you can implement this on your own if you like by writing your own navigator
Inspired by Brent's react-navigation-transitioner I created a SwitchNavigatorTransitioner, with an initial FadeTransition. This allows to out of the box have the cross-fading effect for the Switches, but also to create your own transitions. The package is published in npm as react-navigation-switch-transitioner (https://www.npmjs.com/package/react-navigation-switch-transitioner) and the code is on GitHub: https://github.com/elyalvarado/react-navigation-switch-transitioner
@Ely Alvarado: nice one! unimportant fact but worth mentioning - Eric Vicenti built react-navigation-transitioner :)
I think its a good idea!Strongly recommend
Any planned time ?
100% required... not exactly getting the native experience without an animated auth flow - it's more like a website.