In this post we’ll check how to produce bottom-to-top or right-to-left transitions for any screens that we want to. In our case we’ll have a few screens in modal and stack modes.

We will create navigation stack with custom header. For some screens the left action has to be close with cross icon (X), and for some screens it has to be back action with arrow-left icon (←).

For screens with close (X) icon the screen must behave like modal screen with bottom-to-top animation during appearing the screen, and top-to-bottom during closing the screen.

For screen with back (←) icon the screen must behave like stack — so animation should be within left-right directions.

Setup navigation

First of all let’s create our navigation stack. We will create three main screens — Home, ModalStack and NotModal. Home and NotModal will be just a simple screens, and ModalStack will be our new stack of screens. It should appear as modal, but screens inside it should behave like regular stack.

We’ll set headerMode to none because we will use our own custom header component.

#react-native #animation #react-navigation #react