Document best practice for opening a modal via tab bar (like instagram)

[acomito]

• 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:

• https://stackoverflow.com/questions/46725173/react-navigation-tabnavigator-show-modal
• https://stackoverflow.com/questions/42731093/how-to-push-a-modal-screen-using-reactnavigation
• https://stackoverflow.com/questions/45520898/react-navigation-and-modal-tab-item
• https://stackoverflow.com/questions/46725173/react-navigation-tabnavigator-show-modal
• https://stackoverflow.com/questions/46106117/tabnavigator-with-a-modal-popup-with-react-navigation-like-instagram
• https://stackoverflow.com/questions/42398911/how-do-i-make-a-tabnavigator-button-push-a-modal-screen-with-react-navigation
• Allow TabBarBottom accept onTabPress callback (#486) #525
• Ability to define a custom onPress for a tab #314
• TabNavigator: Customize onPress functionality for custom tabs? #1059
• HOW TO: on tab icon press open modal #1576
• TabNavigator screen and Modals #2259
• How to overlay view to cover screen over tabbar? #1734
• make a specific screen a modal? #770

@TomAtterton seems to have a solution in this issue

#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.

[kelset]

Thanks for the request, if you could do a PR to the docs it would be awesome!

---

Moreover, we are planning on having this #2308 merged soon-ish.

[spencercarli]

This would be a great addition! I've actually done this exact thing before https://twitter.com/spencer_carli/status/897478614190612481

[nodediggity]

Unless I'm missing something, this post > http://rationalappdev.com/cross-platform-navigation-in-react-native/ < achieves just that, without the many work arounds mention in the SO posts above?

*Edit, it does appear @spencercarli has achieved the exact same thing already :)

[spencercarli]

Thinking about this some more I wonder where the best/right place would be for these types of guides? It's a relatively specific use case and I don't know that we want to clutter the documentation with a bunch of specific use cases.

Anyone have thoughts on how other libraries handle specific examples?

[acomito]

@spencercarli antd has some other sections beyond the API/Documentation, like Guidelines, Patterns and Resources. It would be cool to have a section of examples based in expo snacks, but maybe a short-term one could just be a bullet list of links to further reading/community stuff.

https://ant.design/docs/spec/cases

[kelset]

I've already sort of done that in the README (the links to community stuff), was planning on reworking the sections in the Docs, that's a cool reference, thanks!

[brentvatne]

seems like a nice thing to add! moved to docs repo react-navigation/react-navigation.github.io#27