React Navigation

React Navigation is born from the React Native community's need for an extensible yet easy-to-use navigation solution based on Javascript.

Installation

Since the library is a JS-based solution, to install the latest version of react-navigation you only need to run:

yarn add react-navigation

or

npm install --save react-navigation

Documentation

• The best way to learn is to follow the Getting started guide. It guides you through the fundamentals of React Navigation.
• The documentation includes solutions for common use cases in the "How do I do ...?" section, such as tab navigation and Redux integration.
• If you need to build your own navigator, there's a section for that too.
• The API reference lists all public APIs.
• The Community Resources document lists some other resources submitted to us by people who use React Navigation. Feel free to open a pull request to add your resource to the list.
• You can contribute improvements to the documentation in the website repository.

Try it out

You can also try out the Navigation Playground app to get a sense for some of the tools built in to React Navigation. The "Fundamentals" in the documentation also include examples you can play with.

FAQs

I'm having troubles using the library, what can I do?

See the help page.

How can I help?

This library is a community effort: it can only be great if we all help out in one way or another! If you feel like you aren't experienced enough using React Navigation to contribute, you can still make an impact by:

• Responding to one of the open issues. Even if you can't resolve or fully answer a question, asking for more information or clarity on an issue is extremely beneficial for someone to come after you to resolve the issue.
• Creating public example repositories or Snacks of navigation problems you have solved and sharing the links in Community Resources.
• Answering questions on Stack Overflow.
• Answering questions in our Reactiflux channel.
• Providing feedback on the open PRs.
• Providing feedback on the open RFCs.
• Improving the website.

If you would like to submit a pull request, please follow the Contributors guide to find out how. If you don't know where to start, check the ones with the label good first issue - even fixing a typo in the documentation is a worthy contribution!

Is this the only library available for navigation?

Certainly not! There other libraries - which, depending on your needs, can be better or worse suited for your project. Read more in the alternative libraries documentation, and read React Navigation's pitch & anti-pitch to understand the tradeoffs.

Can I use this library for web?

Web support was not a priority for the 1.0 release, but the architecture of this library allows for it (and it has worked in the past). If you would like to lead this charge, please reach out with your ideas for how to move forward on the RFCs repository and we would be happy to discuss.

Code of conduct

This library has adopted a Code of Conduct that we expect project participants to adhere to. Please read the full text so that you can understand what actions will and will not be tolerated.

What is enableForceUpdate ？

The property makes it possible to refresh the DrawerNavigator without refreshing whole app, it could be very meaningful when you wanna reset all data and screen when clicking current tab in drawer.

How to use enableForceUpdate ？

Because what the entrance of react-navigation returned is only a class not instance, you can put whatever properties at place where the instance generates. Like following:

const Nav = DrawerNavigator(...);
return <Nav enableForceUpdate />

License

React-navigation is licensed under the BSD 2-clause "Simplified" License.