React-native-navigation: Improved documentation

[guyca]

It's time to give the docs some attention. This issue is meant to focus and coordinate efforts on rewriting and adding missing articles.

Everyone is more than welcome to take part in this effort - either by contributing articles or by giving feedback and suggestions.

Bellow is the outline of the new docs. If anyone would like to contribute articles please comment here or contact one of the admins on discord.
Some articles link to their equivalent in the current docs. Assignees are mentioned next to their assigned article.

Discord chat

🎊🎉🎊✨🎊🎉🎊Use this link to join the discussion on Discord 🎊🎉🎊✨🎊🎉🎊

Getting Started

Work will be done in docs branch, once all articles are done we'll update the current docs.

Our documentation is powered by Docsify which displays MarkDown files via GitHub pages. You don't need to be familiar with it, if you're familiar with MarkDown syntax than you're good to go.

git clone react-native-navigation && cd react-native-navigation
git checkout docs
npm i docsify-cli -g
docsify serve docs # Preview your local copy at http://localhost:3000

Getting Inspired

Some articles have equivalents in other platforms and frameworks, you should look those up for ideas and relevant info which our docs should also include.

• Material design documentation - Androids material design guidelines
• UiKit - iOS ui components
• react-navigation - Most popular JS based navigation library

Structure

• [x] Installing iOS
  
  
  
  • [x] Installation with CocoaPods
  
  
  • [x] Manual installation
  
  
• [x] Installing Android
• [ ] Installing using RN template
  
  
  
  • [ ] react-native init AppName --template rnn
  
  
  • [ ] react-native init AppName --template rnn-typescriot
  
  
• [x] Displaying the app root
• [ ] RNN Cli
  
  
  
  • [ ] create a new screen yarn rnn create screen
  
  
  • [ ] create a new layout yarn rnn create layout
  
  
• [x] Showcases
• [x] Starter kits
• [ ] RNN
• [ ] Layouts
  
  
  
  • [x] [Stack](https://wix.github.io/react-native-navigation/#/docs/layout-types?id=stack)
  
  
  • [x] api
  
  
  • [x] TopBar buttons
  
  
  • [x] Interact programmacitally with the Stack
  
  
  • [ ] Customizations
  
  
  • [x] Back button
  
  
  • [ ] Disabling the back action
  
  
  • [x] [Bottom tabs](https://wix.github.io/react-native-navigation/#/docs/layout-types?id=bottomtabs) @roiberlin
  
  
  • [x] Selecting tabs programmatically
  
  
  • [x] Change visibility
  
  
  • [x] Update tab options
  
  
  • [ ] Translucent BottomTabs
  
  
  • [ ] Use vector images as tab icons
  
  
  • [ ] [Side menu](https://wix.github.io/react-native-navigation/#/docs/layout-types?id=sidemenu)
  
  
  • [x] Opening the menu programmatically
  
  
  • [ ] controlling Open gesture (bezel, entireScreen etc)
  
  
  • [x] Adding a hamburger button
  
  
  • [ ] External Component
  
  
  • [x] ViewGroup
  
  
  • [x] Fragment
  
  
  • [ ] ViewController
  
  
  • [ ] Split view (iOS only)
  
  
• [ ] Top level routes
  
  
  
  • [x] [Root](https://wix.github.io/react-native-navigation/#/docs/top-level-api?id=setrootlayout)
  
  
  • [x] Root examples
  
  
  • [x] app launched event
  
  
  • [ ] Modal
  
  
  • [x] Transparent modals
  
  
  • [ ] PageSheet modals
  
  
  • [x] Disabling the dismiss action
  
  
  • [ ] Listening to modal dismiss
  
  
  • [x] [Overlay](https://wix.github.io/react-native-navigation/#/docs/top-level-api?id=showoverlaylayout-)
  
  
  • [x] api
  
  
  • [x] Transparent overlays
  
  
  • [x] Touch events
  
  
• [ ] Fundamentals
  
  
  
  • [x] Navigating the app @kgshv
  
  
  • [x] Screen lifecycle
  
  
  • [x] [Events](https://wix.github.io/react-native-navigation/#/docs/events) API @yogevbd
  
  
  • [x] Passing data to screens
  
  
• [ ] Customizations
  
  
  
  • [x] StatusBar
  
  
  • [ ] [TopBar](https://wix.github.io/react-native-navigation/#/docs/topBar-buttons)
  
  
  • [ ] Border and shadow/elevation
  
  
  • [ ] BottomTabs
  
  
  • [x] Default options
  
  
  • [x] FontFamily
  
  
  • [x] Screen animations
  
  
  • [x] Orientation
  
  
  • [x] Updating options
  
  
  • [ ] FAB
  
  
• [ ] Guides (Phase 2)
  
  
  
  • [ ] Options resolving
  
  
  • [ ] React hooks
  
  
  • [x] Interacting with layouts from any component
  
  
  • [ ] Rtl
  
  
  • [ ] Debouncing @ItsNoHax
  
  
  • [ ] Wrapping screens with HOC @omerwin
  
  
  • [ ] Functional components as screens @omerwin
  
  
  • [ ] When to use Modals over push
  
  
  • [x] [Exported constants](https://wix.github.io/react-native-navigation/#/docs/constants)
  
  
  • [ ] [Migrating from v1](https://wix.github.io/react-native-navigation/#/docs/top-level-api-migration)
  
  
• [ ] Guides Android (Phase 2)
  
  
  
  • [ ] Splash Screen
  
  
  • [ ] Back button behaviour @guyca
  
  
  • [ ] Image resources (resources, local storage)
  
  
• [ ] Guides iOS (Phase 2)
  
  
  
  • [ ] Splash screen
  
  
• [ ] Integrations
  
  
  
  • [ ] React-native-vector-icons
  
  
  • [ ] Providers (Redux, Remx, etc)
  
  
  • [ ] React Context
  
  

• [ ] Meta

  • [x] Contributing
  • [x] Running the project locally
  • [ ] Writing e2e tests @amitdwix

• [ ] API

  • [x] updateProps
  • [ ] getLaunchArgs

[eduardopelitti]

Hi there @guyca, I'm interested in contributing.

When working with RNN, I'm constantly checking the Typescript declaration files to check which methods or options are available for each property of the Options object. I'd like to help improving this, I don't know if it maps to any of the currently outlined items.

I can also help with anything in general, be it checking grammar, enhancing existing docs or writing a new guide if I'm capable.

Edit: added myself to the Discord channel

[tombasche]

I've got a bit of a list of common issues and troubleshooting - is this something that would be handy? Also happy to do some spell-checking, grammar etc of the rest of the docs as I go

[MakhouT]

It would also be handy to have some screenshot in the docs of how a component should be looking, or what the possibilities are.
When I find some time next week, I'll try to add it.

[MakhouT]

@guyca In the Structure section we are also missing related to FAB?

[RandyKdev]

@guyca in the Structure section, Top Tabs and FAB is missing.

[guyca]

@RandyKdev Both TopTabs and FAB are not maintained. @Damar95 and I are slowly refactoring them on Android. Once we're done I'll document them.

[rf1804]

@guyca i believe documentation needs complete review and updation as current doc was more suitable with the launch of V2, but now we already reached V4.

[guyca]

@rf1804 Absolutely, next week we're continuing work on the new docs. We plan to finish the entire rewrite by the end of February, early March we will submit the new docs to a review by a technical writer. We're also switching to Docosaurous2 and adding a few extra enhancements to make the docs my easy and intuitive.

[robsonsilv4]

Hi @guyca, I want to to help translating the docs to pt-BR.
How I start work on the actual docs structure?

[guyca]

Hey @robsonsilv4 That sounds amazing! Can you please ping @yogevbd or me on Discord? Thanks!

[robsonsilv4]

Sorry for delay @guyca. What's your user code from Discord? This is mine if you ping me: robsonsilva#5094

[guyca]

@robsonsilv4 We've switched the new docs to Docusaurus 2. I'm not sure what's the status of 18n with v2, but it will be cool if you can look into it. The docs state v2 still don't support translation but that might be outdated or might only refer to Crowdin integration.
Anyways - I'm guyca#3492 on Discord 👋

[nomstop2studio]

🤩🤩🤩

[Seanmclem]

Where are the docs? Readme points back to ourself

[guyca]

Alright, so the new docs are up and can be found here. Would like to thank everyone who took part in this effort 🏅 💪

What's next?
We're not done yet! This is only the initial phase and there's lots more to be done. We've listed all remaining articles in https://github.com/wix/react-native-navigation/issues/6103 and everyone is more then welcome to contribute either by writing an article or by simply giving feedback.