e702791321
* Update to React Native 0.50 * Type Promise used in PlatformHelpers.web.js * Move $FlowFixMe in CardStack.js The line number Flow is using for this error changed. The underlying problem has not, but I don't have time to fix it now unfortunately. * Type TouchableItem's children prop as React.Node This was my bad. `React.ChildrenArray` should only really be used in the case of having multiple of the same type of child. * Type HeaderTitle's children prop as React.Node Same as last commit. * Add assertion in StackRouter that StateUtils.indexOf returns valid index Flow doesn't realize that `StateUtils.indexOf` is guaranteed to return a valid index, so we use `invariant` to assert it. * Remove unused type DrawerNavigationState from TypeDefinition * Remove unused type parameter T in DrawerView * Type NavigationStateRoute as NavigationLeafRoute & NavigationState * Don't constrain generic action types to NavigationAction By constraining to subtypes of `NavigationAction`, we actually are requiring that any router satisfying our type constraints has to take all of the `NavigationAction` types. Instead, we want to say that it will only take some of them. Changing the types here to be inferred. * Fix types of NavigationScreenProp and withCachedChildNavigation 1. `NavigationScreenProp` needs to have its type parameter annotated with a `+` to actually indicate covariance on that type parameter, apparently 2. `withCachedChildNavigation` needs to thread through more-specific `NavigationState`s, and right now it just discards that specificity, which breaks `DrawerSidebar` because it needs a `NavigationStateRoute` * Ignore website/build from Flow * Fix type of DrawerItems activeItemKey prop - Even when specified, it can be `null` - Use a ternary expression instead of `x && x.param` approach * Get rid of NavigationRouter & NavigationNavigator parameterization on NavigationAction Since `NavigationRouter`'s `getStateForAction` functionality is a standard Redux reducer, it knows to forward on any actions it doesn't know how to deal with. We can widen the types of these functions to be `NavigationAction` without any negative consequence. * Explicitly specify null navigationOptions in createNavigator Not sure why, but Flow doesn't like us leaving it unspecified * Fix createNavigationContainer/createNavigator/StackNavigator types * Fix up flow types for TabNavigator and DrawerNavigator * Properly type defaultContentComponent * Fix more flow errors in createNavigationContainer * Replace NavigatorProps with NavigationNavigatorProps * Type SceneView's navigation prop as NavigationScreenProp<any> There is an unavoidable* type problem here. A `NavigationComponent` is either a navigator with a `NavigationStateRoute` or a scene with a `NavigationRoute`. The navigation prop it gets passed must match the component's `NavigationState`. However, there's no way for us to say that "`this.props.router.getComponentForRouteName` will have a `NavigationNavigator` iff the corresponding `childNavigationProps` is a `NavigationStateRoute`". The cleanest way to make this work is to throw an "any" specifically for the navigation prop's state type param. * We could probably avoid it with sufficient refactoring. If the routers were charged with keeping track of `childNavigationProps` instead of leaving it to the views, they could return the child navigation prop and child `NavigationComponent` in pairs whose types were coupled. * Pass in screenProps to NavigationComponent in NavigationPlayground's CustomTabs Flow wants `screenProps` to be passed in here for some reason... It cites `SceneView`, but that doesn't really make much sense to me. But this is some custom logic that most people aren't likely to run into, so I'm not gonna worry too much about it. * Patch mismatch with react-native-tab-view type for now * Use generic NavigationState in createNavigationContainer's _nav var We made the NavigationState generic while #1313 added a new instance variable. This updates the new instance variable to be generic. * Fix failing tests
React Navigation 
Learn once, navigate anywhere.
React Navigation is born from the React Native community's need for an extensible yet easy-to-use navigation solution based on Javascript.
React Navigation is the result of a collaboration between developers from Facebook, Expo and the React community at large: it replaces and improves upon several navigation libraries in the ecosystem, including Ex-Navigation, React Native's Navigator and NavigationExperimental components.
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
Get Started
To learn how the library work, head to the introduction on the website for a quick tutorial that will cover all the basics - or try it out our expo demo.
Advanced guides
React Navigation API
Community contributions
A lot of developers poured their knowledge in blog posts, and other repos - we will try to keep here a list of tutorials and resources to help someone who wants to learn about React Navigation and techniques to handle navigation effectively.
Introduction to the library
Basic Tutorials
- Basic ReactNavigation Example App and Tutorial
- Understanding Navigation in React Native
- Comprehensive routing and navigation in React Native made easy
- Replace a Screen Using React Navigation
Intermediate Concepts
- Integrating React-Navigation and Redux with authentication flow
- Using React Navigation and Redux in your React Native Application
- React-Navigation, complete Redux state management, tab-bar, and multiple navigators
- Custom Drawer with React-Navigation in React-Native
- React Navigation Drawer - a tutorial series
Advanced Topics
Comparisons and Discussion
- Migrate from ExNavigation to React Navigation
- Playing with React Navigation and Airbnb's Native Navigation
- How we restructured our app with React Navigation
- What’s Happening with Navigation in React Native?
Example Projects
Libraries
FAQs
When is version 1.0.0 going to be released?
As soon as all the tasks here have been completed. You can read more about it in the blog.
(in the meantime, you can find the changelog for every release here)
I'm having troubles using the library, what can I do?
Head to the issues and do a quick search: if you think you are experiencing a bug chances are somebody already opened an issue for it. If instead you are having more general problems, use Stack Overflow - which is better suited and helps keeping the Issues section of the repo clean. Alternatively you could join the Reactiflux community on Discord where there are React Native and React Navigation channels with helpful people who might be able to answer you.
You should only open a new issue if you believe that you are experiencing a bug or have a feature request, and please follow the dedicated template - it will help everyone helping you (and may get closed if it doesn't).
My app is really slow!
We are aware that the performances can be improved - we will work on this (keep an eye on the roadmap linked above). In the meantime, please refer to these few issues for specific information regarding:
In particular, refer to this comment (and the one after that) to learn more about how you can try improving the performance of your code.
How can I help?
Glad you ask! 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 repos of navigation problems you have solved.
-
Answering questions on Stack Overflow. Alternatively, asking questions on Stack Overflow instead of opening an issue.
-
Answering questions in our Reactiflux channel.
-
Providing feedback on the open PRs.
If you feel brave enough you can submit a PR: 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?
No: there are some other libraries - which, depending on your project, can be better or worse suited for your project. They differ in the approach and implementation from react-navigation, but share the common goal of helping you create a good React Native application; you can find a general round up in the React Native docs.
Can I use this library for web?
This library originally planned to support web too - but at the moment it is not a priority for v1.0; a lot of work is necessary to reach it as-is and we had to freeze this support (consider it "experimental").
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.
License
React-navigation is licensed under the BSD 2-clause "Simplified" License.