CODEWITHSUNDEEP
react-nativereact-navigation
Zennichimaro
Zennichimaro

Reputation: 5306

React Navigation: Modal Stack similar to iOS on Android

using react-navigation, I'd like to popup (a modal) screen from bottom, covering almost all of the screen but dismissable by swiping down. This is similar to native iOS behavior (iOS 14, currently)

Anyone knows how to do that using React-Navigation in React-Native? I have been trying numerous of its headerOptions to no avail so I am not sure if it could be done.

Here's the behavior in one of the sample app.

Sample of what to achieve

Upvotes: 1

Views: 1705

Answers (1)

Jenny Kim
Jenny Kim

Reputation: 1565

The rounded border is mainly styles on the topmost view container, you can achieve it with something like this on the topmost view container:

borderTopLeftRadius: 30,
borderTopRightRadius: 30,
paddingVertical: 50,
paddingHorizontal: 30,

You can see in the example repo here:

https://github.com/itzpradip/react-navigation-v5-mix.git

commit 2976dd61a25c73c21375297dea0a38adf3474138 (HEAD -> master, origin/master, origin/HEAD)

Upvotes: 1

Related Questions