React-native-navigation: [V2] setRoot Fade Animation?

[luskin]

Issue Description

In V1 we could specify a nice fade animation when replacing the root screen, I can't seem to find any documentation anywhere allowing us to do the same with V2. Can anyone advise how to gracefully fade on setRoot?

---

Environment

• React Native Navigation version: 2.0.2394
• React Native version: 0.55
• Platform(s) (iOS, Android, or both?): Both
• Device info (Simulator/Device? OS version? Debug/Release?):Device - Samsung S7

[TylerNRobertson]

Would really like to know how this is done. I remember how easy it was to implement in V1. You could just assign a prop and it just worked. The documentation on how animations work now in V2 is very obscure and not well written for people to actually use the libraries animation API effectively. As of now I personally haven't found/figured out how to implement the same effect in V2. Hopefully, this will be explained soon by the contributors to this project and properly outlined in the documentation.

[zirtuedeveloper]

@guyca please tell us example code for v2 fade in and fade out

[damathryx]

same here, is this feature ready?

[guyca]

Hey guys, modifying the setRoot animations is now supported. You can set it in default options before calling setRoot or declare the desired animations in the root options.
Note that this is implemented only on Android.

Navigation.setDefaultOptions({
  animations: {
    setRoot: {
      alpha: {
        from: 0,
        to: 1,
        duration: 500
      }
    }
});

[rishabhpoddar]

Is there still no way to do this for iOS yet?

[stokesbga]

Yeah - would love to hear where this sits on roadmap. Manual solution isn't very sexy

[guyca]

@yogevbd Is setting root animation not possible with the current animations api?

[yogevbd]

@guyca It is possible to implement it with the current api. I will implement it soon

[dmkmedina]

A simple crossdisolve on setRoot fulfilled our needs here. It doesn't cover all supported animations though.

[kyle-ssg]

I've got some initial app onboarding that resets to a tab based layout, ideally I'd like the animation to be no different from a push/if I'd used setStackRoot - I've had this usecase in quite a few apps. I feel like setRoot is the most sensible approach to this, only other way I can think of is as using a modal without animation and closing on finish which just seems wrong.

If all you want is a custom animation:

- (void)setRoot:(NSDictionary*)layout completion:(RNNTransitionCompletionBlock)completion {
    [self assertReady];

    [_modalManager dismissAllModalsAnimated:NO];
    [_store removeAllComponentsFromWindow:_mainWindow];

    UIViewController *vc = [_controllerFactory createLayout:layout[@"root"] saveToStore:_store];

    if (_mainWindow.rootViewController) {
        UIView *snapShot = [_mainWindow snapshotViewAfterScreenUpdates:YES];
        [vc.view addSubview:snapShot];
        _mainWindow.rootViewController = vc;
        [_eventEmitter sendOnNavigationCommandCompletion:setRoot params:@{@"layout": layout}];
        completion();
        [UIView animateWithDuration:0.3 animations:^{
            snapShot.layer.opacity = 0;
        } completion:^(BOOL finished) {
            [snapShot removeFromSuperview];
        }];
    } else {
        _mainWindow.rootViewController = vc;
        [_eventEmitter sendOnNavigationCommandCompletion:setRoot params:@{@"layout": layout}];
        completion();
    }
}

I have a feeling this might not be trivial to transition like setStackRoot, because this approach would need a component Id to transition from.

Edit: You can actually get around this by having all of your onboarding screens use bottomTabs: {visible: false} and initialising your initial tabs stack with that screen then use resetStackRoot when done.

This is just a lot more painful for a couple reasons:
1: If you want to reset to your initial screen (e.g. logout), you need to make sure you're on the correct tab first which means the user sees the tab switch before the route is reset.
2: You have to manage whether a lot of your screens use bottomTabs: {visible: false}

Had to do something like this:

 logout() {
        Navigation.mergeOptions('TAB_ID', {
            bottomTabs: {
                currentTabIndex: 0,
            },
        });
        setTimeout(() => { // defer resetting the stack root to when the tab is switched
            Navigation.setStackRoot(global.dashboardId, routes.homeScreen());
        });
    },

[AbanoubNassem]

any news about this?

[TylerNRobertson]

This is still not working. You are unable to add setRoot animations on IOS.

Navigation.setDefaultOptions({
  animations: {
      setRoot: {
        alpha: {
          from: 0,
          to: 1,
          duration: 400,
          startDelay: 100,
          interpolation: 'accelerate',
        },
      },
    },
})

This does no animation at all when transitioning.

[harveyconnor]

Any news on this working in iOS? @guyca

[abury]

We're after this as well. Doesn't seem to be any solution to this at the moment, which is really surprising.

[ghost]

@guyca yes it is working fine On android.

[luskin]

over a year since I originally posted this, any update?

[TylerNRobertson]

@luskin I agree it would be nice to get an update.

[cspicuzza]

Will setRoot fade animations be supported by iOS in RNN 5.0?

[ninjz]

I was able to get a fade-in animation when calling setRoot by modifying the setRoot function inside of RNNCommandsHandler.m doing this:

- (void)setRoot:(NSDictionary*)layout commandId:(NSString*)commandId completion:(RNNTransitionCompletionBlock)completion {
    [self assertReady];
    RNNAssertMainQueue();

    if (@available(iOS 9, *)) {
        if(_controllerFactory.defaultOptions.layout.direction.hasValue) {
            if ([_controllerFactory.defaultOptions.layout.direction.get isEqualToString:@"rtl"]) {
                [[RCTI18nUtil sharedInstance] allowRTL:YES];
                [[RCTI18nUtil sharedInstance] forceRTL:YES];
                [[UIView appearance] setSemanticContentAttribute:UISemanticContentAttributeForceRightToLeft];
                [[UINavigationBar appearance] setSemanticContentAttribute:UISemanticContentAttributeForceRightToLeft];
            } else {
                [[RCTI18nUtil sharedInstance] allowRTL:NO];
                [[RCTI18nUtil sharedInstance] forceRTL:NO];
                [[UIView appearance] setSemanticContentAttribute:UISemanticContentAttributeForceLeftToRight];
                [[UINavigationBar appearance] setSemanticContentAttribute:UISemanticContentAttributeForceLeftToRight];
            }
        }
    }

    [_modalManager dismissAllModalsAnimated:NO completion:nil];

    UIViewController *vc = [_controllerFactory createLayout:layout[@"root"]];
    vc.waitForRender = [vc.resolveOptionsWithDefault.animations.setRoot.waitForRender getWithDefaultValue:NO];

    /** START: Code Change */
    [vc setReactViewReadyCallback:^{
        _mainWindow.rootViewController = vc;
        [vc.view setNeedsDisplay];
        [UIView transitionWithView:_mainWindow
                          duration:0.5
                           options:UIViewAnimationOptionTransitionCrossDissolve
                        animations:^{
                            [vc.view.layer displayIfNeeded];
                        }
                        completion:nil];
        [_eventEmitter sendOnNavigationCommandCompletion:setRoot commandId:commandId params:@{@"layout": layout}];
        completion();
    }];
    /** END: Code Change */

    [vc render];
}

But extending this library to support this would be nice to have.

[nenjamin2405]

Many thanks for your code snippet @ninjz. It feels so good when it has fade animation for setRoot. Any plan to integrate @ninjz 's snippet to core react-native-navigation @guyca?