React-native-navigation: [V2] Making sticky top bar transition

[ignatevdev]

Issue Description

Hi. I'm trying to implement a custom transition, where my first screen doesn't have a TopBar, but the second one does, and instead of fading new TopBar on top of the next screen I want the TopBar to slide from the right with the new screen's ContentView.

However, I haven't found any topBar configuration combination which would give such effect natively, and when I try to implement this with a custom transition animation, several problems appear:

1) No matter which animation duration I specify, the animation is slow as hell
2) Even if I will figure out how to make the duration to work, is there a predefined config of a native iOS transition which is applied on the next screen's ContentView?
3) Random white space appears on the place where the new TopBar should be
4) Pop animation doesn't seem to work even though it's specified

This is how the transition looks like now and technically, with the right timing and ease it would animate the push event just as I want it to

Steps to Reproduce / Code Snippets / Screenshots

The code I use to push the new screen with a custom animation:

Navigation.push(this.props.componentId, {
    component: {
        name: RegistrationPersonType,
        options: {
            animations: {
                push: {
                    topBar: {
                        x: {
                            from: 500,
                            to: 0,
                            duration: 350
                        }
                    },
                    content: {
                        x: {
                            from: 500,
                            to: 0,
                            duration: 350
                        }
                    }
                },
                pop: {
                    topBar: {
                        x: {
                            from: 0,
                            to: 500,
                            duration: 350
                        }
                    },
                    content: {
                        x: {
                            from: 0,
                            to: 500,
                            duration: 350
                        }
                    }
                }
            }
        }
    }
});

---

Environment

• React Native Navigation version: 2.0.2430
• React Native version: 0.56.0
• Platform: iOS 11.4
• Device info: Simulator 10.0 (iPhone 6), Debug

[thame]

I've been working on something similar so perhaps my selected settings will help. I would definitely appreciate some feedback from the developers as well because my solution requires some other styling hacks to make it look right.

Try applying the following in your setDefaultOptions:

topBar: {
    visible: false,
    drawBehind: true,
    transparent: true,
    translucent: true,
    background: { color: '#ffffff' }
}

And for your pushed screen:

topBar: {
    visible: true,
    background: { color: 'transparent' },
    elevation: 0,
    buttonColor: '#ffffff',
}

I'm using a transparent topBar background and setting the background color of an underlying view because my topBar changes colors so that part may not be necessary.

Good luck!

[ignatevdev]

Hmm, that's an interesting hack, thanks!
However, there should be a way to implement this without any struggle, as v1 was handling it natively when you push from a screen with navBarHidden: true property.

I've made an example of how this works in v1, have a look:

[thame]

I started using RNN V2 so I'm not sure what V1 was like. It's been a bit of trial-and-error but I'm mostly getting it!

[ignatevdev]

@guyca, could you or anyone from the dev team comment this one?
This is a real drawback from moving to v2 and I believe that if v1 was supporting this case, v2 should too.

Thanks in advance.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you believe the issue is still relevant, please test on the latest version and report back. Thank you for your contributions.

[stale[bot]]

The issue has been closed for inactivity.

[kamlesh71]

Is there any way to add a transition for android?

[FRizzonelli]

@NSLS How did you get your topBar animated? I'm currently not able to make the topBar animating on Android in any way.
Also the topbar flickers during the transition, which is indeed horrible to see :(

My snippet

Navigation.push(this.props.componentId, {
              component: {
                name: ScreenKeys.loginScreen,
                options: {
                  ...navigatorStandardOptions({ title: 'Test' }),
                  // Animating on iOS right now - check https://github.com/wix/react-native-navigation/pull/4429
                  animations: {
                    push: {
                      waitForRender: true,
                      content: {
                        x: {
                          from: 500,
                          to: 0,
                          duration: 150
                        }
                      },
                      topBar: {
                        waitForRender: true,
                        x: {
                          from: 500,
                          to: 0,
                          duration: 150,
                          startDelay: 1000
                        }
                      }
                    }
                  }
                }
              }
            });