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 4
Routing and navigation for your React Native apps.
Documentation can be found at reactnavigation.org.
Contributing
The project uses a monorepo structure for the packages managed by yarn workspaces and lerna. To get started with the project, run yarn in the root directory to install the required dependencies for each package:
yarn
While developing, you can run the example app with Expo to test your changes:
yarn example start
Make sure your code passes TypeScript and ESLint. Run the following to verify:
yarn typescript
yarn lint
To fix formatting errors, run the following:
yarn lint --fix
Remember to add tests for your change if possible. Run the unit tests by:
yarn test
Running the e2e tests with Detox (on iOS) requires the following:
- Mac with macOS (at least macOS High Sierra 10.13.6)
- Xcode 10.1+ with Xcode command line tools
First you need to install applesimutils and detox-cli:
brew tap wix/brew
brew install applesimutils
yarn global add detox-cli
Then you can build and run the tests:
detox build -c ios.sim.debug
detox test -c ios.sim.debug
Publishing
To publish a new version, first we need to export a GH_TOKEN environment variable as mentioned here. Then run:
yarn lerna publish
This will automatically bump the version and publish the packages. It'll also publish the changelogs on GitHub for each package.
Installing from a fork on GitHub
Since we use a monorepo, it's not possible to install a package from the repository URL. If you need to install a forked version from Git, you can use gitpkg.
First install gitpkg:
yarn global add gitpkg
Then follow these steps to publish and install a forked package:
- Fork this repo to your account and clone the forked repo to your local machine
- Open a Terminal and
cdto the location of the cloned repo - Run
yarnto install any dependencies - If you want to make any changes, make them and commit
- Now
cdto the package directory that you want to use (e.g.cd packages/stackfor@react-navigation/stack) - Run
gitpkg publishto publish the package to your repo
After publishing, you should see something like this:
Package uploaded to git@github.com:<user>/<repo>.git with the name <name>
You can now install the dependency in your project:
yarn add <user>/<repo>.git#<name>
Remember to replace <user>, <repo> and <name> with right values.