title: Animate leaving screen with React Navigation
body: <p>I am developing a React Native application which uses <a href="https://reactnavigation.org/" rel="noreferrer">React Navigation</a> 
  to manage the routing between screens. </p>
  
  <p>I know reading <a href="https://reactnavigation.org/docs/en/stack-navigator.html#stacknavigatorconfig" rel="noreferrer">React Navigation documentation</a> and watching <a href="https://egghead.io/lessons/react-native-build-fine-grained-screen-transitions-with-a-custom-react-navigation-interpolator" rel="noreferrer">this video</a> on Egghead.io (highly suggested) that is possible to define custom animations for transitions between screens passing the <code>transitionConfig</code> property to a <code>StackNavigator</code>. </p>
  
  <p>For example, the following code is defining a <em>slide from left</em> animation that is basically the mirror of the iOS default push animation:</p>
  
  <pre><code>const TransitionConfig = () =&gt; ({
      screenInterpolator: ({ layout, position, scene }) =&gt; {
          const { index } = scene
          const { initWidth } = layout
  
          const translateX = position.interpolate({
              inputRange: [index - 1, index, index + 1],
              outputRange: [-initWidth, 0, 0],
          })
  
          return {
              transform: [{ translateX }],
          }
      }
  })
  
  const MyNavigator = createStackNavigator(
      {
          A: {screen: ScreenA},
          B: {screen: ScreenB},
      },
      { transitionConfig: TransitionConfig }
  )
  </code></pre>
  
  <p>Considering the code above and the fact we are navigating from screen <code>A</code> to screen <code>B</code>, the <code>screenInterpolator</code> function body is basically describing the animation the screen <code>B</code> should follow <strong>when it's going to appear</strong> (it's reverted when it disappears). In this case the code it's saying to translate the screen <code>B</code> along the X axis to achieve a <em>slide in</em> effect. </p>
  
  <p>Is it possible to also define the animation for <strong>the screen that is disappearing</strong> (screen <code>A</code> in our case)? I would like to define something like this:</p>
  
  <ul>
  <li><code>B</code> should <strong>appear</strong> sliding from left to right</li>
  <li><code>A</code> should <strong>disappear</strong> sliding from top to bottom</li>
  </ul>