direction='vertical' doesn't work?

[TalkTek]

Version

Tell us which versions you are using:

• react-native-router-flux v4.0.0-beta.17
• react-native v0.44.0

Expected behaviour

pop out the screen from bottom to top

Actual behaviour

pop out the screen from left to right

I have checked breaking news and example

but it seems direction='vertical' is not active

<Router createReducer={reducerCreate} tintColor='white'>
  <Scene overlay>
    <Scene
       key='popOutBar'
       component={PopOutBar}
    />
    <Scene key='modal' modal hideNavBar initial>
      <Scene  key='root'  hideNavBar hideTabBar initial>
        <Scene key='launch' component={Launch} initial hideNavBar hideTabBar />
        <Scene key='play' direction='vertical'>
          <Scene key='audio' component={PlayAudioScreen} />
        </Scene>
        <Scene key='login' component={Login} hideNavBar />
        ...

Would be grateful if someone can help me out on this

[aksonov]

It is breaking change - you have to use 'modal' prop for such animation (as container prop)

[TalkTek]

thanks for the reply.
I added the modal prop into my root Scene, like this

<Router createReducer={reducerCreate} tintColor='white'>
  <Scene overlay>
    <Scene
       key='popOutBar'
       component={PopOutBar}
    />
    <Scene key='modal' hideNavBar initial>
      <Scene  key='root'  hideNavBar hideTabBar initial modal> // <-----here
        <Scene key='launch' component={Launch} initial hideNavBar hideTabBar />
        <Scene key='play' direction='vertical'>
          <Scene key='audio' component={PlayAudioScreen} />
        </Scene>
        <Scene key='login' component={Login} hideNavBar />
        ...

I noticed that every screen coming out at bottom, but that is not I want.
I just want one screen popped out at the bottom, not every screen.
so I tried another case, like this

<Router createReducer={reducerCreate} tintColor='white'>
  <Scene overlay>
    <Scene
       key='popOutBar'
       component={PopOutBar}
    />
    <Scene key='modal' modal hideNavBar initial>
      <Scene  key='root'  hideNavBar hideTabBar initial>
        <Scene key='launch' component={Launch} initial hideNavBar hideTabBar />
        <Scene key='play' direction='vertical' modal> // <--------here
          <Scene key='audio' component={PlayAudioScreen} /> // <----the only screen that I hope it can pop out at bottom 
        </Scene>                                                                         
        <Scene key='login' component={Login} hideNavBar />
        ...

It doesn't work either.
Could you please help me?

[varun-raj]

Where is the documentation for breaking change?

[aksonov]

https://github.com/aksonov/react-native-router-flux/blob/master/docs/MIGRATION.md