Skip to content

Commit

Permalink
Update documentation about modals
Browse files Browse the repository at this point in the history
  • Loading branch information
satya164 committed Nov 30, 2023
1 parent 4608ec7 commit 990b009
Show file tree
Hide file tree
Showing 2 changed files with 24 additions and 4 deletions.
14 changes: 12 additions & 2 deletions versioned_docs/version-6.x/modal.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ sidebar_label: Opening a modal

A modal displays content that temporarily blocks interactions with the main view.

A modal is like a popup — it's not part of your primary navigation flow — it usually has a different transition, a different way to dismiss it, and is intended to focus on one particular piece of content or interaction.
A modal is like a popup — it usually has a different transition animation, and is intended to focus on one particular interaction or piece of content.

## Creating a stack with modal screens

Expand Down Expand Up @@ -67,4 +67,14 @@ Instead of specifying this option for a group, it's also possible to specify it

## Summary

- To change the type of transition on a stack navigator you can use the `presentation` option. When set to `modal`, all modal screens animate-in from bottom to top rather than right to left by default. This applies to that entire group, so to use non-modal transitions on other screens, we add another group with the default configuration.
- To change the type of transition on a stack navigator you can use the `presentation` option.
- When `presentation` is set to `modal`, the screens behave like a modal, i.e. they have a bottom to top transition and may show part of the previous screen in the background.
- Setting `presentation: 'modal'` on a group makes all the screens in the group modals, so to use non-modal transitions on other screens, we add another group with the default configuration.

## Best practices

Since modals are intended to be on top of other content, there are a couple of things to keep in mind when using modals:

- Avoid nesting them inside other navigators like tab or drawer. Modal screens should be defined as part of the root stack.
- Modal screens should be the last in the stack - avoid pushing regular screens on top of modals.
- The first screen in a stack appears as a regular screen even if configured as a modal, since there is no screen before it to show behind. So always make sure that modal screens are pushed on top of a regular screen or another modal screen.
14 changes: 12 additions & 2 deletions versioned_docs/version-7.x/modal.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ sidebar_label: Opening a modal

A modal displays content that temporarily blocks interactions with the main view.

A modal is like a popup — it's not part of your primary navigation flow — it usually has a different transition, a different way to dismiss it, and is intended to focus on one particular piece of content or interaction.
A modal is like a popup — it usually has a different transition animation, and is intended to focus on one particular interaction or piece of content.

## Creating a stack with modal screens

Expand Down Expand Up @@ -67,4 +67,14 @@ Instead of specifying this option for a group, it's also possible to specify it

## Summary

- To change the type of transition on a stack navigator you can use the `presentation` option. When set to `modal`, all modal screens animate-in from bottom to top rather than right to left by default. This applies to that entire group, so to use non-modal transitions on other screens, we add another group with the default configuration.
- To change the type of transition on a stack navigator you can use the `presentation` option.
- When `presentation` is set to `modal`, the screens behave like a modal, i.e. they have a bottom to top transition and may show part of the previous screen in the background.
- Setting `presentation: 'modal'` on a group makes all the screens in the group modals, so to use non-modal transitions on other screens, we add another group with the default configuration.

## Best practices

Since modals are intended to be on top of other content, there are a couple of things to keep in mind when using modals:

- Avoid nesting them inside other navigators like tab or drawer. Modal screens should be defined as part of the root stack.
- Modal screens should be the last in the stack - avoid pushing regular screens on top of modals.
- The first screen in a stack appears as a regular screen even if configured as a modal, since there is no screen before it to show behind. So always make sure that modal screens are pushed on top of a regular screen or another modal screen.

0 comments on commit 990b009

Please sign in to comment.