CODEWITHSUNDEEP
androidiosreactjsreact-nativereact-navigation
Evan Green
Evan Green

Reputation: 358

How to create a push down of screens in React Navigation

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?

Push down example

Upvotes: 1

Views: 276

Answers (2)

Sinapcs
Sinapcs

Reputation: 2745

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.

Upvotes: 1

vonovak
vonovak

Reputation: 1597

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

Upvotes: 1

Related Questions