How to create a push down of screens in React Navigation

Question

Is it possible to push down the whole navigation screen including the header? I need to push down my screen like the following image. Not sure where to start on accomplishing this. Will I need to nest my whole navigation inside another container?

Answer 1

Yes you can wrap your navigator by another component like <View> and style it. Maybe it has some better solutions but wrapping is just fine and I did it before.

Answer 2

there is a built-in option for that - you need to set mode: 'modal' to your stack navigator, eg:

const MainStack = initialRouteName =>
  StackNavigator(
    {
...
    },
    {
      ...navStyles,
      initialRouteName,
      mode: 'modal',
    }
  );

note this will only have an effect on ios, because such pattern is not present on android