Overriding vertical transitions not working

[mastermoo]

Version

Tell us which versions you are using:

• react-native-router-flux v3.32.0
• react-native v0.30.0

Expected behaviour

Actual behaviour

Steps to reproduce

Router with 2 Scenes:

<Router getSceneStyle={getSceneStyle} navigationBarStyle={styles.navbarStyle}>
  <Scene key="tab3" title="Launch" initial>
    <Scene key="launch" component={Launch} title="Launch" initial />
    <Scene key="register" component={Register} title="Register" />
  </Scene>

  <Scene key="login" direction="vertical">
    <Scene
      direction="vertical"
      key="loginModal"
      component={Login}
      title="Login"
      leftTitle="Cancel"
      onLeft={Actions.pop}
    />
  </Scene>
</Router>

getSceneStyle looks like this:

const getSceneStyle = (props, computedProps) => {
  const idx = props.scene.index;
  const { direction } = props.scene.navigationState;
  const inputRange = [idx - 1, idx, idx + 1];

  const style = {
    flex: 1,
    backgroundColor: '#fff',
    opacity: 1,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 0 },
    shadowRadius: 10,
  };

  if (direction == 'vertical') {
    const height = props.layout.initHeight;
    const translateY = props.position.interpolate({
      inputRange,
      outputRange: [height, 0, 0],
    });

    style.transform = [
      { scale: 1 },
      { translateY },
    ];

    style.shadowOpacity = 0;

    return style;
  }

  // direction is horizontal

  const width = props.layout.initWidth;
  const translateX = props.position.interpolate({
    inputRange,
    outputRange: [width, 0, -width/4],
  });

  style.transform = [
    { scale: 1 },
    { translateX },
  ];

  style.shadowOpacity = props.position.interpolate({
    inputRange: [idx - 0.85, idx, idx + 1],
    outputRange: [0.0, 0.3, 0.0]
  });

  if (computedProps.isActive) {
    style.marginTop = computedProps.hideNavBar ? 0 : 64;
  }

  return style;
};

[YuriyUlantsev]

@mastermoo Add in this code

const preVerticalDirection = props.scenes[1] ? props.scenes[1].navigationState.direction === "vertical" : null;

if (preVerticalDirection) {
    const scale = props.position.interpolate({
      inputRange,
      outputRange: [1, 1, 0.98],
    });
    style.transform = [{scale}];
    style.opacity = props.position.interpolate({
      inputRange,
      outputRange: [1, 1, 0.3],
    });
    return style;
  }