React-native-navigation: V2 Animation Framework

[bogobogo]

Create an animation framework that allows the user to define animations in the js side.
Current proposed API:

API

Navigation.push(this.props.componentId, {
  name: 'navigation.playground.CustomTransitionDestination',
  options: {
    animations: {
      push: {
        enable: true, // Optional. Default: true
        topBar: {
          id: 'STACK_ID' // Id of the stack containing the TopBar to animate
        },
        bottomTabs: {
          id: 'BOTTOM_TABS_ID'
        },
        content: {
          y: {
            from: 0,
            to: 200,
            duration: 150,
            interpolation: 'decelerate',
            startDelay: 100
          },
          alpha: {
            from: 0,
            to: 1,
            duration: 150
          }
        }
      },
      pop: {},
      showModal: {},
      dismissModal: {}
    }
  }
})

Android

• [x] navigationOptions should be accessible through a ViewController #2440
• [x] merge animations into navigationOptions
• [x] y
• [x] x
• [x] alpha
• [x] duration
• [x] interpolation
• [x] startDelay

• [x] Animate topBar and bottomTabs

• Support custom animations for the following commands:

• [x] push #2436
• [x] pop #2437
• [x] startApp #2438

• [x] show/hide Modal #2790

• Support for default app animation style in setDefaultOptions

iOS

• [x] navigationOptions should be accessible through a ViewController #2440
• [x] merge animations into navigationOptions
• [x] y
• [x] x
• [x] alpha
• [x] duration
• [x] interpolation
• [x] startDelay

• [x] Animate topBar and bottomTabs

• Support custom animations for the following commands:

• [x] push
• [x] pop
• [x] startApp https://github.com/wix/react-native-navigation/issues/2901
• [x] showModal

• [x] dismissModal

• Support for default app animation style in setDefaultOptions

[brunolemos]

iOS too I suppose?

[kyle-ssg]

Quick question about this, I see that you can define push / pop / openModal etc animations from pushing to a page, this makes sense (especially defining a pop animation for a push).

More often than not though I could see the need to define the animation for just the screen I am transitioning to e.g always opening a modal in a certain way regardless of the screen I'm coming from:

Navigation.openModal(this.props.componentId, {
  name: 'navigation.playground.MyFadeModal',
..animationProps
})

Will this be possible too ?

[guyca]

Yes. You'll be able to define keep the default animations provided by RNN, declare default animations once for each command (using Navigation.setDefaultOptions api) and you'll also be able to override animations whenever you)

[rpmonteiro]

Is this working already? Is the API exactly as you described it above?

[guyca]

@rpmonteiro This feature is already available. You can find examples in the playground app (obviously remove the underscore from _animations)

[yusufyildirim]

I think we need for setRoot too

[chrisbenincasa]

+1 for having animations for setRoot

[guyca]

@chrisbenincasa @yusufyildirim You can customise setRoot animation in startApp animation. This will corrected soon to setRoot as expected. Sorry for the confusion.

[ebouJ]

@guyca is there a way to slide the screen from left to right instead of bottom to up in android? v2

[guyca]

@ebouJ
Sure, Animate the x value of content. I haven't tried it myself but it should work 👍
I'd like to create an animation section in the documentation, would be nice if you contributed your slide animation to that 👍 🙏

[chrisbenincasa]

@guyca Will iOS support the startApp/setRoot animation?

[GuillotJessica]

Navigation.setDefaultOptions({
    bottomTabs: {
animated: false or true
}

changed nothing, there always some kind of animation on going...

also, I've been integrating v2 for a week and v1 a few day ahead and at some point I've got a very nice animation that when tab was not selected, there was only the icon and once selected the icon has size changed and text displayed, I wonder if it has something to do with animationType i can't see no more in v2, or any other exemple i saw but can't put my finger on anymore, any clue will be very much appreciated

[chrisehlee]

@ebouJ Where you able to accommplish what you wanted (and if so please do you mind sharing your code 😉)

[Annihil]

Using v2, I wasn't able to change the android push/pop animation to something like the 'slide-horizontal' of v1

[Lube]

@Annihil could you provide a sample code? I cannot get it to work!

[iksent]

"react-native-navigation": "^2.0.2459"
"react": "16.3.1",
"react-native": "0.55.4",

Android

animations: { startApp: { // Not working y: { from: 1000, to: 0, duration: 2500, }, alpha: { from: 0, to: 1, duration: 2400, } }, push: { // It works! Push with animation from right to left content: { x: { from: 1000, to: 0, duration: 300, }, alpha: { from: 0.5, to: 1, duration: 300, } } }, pop: { // Not working content: { x: { from: 0, to: 1000, duration: 2300, }, alpha: { from: 1, to: 0.5, duration: 2300, } } }, }

[spencerkingman-niche]

Android pop animation as set like @iksent is not working for me in RNN v2.5862 but is working for me in RNN v2.620. Also setRoot (which I believe you would use instead of startApp) animation is also working for me on Android in both versions.

[guyca]

As the animation feature is already implemented, there's no need for further discussion in this issue. If anyone encounters bugs or issues, please open a new issue.