react-navigation / react-navigation/react-navigation.github.io

Open a modal from a tab bar

Open
#27 15 comments 4 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

help wanted
Dominant language
JavaScript
Stars
324
Forks
2k
PR merge metrics
No merged PRs in 30d

Description

Moved over from https://github.com/react-navigation/react-navigation/issues/3003
@spencercarli came up with this solution: https://snack.expo.io/SyJKMkFUM
We might need to change the API a bit to make it cleaner but we can document this approach for now!


  • If you're suggesting a change/improvement, tell us how it should work

It would be great to get documentation done for this "open modal from tab bar" layout. I've seen it asked a bunch of times in different places as it's a very common/popular requirement.

While not as helpful as writing documentation myself, here are some of the places this was asked, to show it would be useful to have it in the official docs:

@TomAtterton seems to have a solution in this issue

https://github.com/react-community/react-navigation/issues/1576

He also left the same comment here:

https://stackoverflow.com/questions/42398911/how-do-i-make-a-tabnavigator-button-push-a-modal-screen-with-react-navigation

Anyway, best practice or not, Tom seems to have the only solution? Maybe he could give a slightly longer form answer and that can be used for docs? @spencercarli

I will try to write something up potentially.

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Review the linked Expo Snack solution and the related issue and Stack Overflow discussions to understand the proposed tab-bar-to-modal layout. Document the approach in the project's official documentation, including a complete example and any API caveats; done means users can follow the documented example to open a modal from a tab bar.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react-native
Domain
documentation
Issue type
Documentation
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.