title: Custom animation for React Native Stack navigation
body: <p>I need to create a custom animation effect, which is pretty similar with the default one on iOS, but with a small difference: When I change the screen, I need the next screen to push the current screen to the left. The default animation is placing the next screen over the current one and it also moves the current screen to the left. But I need the next screen to literally push the current screen because I have a wave which starts from the first screen and continues to the second screen and I would like to achieve a continuation effect when changing the screens.</p>
  <p>This is what I have for now, but it is just hiding the current screen on screen change:</p>
  <pre><code>&lt;Stack.Navigator 
      initialRouteName=&quot;Language&quot;
      screenOptions={{
          cardOverlayEnabled: true,
          gestureEnabled: true,
          ...MyTransition,
  }}&gt;
  ...
  &lt;/Stack.Navigator&gt;
  const MyTransition = {
      gestureDirection: 'horizontal',
      transitionSpec: {
        open: TransitionSpecs.TransitionIOSSpec,
        close: TransitionSpecs.TransitionIOSSpec,
      },
      cardStyleInterpolator: ({ current, next, layouts }) =&gt; {
        return {
          cardStyle: {
            transform: [
              {
                translateX: current.progress.interpolate({
                  inputRange: [0, 1],
                  outputRange: [layouts.screen.width, 0],
                }),
              },
            ],
          },
        };
      },
  };
  </code></pre>
  <p>Thanks for your help!</p>