chore: publish

- @react-navigation/bottom-tabs@5.0.0-alpha.39
 - @react-navigation/compat@5.0.0-alpha.28
 - @react-navigation/core@5.0.0-alpha.37
 - @react-navigation/drawer@5.0.0-alpha.41
 - @react-navigation/material-bottom-tabs@5.0.0-alpha.36
 - @react-navigation/material-top-tabs@5.0.0-alpha.35
 - @react-navigation/native-stack@5.0.0-alpha.29
 - @react-navigation/native@5.0.0-alpha.29
 - @react-navigation/routers@5.0.0-alpha.27
 - @react-navigation/stack@5.0.0-alpha.63

.github/ISSUE_TEMPLATE/config.yml

@@ -1,9 +1,12 @@
 blank_issues_enabled: false
 contact_links:
+  - name: Troubleshooting
+    url: https://reactnavigation.org/docs/en/next/troubleshooting.html
+    about: Read how to troubleshoot and fix common issues and mistakes.
   - name: Documentation
     url: https://next.reactnavigation.org
     about: Read the official documentation.
-  - name: Feature Requests
+  - name: Feature requests
     url: https://react-navigation.canny.io/feature-requests
     about: Post a feature request on Canny.
   - name: StackOverflow

.github/workflows/main.yml

@@ -1,70 +0,0 @@
-
-name: Detox (iOS)
-
-on: [push]
-
-jobs:
-  build:
-    runs-on: macOS-latest
-    timeout-minutes: 15
-
-    env:
-      DEVELOPER_DIR: /Applications/Xcode_11.2.app
-    steps:
-    - uses: actions/checkout@v1
-
-    - name: Use Node.js 10
-      uses: actions/setup-node@v1
-      with:
-        node-version: 12
-
-    - name: Get Yarn cache
-      id: yarn-cache
-      run: echo "::set-output name=dir::$(yarn cache dir)"
-
-    - name: Cache Yarn packages
-      uses: actions/cache@v1
-      with:
-        path: ${{ steps.yarn-cache.outputs.dir }}
-        key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-        restore-keys: ${{ runner.os }}-yarn-
-
-    - name: Install dependencies
-      if: steps.yarn-cache.outputs.cache-hit != 'true'
-      run: yarn --frozen-lockfile
-
-    - name: Cache Pods
-      uses: actions/cache@v1
-      with:
-        path: example/ios/Pods
-        key: pods-${{ hashFiles('**/Podfile.lock') }}
-
-    - name: Update Pods
-      run: |
-        gem update cocoapods xcodeproj
-        cd example/ios
-        pod install
-
-    - name: Configure dependencies
-      run: |
-        brew tap wix/brew
-        brew install applesimutils
-        yarn global add detox-cli
-
-    - name: Cache Detox build
-      uses: actions/cache@v1
-      id: detox-cache
-      with:
-        path: example/ios/build
-        key: detox-build-${{ hashFiles('**/yarn.lock') }}-${{ hashFiles('**/Podfile.lock') }}
-
-    - name: Build Detox
-      if: steps.detox-cache.outputs.cache-hit != 'true'
-      run: |
-        cd example
-        detox build --configuration ios.sim.release
-
-    - name: Run Detox tests
-      run: |
-        cd example
-        detox test --configuration ios.sim.release --cleanup --debug-synchronization 200

README.md

@@ -41,12 +41,12 @@ Remember to add tests for your change if possible. Run the unit tests by:
 yarn test
 ```
 
-Running Detox (on iOS) requires the following:
+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
 
-To run the integration tests, first you need to install `applesimutils` and `detox-cli`:
+First you need to install `applesimutils` and `detox-cli`:
 
 ```sh
 brew tap wix/brew
@@ -57,7 +57,6 @@ yarn global add detox-cli
 Then you can build and run the tests:
 
 ```sh
-cd example
 detox build -c ios.sim.debug
 detox test -c ios.sim.debug
 ```
@@ -72,6 +71,39 @@ 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`](https://github.com/ramasilveyra/gitpkg).
+
+First install `gitpkg`:
+
+```sh
+yarn global add gitpkg
+```
+
+Then follow these steps to publish and install a forked package:
+
+1. Fork this repo to your account and clone the forked repo to your local machine
+1. Open a Terminal and `cd` to the location of the cloned repo
+1. Run `yarn` to install any dependencies
+1. If you want to make any changes, make them and commit
+1. Now `cd` to the package directory that you want to use (e.g. `cd packages/stack` for `@react-navigation/stack`)
+1. Run `gitpkg publish` to publish the package to your repo
+
+After publishing, you should see something like this:
+
+```sh
+Package uploaded to git@github.com:<user>/<repo>.git with the name <name>
+```
+
+You can now install the dependency in your project:
+
+```sh
+yarn add <user>/<repo>.git#<name>
+```
+
+Remember to replace `<user>`, `<repo>` and `<name>` with right values.
+
 <!-- badges -->
 
 [build-badge]: https://img.shields.io/circleci/project/github/react-navigation/navigation-ex/master.svg?style=flat-square

example/App.tsx

@@ -1,3 +1,6 @@
 import 'react-native-gesture-handler';
+import { registerRootComponent } from 'expo';
 
-export { default } from './src/index';
+import App from './src/index';
+
+registerRootComponent(App);

example/android/app/build.gradle

@@ -80,8 +80,8 @@ project.ext.react = [
     enableHermes: false,  // clean and rebuild if changing
 ]
 
-apply from: '../../node_modules/react-native-unimodules/gradle.groovy'
-apply from: "../../node_modules/react-native/react.gradle"
+apply from: '../../../node_modules/react-native-unimodules/gradle.groovy'
+apply from: "../../../node_modules/react-native/react.gradle"
 
 /**
  * Set this to true to create two separate APKs instead of one:
@@ -179,10 +179,10 @@ android {
 dependencies {
     implementation fileTree(dir: "libs", include: ["*.jar"])
     implementation "com.facebook.react:react-native:+"  // From node_modules
-    addUnimodulesDependencies()
+    addUnimodulesDependencies([  modulesPaths : ['../../../node_modules'] ])
 
     if (enableHermes) {
-        def hermesPath = "../../node_modules/hermes-engine/android/";
+        def hermesPath = "../../../node_modules/hermes-engine/android/";
         debugImplementation files(hermesPath + "hermes-debug.aar")
         releaseImplementation files(hermesPath + "hermes-release.aar")
     } else {
@@ -197,4 +197,4 @@ task copyDownloadableDepsToLibs(type: Copy) {
     into 'libs'
 }
 
-apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)
+apply from: file("../../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)

example/android/build.gradle

@@ -24,11 +24,11 @@ allprojects {
         mavenLocal()
         maven {
             // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
-            url("$rootDir/../node_modules/react-native/android")
+            url("$rootDir/../../node_modules/react-native/android")
         }
         maven {
             // Android JSC is installed from npm
-            url("$rootDir/../node_modules/jsc-android/dist")
+            url("$rootDir/../../node_modules/jsc-android/dist")
         }
 
         google()

example/android/settings.gradle

@@ -1,7 +1,7 @@
-apply from: '../node_modules/react-native-unimodules/gradle.groovy'
-includeUnimodulesProjects()
+apply from: '../../node_modules/react-native-unimodules/gradle.groovy'
+includeUnimodulesProjects([ modulesPaths : ['../../../node_modules'] ])
 
 
 rootProject.name = 'ReactNavigationExample'
-apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
+apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
 include ':app'

example/app.json

@@ -1,7 +1,10 @@
 {
+  "name": "ReactNavigationExample",
+  "displayName": "React Navigation Example",
   "expo": {
     "name": "@react-navigation/example",
     "slug": "react-navigation-example",
+    "description": "Demo app to showcase various functionality of React Navigation",
     "privacy": "public",
     "sdkVersion": "36.0.0",
     "platforms": [
@@ -25,9 +28,6 @@
     "ios": {
       "supportsTablet": true
     },
-    "entryPoint": "node_modules/expo/AppEntry.js",
-    "description": "Demo app to showcase various functionality of React Navigation"
-  },
-  "displayName": "React Navigation Example",
-  "name": "ReactNavigationExample"
+    "entryPoint": "App.tsx"
+  }
 }

example/e2e/.eslintrc.json

@@ -0,0 +1,10 @@
+{
+  "settings": {
+    "import/core-modules": [
+      "detox",
+      "detox/runners/jest/adapter",
+      "detox/runners/jest/specReporter"
+    ]
+  },
+  "env": { "jest": true, "jasmine": true }
+}

example/e2e/config.json

@@ -1,6 +1,6 @@
 {
-    "setupFilesAfterEnv": ["./init.js"],
-    "testEnvironment": "node",
-    "reporters": ["detox/runners/jest/streamlineReporter"],
-    "verbose": true
+  "setupFilesAfterEnv": ["./init.js"],
+  "testEnvironment": "node",
+  "reporters": ["detox/runners/jest/streamlineReporter"],
+  "verbose": true
 }

example/e2e/init.js

@@ -1,8 +1,7 @@
-/* eslint-disable import/no-commonjs, jest/no-jasmine-globals */
-/* eslint-env jest, jasmine */
+/* eslint-disable jest/no-jasmine-globals, import/no-commonjs */
 
 const detox = require('detox');
-const config = require('../package.json').detox;
+const config = require('../../package.json').detox;
 const adapter = require('detox/runners/jest/adapter');
 const specReporter = require('detox/runners/jest/specReporter');
 

example/index.js

@@ -1,6 +1,4 @@
 import { AppRegistry } from 'react-native';
-
-// Need to add extension or eslint confuses it with app.json
-import App from './App.tsx';
+import App from './src/index.tsx';
 
 AppRegistry.registerComponent('ReactNavigationExample', () => App);

example/ios/Podfile

@@ -1,40 +1,40 @@
 platform :ios, '10.0'
-require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
-require_relative '../node_modules/react-native-unimodules/cocoapods.rb'
+require_relative '../../node_modules/@react-native-community/cli-platform-ios/native_modules'
+require_relative '../../node_modules/react-native-unimodules/cocoapods.rb'
 
 target 'ReactNavigationExample' do
   # Pods for ReactNavigationExample
-  pod 'FBLazyVector', :path => "../node_modules/react-native/Libraries/FBLazyVector"
-  pod 'FBReactNativeSpec', :path => "../node_modules/react-native/Libraries/FBReactNativeSpec"
-  pod 'RCTRequired', :path => "../node_modules/react-native/Libraries/RCTRequired"
-  pod 'RCTTypeSafety', :path => "../node_modules/react-native/Libraries/TypeSafety"
-  pod 'React', :path => '../node_modules/react-native/'
-  pod 'React-Core', :path => '../node_modules/react-native/'
-  pod 'React-CoreModules', :path => '../node_modules/react-native/React/CoreModules'
-  pod 'React-Core/DevSupport', :path => '../node_modules/react-native/'
-  pod 'React-RCTActionSheet', :path => '../node_modules/react-native/Libraries/ActionSheetIOS'
-  pod 'React-RCTAnimation', :path => '../node_modules/react-native/Libraries/NativeAnimation'
-  pod 'React-RCTBlob', :path => '../node_modules/react-native/Libraries/Blob'
-  pod 'React-RCTImage', :path => '../node_modules/react-native/Libraries/Image'
-  pod 'React-RCTLinking', :path => '../node_modules/react-native/Libraries/LinkingIOS'
-  pod 'React-RCTNetwork', :path => '../node_modules/react-native/Libraries/Network'
-  pod 'React-RCTSettings', :path => '../node_modules/react-native/Libraries/Settings'
-  pod 'React-RCTText', :path => '../node_modules/react-native/Libraries/Text'
-  pod 'React-RCTVibration', :path => '../node_modules/react-native/Libraries/Vibration'
-  pod 'React-Core/RCTWebSocket', :path => '../node_modules/react-native/'
+  pod 'FBLazyVector', :path => '../../node_modules/react-native/Libraries/FBLazyVector'
+  pod 'FBReactNativeSpec', :path => '../../node_modules/react-native/Libraries/FBReactNativeSpec'
+  pod 'RCTRequired', :path => '../../node_modules/react-native/Libraries/RCTRequired'
+  pod 'RCTTypeSafety', :path => '../../node_modules/react-native/Libraries/TypeSafety'
+  pod 'React', :path => '../../node_modules/react-native/'
+  pod 'React-Core', :path => '../../node_modules/react-native/'
+  pod 'React-CoreModules', :path => '../../node_modules/react-native/React/CoreModules'
+  pod 'React-Core/DevSupport', :path => '../../node_modules/react-native/'
+  pod 'React-RCTActionSheet', :path => '../../node_modules/react-native/Libraries/ActionSheetIOS'
+  pod 'React-RCTAnimation', :path => '../../node_modules/react-native/Libraries/NativeAnimation'
+  pod 'React-RCTBlob', :path => '../../node_modules/react-native/Libraries/Blob'
+  pod 'React-RCTImage', :path => '../../node_modules/react-native/Libraries/Image'
+  pod 'React-RCTLinking', :path => '../../node_modules/react-native/Libraries/LinkingIOS'
+  pod 'React-RCTNetwork', :path => '../../node_modules/react-native/Libraries/Network'
+  pod 'React-RCTSettings', :path => '../../node_modules/react-native/Libraries/Settings'
+  pod 'React-RCTText', :path => '../../node_modules/react-native/Libraries/Text'
+  pod 'React-RCTVibration', :path => '../../node_modules/react-native/Libraries/Vibration'
+  pod 'React-Core/RCTWebSocket', :path => '../../node_modules/react-native/'
 
-  pod 'React-cxxreact', :path => '../node_modules/react-native/ReactCommon/cxxreact'
-  pod 'React-jsi', :path => '../node_modules/react-native/ReactCommon/jsi'
-  pod 'React-jsiexecutor', :path => '../node_modules/react-native/ReactCommon/jsiexecutor'
-  pod 'React-jsinspector', :path => '../node_modules/react-native/ReactCommon/jsinspector'
-  pod 'ReactCommon/jscallinvoker', :path => "../node_modules/react-native/ReactCommon"
-  pod 'ReactCommon/turbomodule/core', :path => "../node_modules/react-native/ReactCommon"
-  pod 'Yoga', :path => '../node_modules/react-native/ReactCommon/yoga'
+  pod 'React-cxxreact', :path => '../../node_modules/react-native/ReactCommon/cxxreact'
+  pod 'React-jsi', :path => '../../node_modules/react-native/ReactCommon/jsi'
+  pod 'React-jsiexecutor', :path => '../../node_modules/react-native/ReactCommon/jsiexecutor'
+  pod 'React-jsinspector', :path => '../../node_modules/react-native/ReactCommon/jsinspector'
+  pod 'ReactCommon/jscallinvoker', :path => '../../node_modules/react-native/ReactCommon'
+  pod 'ReactCommon/turbomodule/core', :path => '../../node_modules/react-native/ReactCommon'
+  pod 'Yoga', :path => '../../node_modules/react-native/ReactCommon/yoga'
 
-  pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
-  pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
-  pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'
+  pod 'DoubleConversion', :podspec => '../../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
+  pod 'glog', :podspec => '../../node_modules/react-native/third-party-podspecs/glog.podspec'
+  pod 'Folly', :podspec => '../../node_modules/react-native/third-party-podspecs/Folly.podspec'
 
   use_native_modules!
-  use_unimodules!
+  use_unimodules!({ modules_paths: ['../../node_modules'] })
 end

example/ios/Podfile.lock

@@ -273,62 +273,62 @@ PODS:
   - Yoga (1.14.0)
 
 DEPENDENCIES:
-  - DoubleConversion (from `../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec`)
-  - EXAppLoaderProvider (from `../node_modules/expo-app-loader-provider/ios`)
-  - EXConstants (from `../node_modules/expo-constants/ios`)
-  - EXErrorRecovery (from `../node_modules/expo-error-recovery/ios`)
-  - EXFileSystem (from `../node_modules/expo-file-system/ios`)
-  - EXFont (from `../node_modules/expo-font/ios`)
-  - EXKeepAwake (from `../node_modules/expo-keep-awake/ios`)
-  - EXLinearGradient (from `../node_modules/expo-linear-gradient/ios`)
-  - EXLocation (from `../node_modules/expo-location/ios`)
-  - EXPermissions (from `../node_modules/expo-permissions/ios`)
-  - EXSQLite (from `../node_modules/expo-sqlite/ios`)
-  - EXWebBrowser (from `../node_modules/expo-web-browser/ios`)
-  - FBLazyVector (from `../node_modules/react-native/Libraries/FBLazyVector`)
-  - FBReactNativeSpec (from `../node_modules/react-native/Libraries/FBReactNativeSpec`)
-  - Folly (from `../node_modules/react-native/third-party-podspecs/Folly.podspec`)
-  - glog (from `../node_modules/react-native/third-party-podspecs/glog.podspec`)
-  - RCTRequired (from `../node_modules/react-native/Libraries/RCTRequired`)
-  - RCTTypeSafety (from `../node_modules/react-native/Libraries/TypeSafety`)
-  - React (from `../node_modules/react-native/`)
-  - React-Core (from `../node_modules/react-native/`)
-  - React-Core/DevSupport (from `../node_modules/react-native/`)
-  - React-Core/RCTWebSocket (from `../node_modules/react-native/`)
-  - React-CoreModules (from `../node_modules/react-native/React/CoreModules`)
-  - React-cxxreact (from `../node_modules/react-native/ReactCommon/cxxreact`)
-  - React-jsi (from `../node_modules/react-native/ReactCommon/jsi`)
-  - React-jsiexecutor (from `../node_modules/react-native/ReactCommon/jsiexecutor`)
-  - React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`)
-  - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
-  - React-RCTActionSheet (from `../node_modules/react-native/Libraries/ActionSheetIOS`)
-  - React-RCTAnimation (from `../node_modules/react-native/Libraries/NativeAnimation`)
-  - React-RCTBlob (from `../node_modules/react-native/Libraries/Blob`)
-  - React-RCTImage (from `../node_modules/react-native/Libraries/Image`)
-  - React-RCTLinking (from `../node_modules/react-native/Libraries/LinkingIOS`)
-  - React-RCTNetwork (from `../node_modules/react-native/Libraries/Network`)
-  - React-RCTSettings (from `../node_modules/react-native/Libraries/Settings`)
-  - React-RCTText (from `../node_modules/react-native/Libraries/Text`)
-  - React-RCTVibration (from `../node_modules/react-native/Libraries/Vibration`)
-  - ReactCommon/jscallinvoker (from `../node_modules/react-native/ReactCommon`)
-  - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
-  - "RNCMaskedView (from `../node_modules/@react-native-community/masked-view`)"
-  - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
-  - RNReanimated (from `../node_modules/react-native-reanimated`)
-  - RNScreens (from `../node_modules/react-native-screens`)
-  - UMBarCodeScannerInterface (from `../node_modules/unimodules-barcode-scanner-interface/ios`)
-  - UMCameraInterface (from `../node_modules/unimodules-camera-interface/ios`)
-  - UMConstantsInterface (from `../node_modules/unimodules-constants-interface/ios`)
-  - "UMCore (from `../node_modules/@unimodules/core/ios`)"
-  - UMFaceDetectorInterface (from `../node_modules/unimodules-face-detector-interface/ios`)
-  - UMFileSystemInterface (from `../node_modules/unimodules-file-system-interface/ios`)
-  - UMFontInterface (from `../node_modules/unimodules-font-interface/ios`)
-  - UMImageLoaderInterface (from `../node_modules/unimodules-image-loader-interface/ios`)
-  - UMPermissionsInterface (from `../node_modules/unimodules-permissions-interface/ios`)
-  - "UMReactNativeAdapter (from `../node_modules/@unimodules/react-native-adapter/ios`)"
-  - UMSensorsInterface (from `../node_modules/unimodules-sensors-interface/ios`)
-  - UMTaskManagerInterface (from `../node_modules/unimodules-task-manager-interface/ios`)
-  - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
+  - DoubleConversion (from `../../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec`)
+  - EXAppLoaderProvider (from `../../node_modules/expo-app-loader-provider/ios`)
+  - EXConstants (from `../../node_modules/expo-constants/ios`)
+  - EXErrorRecovery (from `../../node_modules/expo-error-recovery/ios`)
+  - EXFileSystem (from `../../node_modules/expo-file-system/ios`)
+  - EXFont (from `../../node_modules/expo-font/ios`)
+  - EXKeepAwake (from `../../node_modules/expo-keep-awake/ios`)
+  - EXLinearGradient (from `../../node_modules/expo-linear-gradient/ios`)
+  - EXLocation (from `../../node_modules/expo-location/ios`)
+  - EXPermissions (from `../../node_modules/expo-permissions/ios`)
+  - EXSQLite (from `../../node_modules/expo-sqlite/ios`)
+  - EXWebBrowser (from `../../node_modules/expo-web-browser/ios`)
+  - FBLazyVector (from `../../node_modules/react-native/Libraries/FBLazyVector`)
+  - FBReactNativeSpec (from `../../node_modules/react-native/Libraries/FBReactNativeSpec`)
+  - Folly (from `../../node_modules/react-native/third-party-podspecs/Folly.podspec`)
+  - glog (from `../../node_modules/react-native/third-party-podspecs/glog.podspec`)
+  - RCTRequired (from `../../node_modules/react-native/Libraries/RCTRequired`)
+  - RCTTypeSafety (from `../../node_modules/react-native/Libraries/TypeSafety`)
+  - React (from `../../node_modules/react-native/`)
+  - React-Core (from `../../node_modules/react-native/`)
+  - React-Core/DevSupport (from `../../node_modules/react-native/`)
+  - React-Core/RCTWebSocket (from `../../node_modules/react-native/`)
+  - React-CoreModules (from `../../node_modules/react-native/React/CoreModules`)
+  - React-cxxreact (from `../../node_modules/react-native/ReactCommon/cxxreact`)
+  - React-jsi (from `../../node_modules/react-native/ReactCommon/jsi`)
+  - React-jsiexecutor (from `../../node_modules/react-native/ReactCommon/jsiexecutor`)
+  - React-jsinspector (from `../../node_modules/react-native/ReactCommon/jsinspector`)
+  - react-native-safe-area-context (from `../../node_modules/react-native-safe-area-context`)
+  - React-RCTActionSheet (from `../../node_modules/react-native/Libraries/ActionSheetIOS`)
+  - React-RCTAnimation (from `../../node_modules/react-native/Libraries/NativeAnimation`)
+  - React-RCTBlob (from `../../node_modules/react-native/Libraries/Blob`)
+  - React-RCTImage (from `../../node_modules/react-native/Libraries/Image`)
+  - React-RCTLinking (from `../../node_modules/react-native/Libraries/LinkingIOS`)
+  - React-RCTNetwork (from `../../node_modules/react-native/Libraries/Network`)
+  - React-RCTSettings (from `../../node_modules/react-native/Libraries/Settings`)
+  - React-RCTText (from `../../node_modules/react-native/Libraries/Text`)
+  - React-RCTVibration (from `../../node_modules/react-native/Libraries/Vibration`)
+  - ReactCommon/jscallinvoker (from `../../node_modules/react-native/ReactCommon`)
+  - ReactCommon/turbomodule/core (from `../../node_modules/react-native/ReactCommon`)
+  - "RNCMaskedView (from `../../node_modules/@react-native-community/masked-view`)"
+  - RNGestureHandler (from `../../node_modules/react-native-gesture-handler`)
+  - RNReanimated (from `../../node_modules/react-native-reanimated`)
+  - RNScreens (from `../../node_modules/react-native-screens`)
+  - UMBarCodeScannerInterface (from `../../node_modules/unimodules-barcode-scanner-interface/ios`)
+  - UMCameraInterface (from `../../node_modules/unimodules-camera-interface/ios`)
+  - UMConstantsInterface (from `../../node_modules/unimodules-constants-interface/ios`)
+  - "UMCore (from `../../node_modules/@unimodules/core/ios`)"
+  - UMFaceDetectorInterface (from `../../node_modules/unimodules-face-detector-interface/ios`)
+  - UMFileSystemInterface (from `../../node_modules/unimodules-file-system-interface/ios`)
+  - UMFontInterface (from `../../node_modules/unimodules-font-interface/ios`)
+  - UMImageLoaderInterface (from `../../node_modules/unimodules-image-loader-interface/ios`)
+  - UMPermissionsInterface (from `../../node_modules/unimodules-permissions-interface/ios`)
+  - "UMReactNativeAdapter (from `../../node_modules/@unimodules/react-native-adapter/ios`)"
+  - UMSensorsInterface (from `../../node_modules/unimodules-sensors-interface/ios`)
+  - UMTaskManagerInterface (from `../../node_modules/unimodules-task-manager-interface/ios`)
+  - Yoga (from `../../node_modules/react-native/ReactCommon/yoga`)
 
 SPEC REPOS:
   trunk:
@@ -336,134 +336,134 @@ SPEC REPOS:
 
 EXTERNAL SOURCES:
   DoubleConversion:
-    :podspec: "../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec"
+    :podspec: "../../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec"
   EXAppLoaderProvider:
     :path: !ruby/object:Pathname
-    path: "../node_modules/expo-app-loader-provider/ios"
+    path: "../../node_modules/expo-app-loader-provider/ios"
   EXConstants:
     :path: !ruby/object:Pathname
-    path: "../node_modules/expo-constants/ios"
+    path: "../../node_modules/expo-constants/ios"
   EXErrorRecovery:
     :path: !ruby/object:Pathname
-    path: "../node_modules/expo-error-recovery/ios"
+    path: "../../node_modules/expo-error-recovery/ios"
   EXFileSystem:
     :path: !ruby/object:Pathname
-    path: "../node_modules/expo-file-system/ios"
+    path: "../../node_modules/expo-file-system/ios"
   EXFont:
     :path: !ruby/object:Pathname
-    path: "../node_modules/expo-font/ios"
+    path: "../../node_modules/expo-font/ios"
   EXKeepAwake:
     :path: !ruby/object:Pathname
-    path: "../node_modules/expo-keep-awake/ios"
+    path: "../../node_modules/expo-keep-awake/ios"
   EXLinearGradient:
     :path: !ruby/object:Pathname
-    path: "../node_modules/expo-linear-gradient/ios"
+    path: "../../node_modules/expo-linear-gradient/ios"
   EXLocation:
     :path: !ruby/object:Pathname
-    path: "../node_modules/expo-location/ios"
+    path: "../../node_modules/expo-location/ios"
   EXPermissions:
     :path: !ruby/object:Pathname
-    path: "../node_modules/expo-permissions/ios"
+    path: "../../node_modules/expo-permissions/ios"
   EXSQLite:
     :path: !ruby/object:Pathname
-    path: "../node_modules/expo-sqlite/ios"
+    path: "../../node_modules/expo-sqlite/ios"
   EXWebBrowser:
     :path: !ruby/object:Pathname
-    path: "../node_modules/expo-web-browser/ios"
+    path: "../../node_modules/expo-web-browser/ios"
   FBLazyVector:
-    :path: "../node_modules/react-native/Libraries/FBLazyVector"
+    :path: "../../node_modules/react-native/Libraries/FBLazyVector"
   FBReactNativeSpec:
-    :path: "../node_modules/react-native/Libraries/FBReactNativeSpec"
+    :path: "../../node_modules/react-native/Libraries/FBReactNativeSpec"
   Folly:
-    :podspec: "../node_modules/react-native/third-party-podspecs/Folly.podspec"
+    :podspec: "../../node_modules/react-native/third-party-podspecs/Folly.podspec"
   glog:
-    :podspec: "../node_modules/react-native/third-party-podspecs/glog.podspec"
+    :podspec: "../../node_modules/react-native/third-party-podspecs/glog.podspec"
   RCTRequired:
-    :path: "../node_modules/react-native/Libraries/RCTRequired"
+    :path: "../../node_modules/react-native/Libraries/RCTRequired"
   RCTTypeSafety:
-    :path: "../node_modules/react-native/Libraries/TypeSafety"
+    :path: "../../node_modules/react-native/Libraries/TypeSafety"
   React:
-    :path: "../node_modules/react-native/"
+    :path: "../../node_modules/react-native/"
   React-Core:
-    :path: "../node_modules/react-native/"
+    :path: "../../node_modules/react-native/"
   React-CoreModules:
-    :path: "../node_modules/react-native/React/CoreModules"
+    :path: "../../node_modules/react-native/React/CoreModules"
   React-cxxreact:
-    :path: "../node_modules/react-native/ReactCommon/cxxreact"
+    :path: "../../node_modules/react-native/ReactCommon/cxxreact"
   React-jsi:
-    :path: "../node_modules/react-native/ReactCommon/jsi"
+    :path: "../../node_modules/react-native/ReactCommon/jsi"
   React-jsiexecutor:
-    :path: "../node_modules/react-native/ReactCommon/jsiexecutor"
+    :path: "../../node_modules/react-native/ReactCommon/jsiexecutor"
   React-jsinspector:
-    :path: "../node_modules/react-native/ReactCommon/jsinspector"
+    :path: "../../node_modules/react-native/ReactCommon/jsinspector"
   react-native-safe-area-context:
-    :path: "../node_modules/react-native-safe-area-context"
+    :path: "../../node_modules/react-native-safe-area-context"
   React-RCTActionSheet:
-    :path: "../node_modules/react-native/Libraries/ActionSheetIOS"
+    :path: "../../node_modules/react-native/Libraries/ActionSheetIOS"
   React-RCTAnimation:
-    :path: "../node_modules/react-native/Libraries/NativeAnimation"
+    :path: "../../node_modules/react-native/Libraries/NativeAnimation"
   React-RCTBlob:
-    :path: "../node_modules/react-native/Libraries/Blob"
+    :path: "../../node_modules/react-native/Libraries/Blob"
   React-RCTImage:
-    :path: "../node_modules/react-native/Libraries/Image"
+    :path: "../../node_modules/react-native/Libraries/Image"
   React-RCTLinking:
-    :path: "../node_modules/react-native/Libraries/LinkingIOS"
+    :path: "../../node_modules/react-native/Libraries/LinkingIOS"
   React-RCTNetwork:
-    :path: "../node_modules/react-native/Libraries/Network"
+    :path: "../../node_modules/react-native/Libraries/Network"
   React-RCTSettings:
-    :path: "../node_modules/react-native/Libraries/Settings"
+    :path: "../../node_modules/react-native/Libraries/Settings"
   React-RCTText:
-    :path: "../node_modules/react-native/Libraries/Text"
+    :path: "../../node_modules/react-native/Libraries/Text"
   React-RCTVibration:
-    :path: "../node_modules/react-native/Libraries/Vibration"
+    :path: "../../node_modules/react-native/Libraries/Vibration"
   ReactCommon:
-    :path: "../node_modules/react-native/ReactCommon"
+    :path: "../../node_modules/react-native/ReactCommon"
   RNCMaskedView:
-    :path: "../node_modules/@react-native-community/masked-view"
+    :path: "../../node_modules/@react-native-community/masked-view"
   RNGestureHandler:
-    :path: "../node_modules/react-native-gesture-handler"
+    :path: "../../node_modules/react-native-gesture-handler"
   RNReanimated:
-    :path: "../node_modules/react-native-reanimated"
+    :path: "../../node_modules/react-native-reanimated"
   RNScreens:
-    :path: "../node_modules/react-native-screens"
+    :path: "../../node_modules/react-native-screens"
   UMBarCodeScannerInterface:
     :path: !ruby/object:Pathname
-    path: "../node_modules/unimodules-barcode-scanner-interface/ios"
+    path: "../../node_modules/unimodules-barcode-scanner-interface/ios"
   UMCameraInterface:
     :path: !ruby/object:Pathname
-    path: "../node_modules/unimodules-camera-interface/ios"
+    path: "../../node_modules/unimodules-camera-interface/ios"
   UMConstantsInterface:
     :path: !ruby/object:Pathname
-    path: "../node_modules/unimodules-constants-interface/ios"
+    path: "../../node_modules/unimodules-constants-interface/ios"
   UMCore:
     :path: !ruby/object:Pathname
-    path: "../node_modules/@unimodules/core/ios"
+    path: "../../node_modules/@unimodules/core/ios"
   UMFaceDetectorInterface:
     :path: !ruby/object:Pathname
-    path: "../node_modules/unimodules-face-detector-interface/ios"
+    path: "../../node_modules/unimodules-face-detector-interface/ios"
   UMFileSystemInterface:
     :path: !ruby/object:Pathname
-    path: "../node_modules/unimodules-file-system-interface/ios"
+    path: "../../node_modules/unimodules-file-system-interface/ios"
   UMFontInterface:
     :path: !ruby/object:Pathname
-    path: "../node_modules/unimodules-font-interface/ios"
+    path: "../../node_modules/unimodules-font-interface/ios"
   UMImageLoaderInterface:
     :path: !ruby/object:Pathname
-    path: "../node_modules/unimodules-image-loader-interface/ios"
+    path: "../../node_modules/unimodules-image-loader-interface/ios"
   UMPermissionsInterface:
     :path: !ruby/object:Pathname
-    path: "../node_modules/unimodules-permissions-interface/ios"
+    path: "../../node_modules/unimodules-permissions-interface/ios"
   UMReactNativeAdapter:
     :path: !ruby/object:Pathname
-    path: "../node_modules/@unimodules/react-native-adapter/ios"
+    path: "../../node_modules/@unimodules/react-native-adapter/ios"
   UMSensorsInterface:
     :path: !ruby/object:Pathname
-    path: "../node_modules/unimodules-sensors-interface/ios"
+    path: "../../node_modules/unimodules-sensors-interface/ios"
   UMTaskManagerInterface:
     :path: !ruby/object:Pathname
-    path: "../node_modules/unimodules-task-manager-interface/ios"
+    path: "../../node_modules/unimodules-task-manager-interface/ios"
   Yoga:
-    :path: "../node_modules/react-native/ReactCommon/yoga"
+    :path: "../../node_modules/react-native/ReactCommon/yoga"
 
 SPEC CHECKSUMS:
   boost-for-react-native: 39c7adb57c4e60d6c5479dd8623128eb5b3f0f2c
@@ -521,6 +521,6 @@ SPEC CHECKSUMS:
   UMTaskManagerInterface: a98e37a576a5220bf43b8faf33cfdc129d2f441d
   Yoga: f2a7cd4280bfe2cca5a7aed98ba0eb3d1310f18b
 
-PODFILE CHECKSUM: 18b58708b4bb9901516029103ee63c94d63edd9e
+PODFILE CHECKSUM: c48a21ff513d3eadafa50f8797207ef2be75e234
 
 COCOAPODS: 1.8.4

example/ios/ReactNavigationExample.xcodeproj/project.pbxproj

@@ -188,7 +188,7 @@
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;
-			shellScript = "export NODE_BINARY=node\n../node_modules/react-native/scripts/react-native-xcode.sh";
+			shellScript = "export NODE_BINARY=node\n../../node_modules/react-native/scripts/react-native-xcode.sh";
 		};
 		FC67D3D0567CD942E3DA69B7 /* [CP] Check Pods Manifest.lock */ = {
 			isa = PBXShellScriptBuildPhase;

example/metro.config.js

@@ -8,48 +8,58 @@ const blacklist = require('metro-config/src/defaults/blacklist');
 const root = path.resolve(__dirname, '..');
 const packages = path.resolve(__dirname, '..', 'packages');
 
-const modules = ['@babel/runtime', '@expo/vector-icons']
+// Get the list of dependencies for all packages in the monorepo
+const modules = ['@expo/vector-icons']
   .concat(
     ...fs
+      // List all packages under `packages/`
       .readdirSync(packages)
+      // Ignore hidden files such as .DS_Store
       .filter(p => !p.startsWith('.'))
       .map(p => {
         const pak = JSON.parse(
           fs.readFileSync(path.join(packages, p, 'package.json'), 'utf8')
         );
 
-        const deps = [];
-
-        if (pak.dependencies) {
-          deps.push(...Object.keys(pak.dependencies));
-        }
-
-        if (pak.peerDependencies) {
-          deps.push(...Object.keys(pak.peerDependencies));
-        }
-
-        return deps;
+        // We need to collect list of deps that this package imports
+        // Collecting both dependencies are peerDependencies sould do it
+        return Object.keys({
+          ...pak.dependencies,
+          ...pak.peerDependencies,
+        });
       })
   )
   .sort()
   .filter(
     (m, i, self) =>
+      // Remove duplicates and package names of the packages in the monorepo
       self.lastIndexOf(m) === i && !m.startsWith('@react-navigation/')
   );
 
 module.exports = {
   projectRoot: __dirname,
+
+  // We need to watch the root of the monorepo
+  // This lets Metro find the monorepo packages automatically using haste
+  // This also lets us import modules from monorepo root
   watchFolders: [root],
 
   resolver: {
+    // We need to blacklist `node_modules` of all our packages
+    // This will avoid Metro throwing duplicate module errors
     blacklistRE: blacklist(
-      [root, ...fs.readdirSync(packages).map(p => path.join(packages, p))].map(
-        it => new RegExp(`^${escape(path.join(it, 'node_modules'))}\\/.*$`)
-      )
+      fs
+        .readdirSync(packages)
+        .map(p => path.join(packages, p))
+        .map(
+          it => new RegExp(`^${escape(path.join(it, 'node_modules'))}\\/.*$`)
+        )
     ),
 
+    // When we import a package from the monorepo, metro won't be able to find their deps
+    // We need to specify them in `extraNodeModules` to tell metro where to find them
     extraNodeModules: modules.reduce((acc, name) => {
-      acc[name] = path.join(__dirname, 'node_modules', name);
+      acc[name] = path.join(__dirname, '..', 'node_modules', name);
       return acc;
     }, {}),
   },
@@ -60,6 +70,8 @@ module.exports = {
         const assets = '/packages/stack/src/views/assets';
 
         if (req.url.startsWith(assets)) {
+          // When an asset is imported outside the project root, it has wrong path on Android
+          // This happens for the back button in stack, so we fix the path to correct one
           req.url = req.url.replace(
             assets,
             '/assets/../packages/stack/src/views/assets'
@@ -72,7 +84,7 @@ module.exports = {
   },
 
   transformer: {
-    getTransformOptions: async () => ({
+    getTransformOptions: () => ({
       transform: {
         experimentalImportSupport: false,
         inlineRequires: true,

example/package.json

@@ -3,19 +3,12 @@
   "description": "Demo app to showcase various functionality of React Navigation",
   "version": "5.0.0-alpha.23",
   "private": true,
-  "workspaces": {
-    "nohoist": [
-      "*",
-      "*/**"
-    ]
-  },
   "scripts": {
     "start": "expo start",
     "web": "expo start --web",
-    "react-native": "./node_modules/.bin/react-native",
-    "native": "./node_modules/.bin/react-native start",
-    "android": "./node_modules/.bin/react-native run-android",
-    "ios": "./node_modules/.bin/react-native run-ios"
+    "native": "react-native start",
+    "android": "react-native run-android",
+    "ios": "react-native run-ios"
   },
   "dependencies": {
     "@expo/vector-icons": "^10.0.0",
@@ -23,22 +16,18 @@
     "color": "^3.1.2",
     "expo": "^36.0.2",
     "expo-asset": "~8.0.0",
-    "query-string": "^6.9.0",
+    "expo-blur": "^8.0.0",
     "react": "~16.9.0",
     "react-dom": "~16.9.0",
     "react-native": "~0.61.5",
     "react-native-gesture-handler": "~1.5.3",
-    "react-native-iphone-x-helper": "^1.2.1",
-    "react-native-paper": "^3.4.0",
+    "react-native-paper": "^3.5.0",
     "react-native-reanimated": "^1.4.0",
     "react-native-safe-area-context": "^0.6.2",
-    "react-native-screens": "^2.0.0-alpha.22",
+    "react-native-screens": "^2.0.0-alpha.25",
     "react-native-tab-view": "2.11.0",
     "react-native-unimodules": "^0.7.0",
-    "react-native-web": "^0.11.7",
-    "scheduler": "^0.18.0",
-    "shortid": "^2.2.15",
-    "use-subscription": "^1.3.0"
+    "react-native-web": "^0.11.7"
   },
   "devDependencies": {
     "@babel/core": "^7.7.7",
@@ -46,30 +35,7 @@
     "@types/react": "^16.9.17",
     "@types/react-native": "^0.60.30",
     "babel-preset-expo": "^8.0.0",
-    "detox": "^15.0.0",
     "expo-cli": "^3.11.5",
-    "jest": "^24.9.0",
     "typescript": "^3.7.4"
-  },
-  "detox": {
-    "test-runner": "jest",
-    "configurations": {
-      "ios.sim.debug": {
-        "binaryPath": "ios/build/Build/Products/Debug-iphonesimulator/ReactNavigationExample.app",
-        "build": "set -o pipefail; xcodebuild -workspace ios/ReactNavigationExample.xcworkspace -scheme ReactNavigationExample -configuration Debug -sdk iphonesimulator -derivedDataPath ios/build",
-        "type": "ios.simulator",
-        "device": {
-          "type": "iPhone 11 Pro"
-        }
-      },
-      "ios.sim.release": {
-        "binaryPath": "ios/build/Build/Products/Release-iphonesimulator/ReactNavigationExample.app",
-        "build": "export RCT_NO_LAUNCH_PACKAGER=true; set -o pipefail; xcodebuild -workspace ios/ReactNavigationExample.xcworkspace -scheme ReactNavigationExample -configuration Release -sdk iphonesimulator -derivedDataPath ios/build",
-        "type": "ios.simulator",
-        "device": {
-          "type": "iPhone 11 Pro"
-        }
-      }
-    }
   }
 }

example/src/Screens/DynamicTabs.tsx

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { Title, Button } from 'react-native-paper';
+import { Feather } from '@expo/vector-icons';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+
+type BottomTabParams = {
+  [key: string]: undefined;
+};
+
+const BottomTabs = createBottomTabNavigator<BottomTabParams>();
+
+export default function BottomTabsScreen() {
+  const [tabs, setTabs] = React.useState([0, 1]);
+
+  return (
+    <BottomTabs.Navigator>
+      {tabs.map(i => (
+        <BottomTabs.Screen
+          key={i}
+          name={`tab-${i}`}
+          options={{
+            title: `Tab ${i}`,
+            tabBarIcon: ({ color, size }) => (
+              <Feather name="octagon" color={color} size={size} />
+            ),
+          }}
+        >
+          {() => (
+            <View style={styles.container}>
+              <Title>Tab {i}</Title>
+              <Button onPress={() => setTabs(tabs => [...tabs, tabs.length])}>
+                Add a tab
+              </Button>
+              <Button
+                onPress={() =>
+                  setTabs(tabs => (tabs.length > 1 ? tabs.slice(0, -1) : tabs))
+                }
+              >
+                Remove a tab
+              </Button>
+            </View>
+          )}
+        </BottomTabs.Screen>
+      ))}
+    </BottomTabs.Navigator>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

example/src/Screens/ModalPresentationStack.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { View, StyleSheet } from 'react-native';
+import { View, StyleSheet, ScrollView } from 'react-native';
 import { Button } from 'react-native-paper';
 import { RouteProp, ParamListBase } from '@react-navigation/native';
 import {
@@ -25,7 +25,7 @@ const ArticleScreen = ({
   route: RouteProp<ModalStackParams, 'Article'>;
 }) => {
   return (
-    <React.Fragment>
+    <ScrollView>
       <View style={styles.buttons}>
         <Button
           mode="contained"
@@ -42,14 +42,14 @@ const ArticleScreen = ({
           Go back
         </Button>
       </View>
-      <Article author={{ name: route.params.author }} />
-    </React.Fragment>
+      <Article author={{ name: route.params.author }} scrollEnabled={false} />
+    </ScrollView>
   );
 };
 
 const AlbumsScreen = ({ navigation }: { navigation: ModalStackNavigation }) => {
   return (
-    <React.Fragment>
+    <ScrollView>
       <View style={styles.buttons}>
         <Button
           mode="contained"
@@ -66,8 +66,8 @@ const AlbumsScreen = ({ navigation }: { navigation: ModalStackNavigation }) => {
           Go back
         </Button>
       </View>
-      <Albums />
-    </React.Fragment>
+      <Albums scrollEnabled={false} />
+    </ScrollView>
   );
 };
 

example/src/Screens/NativeStack.tsx

@@ -137,7 +137,7 @@ const AlbumsScreen = ({
 }: {
   navigation: NativeStackNavigation;
 }) => (
-  <React.Fragment>
+  <ScrollView>
     <View style={styles.buttons}>
       <Button
         mode="contained"
@@ -154,8 +154,8 @@ const AlbumsScreen = ({
         Go back
       </Button>
     </View>
-    <Albums />
-  </React.Fragment>
+    <Albums scrollEnabled={false} />
+  </ScrollView>
 );
 
 const NativeStack = createNativeStackNavigator<NativeStackParams>();

example/src/Screens/SimpleStack.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { View, StyleSheet } from 'react-native';
+import { View, StyleSheet, ScrollView } from 'react-native';
 import { Button } from 'react-native-paper';
 import { RouteProp, ParamListBase } from '@react-navigation/native';
 import {
@@ -8,9 +8,11 @@ import {
 } from '@react-navigation/stack';
 import Article from '../Shared/Article';
 import Albums from '../Shared/Albums';
+import NewsFeed from '../Shared/NewsFeed';
 
 type SimpleStackParams = {
   Article: { author: string };
+  NewsFeed: undefined;
   Album: undefined;
 };
 
@@ -24,14 +26,42 @@ const ArticleScreen = ({
   route: RouteProp<SimpleStackParams, 'Article'>;
 }) => {
   return (
-    <React.Fragment>
+    <ScrollView>
       <View style={styles.buttons}>
         <Button
           mode="contained"
-          onPress={() => navigation.push('Album')}
+          onPress={() => navigation.replace('NewsFeed')}
           style={styles.button}
         >
-          Push album
+          Replace with feed
+        </Button>
+        <Button
+          mode="outlined"
+          onPress={() => navigation.pop()}
+          style={styles.button}
+        >
+          Pop screen
+        </Button>
+      </View>
+      <Article author={{ name: route.params.author }} scrollEnabled={false} />
+    </ScrollView>
+  );
+};
+
+const NewsFeedScreen = ({
+  navigation,
+}: {
+  navigation: SimpleStackNavigation;
+}) => {
+  return (
+    <ScrollView>
+      <View style={styles.buttons}>
+        <Button
+          mode="contained"
+          onPress={() => navigation.navigate('Album')}
+          style={styles.button}
+        >
+          Navigate to album
         </Button>
         <Button
           mode="outlined"
@@ -41,8 +71,8 @@ const ArticleScreen = ({
           Go back
         </Button>
       </View>
-      <Article author={{ name: route.params.author }} />
-    </React.Fragment>
+      <NewsFeed scrollEnabled={false} />
+    </ScrollView>
   );
 };
 
@@ -52,7 +82,7 @@ const AlbumsScreen = ({
   navigation: SimpleStackNavigation;
 }) => {
   return (
-    <React.Fragment>
+    <ScrollView>
       <View style={styles.buttons}>
         <Button
           mode="contained"
@@ -63,14 +93,14 @@ const AlbumsScreen = ({
         </Button>
         <Button
           mode="outlined"
-          onPress={() => navigation.goBack()}
+          onPress={() => navigation.pop(2)}
           style={styles.button}
         >
-          Go back
+          Pop by 2
         </Button>
       </View>
-      <Albums />
-    </React.Fragment>
+      <Albums scrollEnabled={false} />
+    </ScrollView>
   );
 };
 
@@ -95,6 +125,11 @@ export default function SimpleStackScreen({ navigation, ...rest }: Props) {
         })}
         initialParams={{ author: 'Gandalf' }}
       />
+      <SimpleStack.Screen
+        name="NewsFeed"
+        component={NewsFeedScreen}
+        options={{ title: 'Feed' }}
+      />
       <SimpleStack.Screen
         name="Album"
         component={AlbumsScreen}

example/src/Screens/StackHeaderCustomization.tsx

@@ -0,0 +1,158 @@
+import * as React from 'react';
+import { View, StyleSheet, ScrollView, Alert, Platform } from 'react-native';
+import { Button, Appbar } from 'react-native-paper';
+import { BlurView } from 'expo-blur';
+import { MaterialCommunityIcons } from '@expo/vector-icons';
+import { RouteProp, ParamListBase } from '@react-navigation/native';
+import {
+  createStackNavigator,
+  StackNavigationProp,
+  HeaderBackground,
+  useHeaderHeight,
+} from '@react-navigation/stack';
+import Article from '../Shared/Article';
+import Albums from '../Shared/Albums';
+
+type SimpleStackParams = {
+  Article: { author: string };
+  Album: undefined;
+};
+
+type SimpleStackNavigation = StackNavigationProp<SimpleStackParams>;
+
+const ArticleScreen = ({
+  navigation,
+  route,
+}: {
+  navigation: SimpleStackNavigation;
+  route: RouteProp<SimpleStackParams, 'Article'>;
+}) => {
+  return (
+    <ScrollView>
+      <View style={styles.buttons}>
+        <Button
+          mode="contained"
+          onPress={() => navigation.push('Album')}
+          style={styles.button}
+        >
+          Push album
+        </Button>
+        <Button
+          mode="outlined"
+          onPress={() => navigation.goBack()}
+          style={styles.button}
+        >
+          Go back
+        </Button>
+      </View>
+      <Article author={{ name: route.params.author }} scrollEnabled={false} />
+    </ScrollView>
+  );
+};
+
+const AlbumsScreen = ({
+  navigation,
+}: {
+  navigation: SimpleStackNavigation;
+}) => {
+  const headerHeight = useHeaderHeight();
+
+  return (
+    <ScrollView contentContainerStyle={{ paddingTop: headerHeight }}>
+      <View style={styles.buttons}>
+        <Button
+          mode="contained"
+          onPress={() => navigation.push('Article', { author: 'Babel fish' })}
+          style={styles.button}
+        >
+          Push article
+        </Button>
+        <Button
+          mode="outlined"
+          onPress={() => navigation.goBack()}
+          style={styles.button}
+        >
+          Go back
+        </Button>
+      </View>
+      <Albums scrollEnabled={false} />
+    </ScrollView>
+  );
+};
+
+const SimpleStack = createStackNavigator<SimpleStackParams>();
+
+type Props = Partial<React.ComponentProps<typeof SimpleStack.Navigator>> & {
+  navigation: StackNavigationProp<ParamListBase>;
+};
+
+export default function SimpleStackScreen({ navigation, ...rest }: Props) {
+  navigation.setOptions({
+    headerShown: false,
+  });
+
+  return (
+    <SimpleStack.Navigator {...rest}>
+      <SimpleStack.Screen
+        name="Article"
+        component={ArticleScreen}
+        options={({ route }) => ({
+          title: `Article by ${route.params?.author}`,
+          headerTintColor: '#fff',
+          headerStyle: { backgroundColor: '#ff005d' },
+          headerBackTitleVisible: false,
+          headerTitleAlign: 'center',
+          headerBackImage: ({ tintColor }) => (
+            <MaterialCommunityIcons
+              name="arrow-left-circle-outline"
+              color={tintColor}
+              size={24}
+              style={{ marginHorizontal: Platform.OS === 'ios' ? 8 : 0 }}
+            />
+          ),
+          headerRight: ({ tintColor }) => (
+            <Appbar.Action
+              color={tintColor}
+              icon="dots-horizontal-circle-outline"
+              onPress={() =>
+                Alert.alert(
+                  'Never gonna give you up!',
+                  'Never gonna let you down! Never gonna run around and desert you!'
+                )
+              }
+            />
+          ),
+        })}
+        initialParams={{ author: 'Gandalf' }}
+      />
+      <SimpleStack.Screen
+        name="Album"
+        component={AlbumsScreen}
+        options={{
+          title: 'Album',
+          headerBackTitle: 'Back',
+          headerTransparent: true,
+          headerBackground: () => (
+            <HeaderBackground style={{ backgroundColor: 'transparent' }}>
+              <BlurView
+                tint="light"
+                intensity={75}
+                style={StyleSheet.absoluteFill}
+              />
+            </HeaderBackground>
+          ),
+        }}
+      />
+    </SimpleStack.Navigator>
+  );
+}
+
+const styles = StyleSheet.create({
+  buttons: {
+    flexDirection: 'row',
+    padding: 8,
+  },
+  button: {
+    margin: 8,
+  },
+});

example/src/Shared/Albums.tsx

@@ -1,7 +1,13 @@
 /* eslint-disable import/no-commonjs */
 
 import * as React from 'react';
-import { Image, Dimensions, ScrollView, StyleSheet } from 'react-native';
+import {
+  Image,
+  Dimensions,
+  ScrollView,
+  StyleSheet,
+  ScrollViewProps,
+} from 'react-native';
 import { useScrollToTop } from '@react-navigation/native';
 
 const COVERS = [
@@ -15,7 +21,7 @@ const COVERS = [
   require('../../assets/album-art-8.jpg'),
 ];
 
-export default function Albums() {
+export default function Albums(props: Partial<ScrollViewProps>) {
   const ref = React.useRef<ScrollView>(null);
 
   useScrollToTop(ref);
@@ -25,6 +31,7 @@ export default function Albums() {
       ref={ref}
       style={styles.container}
       contentContainerStyle={styles.content}
+      {...props}
     >
       {COVERS.map((source, i) => (
         // eslint-disable-next-line react/no-array-index-key

example/src/Shared/Article.tsx

@@ -1,8 +1,15 @@
 import * as React from 'react';
-import { View, Text, Image, ScrollView, StyleSheet } from 'react-native';
+import {
+  View,
+  Text,
+  Image,
+  ScrollView,
+  StyleSheet,
+  ScrollViewProps,
+} from 'react-native';
 import { useScrollToTop, useTheme } from '@react-navigation/native';
 
-type Props = {
+type Props = Partial<ScrollViewProps> & {
   date?: string;
   author?: {
     name: string;
@@ -14,6 +21,7 @@ export default function Article({
   author = {
     name: 'Knowledge Bot',
   },
+  ...rest
 }: Props) {
   const ref = React.useRef<ScrollView>(null);
 
@@ -26,6 +34,7 @@ export default function Article({
       ref={ref}
       style={{ backgroundColor: colors.card }}
       contentContainerStyle={styles.content}
+      {...rest}
     >
       <View style={styles.author}>
         <Image

example/src/Shared/Chat.tsx

@@ -6,6 +6,7 @@ import {
   TextInput,
   ScrollView,
   StyleSheet,
+  ScrollViewProps,
 } from 'react-native';
 import { useScrollToTop, useTheme } from '@react-navigation/native';
 import Color from 'color';
@@ -17,7 +18,7 @@ const MESSAGES = [
   'make me a sandwich',
 ];
 
-export default function Chat() {
+export default function Chat(props: Partial<ScrollViewProps>) {
   const ref = React.useRef<ScrollView>(null);
 
   useScrollToTop(ref);
@@ -29,6 +30,7 @@ export default function Chat() {
       <ScrollView
         style={styles.inverted}
         contentContainerStyle={styles.content}
+        {...props}
       >
         {MESSAGES.map((text, i) => {
           const odd = i % 2;

example/src/Shared/NewsFeed.tsx

@@ -0,0 +1,146 @@
+import * as React from 'react';
+import {
+  View,
+  TextInput,
+  Image,
+  ScrollView,
+  StyleSheet,
+  ScrollViewProps,
+} from 'react-native';
+import { useScrollToTop, useTheme } from '@react-navigation/native';
+import {
+  Card,
+  Text,
+  Avatar,
+  Subheading,
+  IconButton,
+  Divider,
+} from 'react-native-paper';
+import Color from 'color';
+
+type Props = Partial<ScrollViewProps>;
+
+const Author = () => {
+  return (
+    <View style={[styles.row, styles.attribution]}>
+      <Avatar.Image source={require('../../assets/avatar-1.png')} size={32} />
+      <Subheading style={styles.author}>Joke bot</Subheading>
+    </View>
+  );
+};
+
+const Footer = () => {
+  return (
+    <View style={styles.row}>
+      <IconButton style={styles.icon} size={16} icon="heart-outline" />
+      <IconButton style={styles.icon} size={16} icon="comment-outline" />
+      <IconButton style={styles.icon} size={16} icon="share-outline" />
+    </View>
+  );
+};
+
+export default function NewsFeed(props: Props) {
+  const ref = React.useRef<ScrollView>(null);
+
+  useScrollToTop(ref);
+
+  const { colors } = useTheme();
+
+  return (
+    <ScrollView ref={ref} {...props}>
+      <Card style={styles.card}>
+        <TextInput
+          placeholder="What's on your mind?"
+          placeholderTextColor={Color(colors.text)
+            .alpha(0.5)
+            .rgb()
+            .string()}
+          style={styles.input}
+        />
+      </Card>
+      <Card style={styles.card}>
+        <Author />
+        <Card.Content style={styles.content}>
+          <Text>
+            If you aren&apos;t impressed with the picture of the first Black
+            Hole, you clearly don&apos;t understand the gravity of the
+            situation.
+          </Text>
+        </Card.Content>
+        <Divider />
+        <Footer />
+      </Card>
+      <Card style={styles.card}>
+        <Author />
+        <Card.Content style={styles.content}>
+          <Text>
+            I went to the zoo and I saw a baguette in a cage. I asked the
+            zookeeper about it and he said it was bread in captivity.
+          </Text>
+        </Card.Content>
+        <Image source={require('../../assets/book.jpg')} style={styles.cover} />
+        <Footer />
+      </Card>
+      <Card style={styles.card}>
+        <Author />
+        <Card.Content style={styles.content}>
+          <Text>Why didn&apos;t 4 ask 5 out? Because he was 2².</Text>
+        </Card.Content>
+        <Divider />
+        <Footer />
+      </Card>
+      <Card style={styles.card}>
+        <Author />
+        <Card.Content style={styles.content}>
+          <Text>
+            What did Master Yoda say when he first saw himself in 4k? HDMI.
+          </Text>
+        </Card.Content>
+        <Divider />
+        <Footer />
+      </Card>
+      <Card style={styles.card}>
+        <Author />
+        <Card.Content style={styles.content}>
+          <Text>
+            Someone broke into my house and stole 20% of my couch. Ouch!
+          </Text>
+        </Card.Content>
+        <Divider />
+        <Footer />
+      </Card>
+    </ScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  input: {
+    padding: 16,
+    backgroundColor: 'transparent',
+    margin: 0,
+  },
+  card: {
+    marginVertical: 8,
+    borderRadius: 0,
+  },
+  cover: {
+    height: 160,
+    borderRadius: 0,
+  },
+  content: {
+    marginBottom: 12,
+  },
+  attribution: {
+    margin: 12,
+  },
+  author: {
+    marginHorizontal: 8,
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  icon: {
+    flex: 1,
+  },
+});

example/src/Shared/SettingsItem.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { View } from 'react-native';
+import { Subheading, Switch } from 'react-native-paper';
+
+type Props = {
+  label: string;
+  value: boolean;
+  onValueChange: () => void;
+};
+
+export default function SettingsItem({ label, value, onValueChange }: Props) {
+  return (
+    <View
+      style={{
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingHorizontal: 16,
+        paddingVertical: 12,
+      }}
+    >
+      <Subheading>{label}</Subheading>
+      <Switch value={value} onValueChange={onValueChange} />
+    </View>
+  );
+}

example/src/index.tsx

@@ -1,21 +1,19 @@
 import * as React from 'react';
 import {
-  View,
   ScrollView,
   AsyncStorage,
   YellowBox,
   Platform,
   StatusBar,
+  I18nManager,
 } from 'react-native';
 import { MaterialIcons } from '@expo/vector-icons';
 import {
   Provider as PaperProvider,
   DefaultTheme as PaperLightTheme,
   DarkTheme as PaperDarkTheme,
-  Subheading,
   Appbar,
   List,
-  Switch,
   Divider,
 } from 'react-native-paper';
 import { Asset } from 'expo-asset';
@@ -42,11 +40,15 @@ import LinkingPrefixes from './LinkingPrefixes';
 import SimpleStack from './Screens/SimpleStack';
 import NativeStack from './Screens/NativeStack';
 import ModalPresentationStack from './Screens/ModalPresentationStack';
+import StackHeaderCustomization from './Screens/StackHeaderCustomization';
 import BottomTabs from './Screens/BottomTabs';
 import MaterialTopTabsScreen from './Screens/MaterialTopTabs';
 import MaterialBottomTabs from './Screens/MaterialBottomTabs';
+import DynamicTabs from './Screens/DynamicTabs';
 import AuthFlow from './Screens/AuthFlow';
 import CompatAPI from './Screens/CompatAPI';
+import SettingsItem from './Shared/SettingsItem';
+import { Updates } from 'expo';
 
 YellowBox.ignoreWarnings(['Require cycle:', 'Warning: Async Storage']);
 
@@ -68,6 +70,10 @@ const SCREENS = {
     title: 'Modal Presentation Stack',
     component: ModalPresentationStack,
   },
+  StackHeaderCustomization: {
+    title: 'Header Customization in Stack',
+    component: StackHeaderCustomization,
+  },
   BottomTabs: { title: 'Bottom Tabs', component: BottomTabs },
   MaterialTopTabs: {
     title: 'Material Top Tabs',
@@ -77,6 +83,10 @@ const SCREENS = {
     title: 'Material Bottom Tabs',
     component: MaterialBottomTabs,
   },
+  DynamicTabs: {
+    title: 'Dynamic Tabs',
+    component: DynamicTabs,
+  },
   AuthFlow: {
     title: 'Auth Flow',
     component: AuthFlow,
@@ -233,27 +243,27 @@ export default function App() {
                     <ScrollView
                       style={{ backgroundColor: theme.colors.background }}
                     >
-                      <View
-                        style={{
-                          flexDirection: 'row',
-                          alignItems: 'center',
-                          justifyContent: 'space-between',
-                          padding: 16,
+                      <SettingsItem
+                        label="Right to left"
+                        value={I18nManager.isRTL}
+                        onValueChange={() => {
+                          I18nManager.forceRTL(!I18nManager.isRTL);
+                          Updates.reloadFromCache();
                         }}
-                      >
-                        <Subheading>Dark theme</Subheading>
-                        <Switch
-                          value={theme.dark}
-                          onValueChange={() => {
-                            AsyncStorage.setItem(
-                              THEME_PERSISTENCE_KEY,
-                              theme.dark ? 'light' : 'dark'
-                            );
+                      />
+                      <Divider />
+                      <SettingsItem
+                        label="Dark theme"
+                        value={theme.dark}
+                        onValueChange={() => {
+                          AsyncStorage.setItem(
+                            THEME_PERSISTENCE_KEY,
+                            theme.dark ? 'light' : 'dark'
+                          );
 
-                            setTheme(t => (t.dark ? DefaultTheme : DarkTheme));
-                          }}
-                        />
-                      </View>
+                          setTheme(t => (t.dark ? DefaultTheme : DarkTheme));
+                        }}
+                      />
                       <Divider />
                       {(Object.keys(SCREENS) as (keyof typeof SCREENS)[]).map(
                         name => (

example/webpack.config.js

@@ -4,7 +4,7 @@ const createExpoWebpackConfigAsync = require('@expo/webpack-config');
 // eslint-disable-next-line import/no-extraneous-dependencies
 const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
 
-const node_modules = path.resolve(__dirname, 'node_modules');
+const node_modules = path.resolve(__dirname, '..', 'node_modules');
 const packages = path.resolve(__dirname, '..', 'packages');
 
 module.exports = async function(env, argv) {

package.json

@@ -34,6 +34,7 @@
     "codecov": "^3.6.1",
     "commitlint": "^8.3.4",
     "core-js": "^3.6.2",
+    "detox": "^15.0.0",
     "eslint": "^6.8.0",
     "eslint-config-satya164": "^3.1.5",
     "husky": "^4.0.1",
@@ -70,5 +71,27 @@
     "useTabs": false,
     "singleQuote": true,
     "trailingComma": "es5"
+  },
+  "detox": {
+    "test-runner": "jest",
+    "runner-config": "example/e2e/config.json",
+    "configurations": {
+      "ios.sim.debug": {
+        "binaryPath": "example/ios/build/Build/Products/Debug-iphonesimulator/ReactNavigationExample.app",
+        "build": "set -o pipefail; xcodebuild -workspace example/ios/ReactNavigationExample.xcworkspace -scheme ReactNavigationExample -configuration Debug -sdk iphonesimulator -derivedDataPath example/ios/build",
+        "type": "ios.simulator",
+        "device": {
+          "type": "iPhone 11 Pro"
+        }
+      },
+      "ios.sim.release": {
+        "binaryPath": "example/ios/build/Build/Products/Release-iphonesimulator/ReactNavigationExample.app",
+        "build": "export RCT_NO_LAUNCH_PACKAGER=true; set -o pipefail; xcodebuild -workspace example/ios/ReactNavigationExample.xcworkspace -scheme ReactNavigationExample -configuration Release -sdk iphonesimulator -derivedDataPath example/ios/build",
+        "type": "ios.simulator",
+        "device": {
+          "type": "iPhone 11 Pro"
+        }
+      }
+    }
   }
 }

packages/bottom-tabs/CHANGELOG.md

@@ -3,6 +3,60 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.0.0-alpha.39](https://github.com/react-navigation/navigation-ex/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.0.0-alpha.38...@react-navigation/bottom-tabs@5.0.0-alpha.39) (2020-01-24)
+
+
+### Bug Fixes
+
+* use layout instead of dimensions for determining tab bar layout ([f1fe951](https://github.com/react-navigation/navigation-ex/tree/master/packages/bottom-tabs/commit/f1fe951cf9d602e1b6d4932e3c6c77bbeaaec5c0))
+
+
+
+
+
+# [5.0.0-alpha.38](https://github.com/react-navigation/navigation-ex/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.0.0-alpha.37...@react-navigation/bottom-tabs@5.0.0-alpha.38) (2020-01-23)
+
+
+### Bug Fixes
+
+* don't use native driver on web ([0a982ee](https://github.com/react-navigation/navigation-ex/tree/master/packages/bottom-tabs/commit/0a982ee6984b24c0ba053a30223e255f3835e050))
+
+
+### Features
+
+* let the navigator specify if default can be prevented ([da67e13](https://github.com/react-navigation/navigation-ex/tree/master/packages/bottom-tabs/commit/da67e134d2157201360427d3c10da24f24cae7aa))
+
+
+
+
+
+# [5.0.0-alpha.37](https://github.com/react-navigation/navigation-ex/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.0.0-alpha.36...@react-navigation/bottom-tabs@5.0.0-alpha.37) (2020-01-14)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
+# [5.0.0-alpha.36](https://github.com/react-navigation/navigation-ex/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.0.0-alpha.35...@react-navigation/bottom-tabs@5.0.0-alpha.36) (2020-01-13)
+
+
+### Bug Fixes
+
+* make sure paths aren't aliased when building definitions ([65a5dac](https://github.com/react-navigation/navigation-ex/tree/master/packages/bottom-tabs/commit/65a5dac2bf887f4ba081ab15bd4c9870bb15697f)), closes [#265](https://github.com/react-navigation/navigation-ex/tree/master/packages/bottom-tabs/issues/265)
+
+
+
+
+
+# [5.0.0-alpha.35](https://github.com/react-navigation/navigation-ex/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.0.0-alpha.34...@react-navigation/bottom-tabs@5.0.0-alpha.35) (2020-01-13)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
 # [5.0.0-alpha.34](https://github.com/react-navigation/navigation-ex/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.0.0-alpha.32...@react-navigation/bottom-tabs@5.0.0-alpha.34) (2020-01-09)
 
 **Note:** Version bump only for package @react-navigation/bottom-tabs

packages/bottom-tabs/package.json

@@ -10,17 +10,18 @@
     "android",
     "tab"
   ],
-  "version": "5.0.0-alpha.34",
+  "version": "5.0.0-alpha.39",
   "license": "MIT",
   "repository": "https://github.com/react-navigation/navigation-ex/tree/master/packages/bottom-tabs",
   "main": "lib/commonjs/index.js",
   "react-native": "src/index.tsx",
   "module": "lib/module/index.js",
-  "types": "lib/typescript/bottom-tabs/src/index.d.ts",
+  "types": "lib/typescript/src/index.d.ts",
   "files": [
     "src",
     "lib"
   ],
+  "sideEffects": false,
   "publishConfig": {
     "access": "public"
   },
@@ -29,12 +30,12 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/routers": "^5.0.0-alpha.22",
+    "@react-navigation/routers": "^5.0.0-alpha.27",
     "color": "^3.1.2",
     "react-native-iphone-x-helper": "^1.2.1"
   },
   "devDependencies": {
-    "@react-native-community/bob": "^0.7.0",
+    "@react-native-community/bob": "^0.8.0",
     "@types/color": "^3.0.1",
     "@types/react": "^16.9.17",
     "@types/react-native": "^0.60.30",
@@ -56,7 +57,12 @@
     "targets": [
       "commonjs",
       "module",
-      "typescript"
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
     ]
   }
 }

packages/bottom-tabs/src/types.tsx

@@ -17,11 +17,11 @@ export type BottomTabNavigationEventMap = {
   /**
    * Event which fires on tapping on the tab in the tab bar.
    */
-  tabPress: undefined;
+  tabPress: { data: undefined; canPreventDefault: true };
   /**
    * Event which fires on long press on the tab in the tab bar.
    */
-  tabLongPress: undefined;
+  tabLongPress: { data: undefined };
 };
 
 export type LabelPosition = 'beside-icon' | 'below-icon';
@@ -176,14 +176,9 @@ export type BottomTabBarOptions = {
   tabStyle?: StyleProp<ViewStyle>;
   /**
    * Whether the label is renderd below the icon or beside the icon.
-   * When a function is passed, it receives the device dimensions to render the label differently.
    * By default, in `vertical` orinetation, label is rendered below and in `horizontal` orientation, it's renderd beside.
    */
-  labelPosition?:
-    | LabelPosition
-    | ((options: {
-        dimensions: { height: number; width: number };
-      }) => LabelPosition);
+  labelPosition?: LabelPosition;
   /**
    * Whether the label position should adapt to the orientation.
    */

packages/bottom-tabs/src/views/BottomTabBar.tsx

@@ -27,6 +27,8 @@ type Props = BottomTabBarProps & {
 const DEFAULT_TABBAR_HEIGHT = 50;
 const DEFAULT_MAX_TAB_ITEM_WIDTH = 125;
 
+const useNativeDriver = Platform.OS !== 'web';
+
 export default function BottomTabBar({
   state,
   navigation,
@@ -48,7 +50,10 @@ export default function BottomTabBar({
   const { colors } = useTheme();
 
   const [dimensions, setDimensions] = React.useState(Dimensions.get('window'));
-  const [layout, setLayout] = React.useState({ height: 0, width: 0 });
+  const [layout, setLayout] = React.useState({
+    height: 0,
+    width: dimensions.width,
+  });
   const [keyboardShown, setKeyboardShown] = React.useState(false);
 
   const [visible] = React.useState(() => new Animated.Value(0));
@@ -60,7 +65,7 @@ export default function BottomTabBar({
       Animated.timing(visible, {
         toValue: 0,
         duration: 200,
-        useNativeDriver: true,
+        useNativeDriver,
       }).start();
     }
   }, [keyboardShown, visible]);
@@ -76,7 +81,7 @@ export default function BottomTabBar({
       Animated.timing(visible, {
         toValue: 1,
         duration: 250,
-        useNativeDriver: true,
+        useNativeDriver,
       }).start(({ finished }) => {
         if (finished) {
           setKeyboardShown(false);
@@ -122,27 +127,15 @@ export default function BottomTabBar({
   };
 
   const shouldUseHorizontalLabels = () => {
-    const isLandscape = dimensions.width > dimensions.height;
-
     if (labelPosition) {
-      let position;
-
-      if (typeof labelPosition === 'string') {
-        position = labelPosition;
-      } else {
-        position = labelPosition({ dimensions });
-      }
-
-      if (position) {
-        return position === 'beside-icon';
-      }
+      return labelPosition === 'beside-icon';
     }
 
     if (!adaptive) {
       return false;
     }
 
-    if (dimensions.width >= 768) {
+    if (layout.width >= 768) {
       // Screen size matches a tablet
       let maxTabItemWidth = DEFAULT_MAX_TAB_ITEM_WIDTH;
 
@@ -156,8 +149,10 @@ export default function BottomTabBar({
         }
       }
 
-      return routes.length * maxTabItemWidth <= dimensions.width;
+      return routes.length * maxTabItemWidth <= layout.width;
     } else {
+      const isLandscape = dimensions.width > dimensions.height;
+
       return isLandscape;
     }
   };
@@ -205,6 +200,7 @@ export default function BottomTabBar({
                 const event = navigation.emit({
                   type: 'tabPress',
                   target: route.key,
+                  canPreventDefault: true,
                 });
 
                 if (!focused && !event.defaultPrevented) {

packages/bottom-tabs/tsconfig.build.json

@@ -0,0 +1,6 @@
+{
+  "extends": "./tsconfig",
+  "compilerOptions": {
+    "paths": {}
+  }
+}

packages/bottom-tabs/tsconfig.json

@@ -1,3 +1,11 @@
 {
-  "extends": "../../tsconfig"
+  "extends": "../../tsconfig",
+  "references": [
+    { "path": "../core" },
+    { "path": "../native" },
+    { "path": "../routers" }
+  ],
+  "compilerOptions": {
+    "outDir": "./lib/typescript"
+  }
 }

packages/compat/CHANGELOG.md

@@ -3,6 +3,53 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.0.0-alpha.28](https://github.com/react-navigation/navigation-ex/tree/master/packages/compat/compare/@react-navigation/compat@5.0.0-alpha.27...@react-navigation/compat@5.0.0-alpha.28) (2020-01-24)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
+# [5.0.0-alpha.27](https://github.com/react-navigation/navigation-ex/tree/master/packages/compat/compare/@react-navigation/compat@5.0.0-alpha.26...@react-navigation/compat@5.0.0-alpha.27) (2020-01-23)
+
+
+### Bug Fixes
+
+* ensure re-render on isFirstRouteInParent change in compat layer ([14ae373](https://github.com/react-navigation/navigation-ex/tree/master/packages/compat/commit/14ae3738cf46088e082bd1c60b9dcc6dacacd1bf))
+* improvements to the compat layer ([2a76dc4](https://github.com/react-navigation/navigation-ex/tree/master/packages/compat/commit/2a76dc4d3c4cc0365a3afcff6ac321145efed026))
+
+
+
+
+
+# [5.0.0-alpha.26](https://github.com/react-navigation/navigation-ex/tree/master/packages/compat/compare/@react-navigation/compat@5.0.0-alpha.25...@react-navigation/compat@5.0.0-alpha.26) (2020-01-14)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
+# [5.0.0-alpha.25](https://github.com/react-navigation/navigation-ex/tree/master/packages/compat/compare/@react-navigation/compat@5.0.0-alpha.24...@react-navigation/compat@5.0.0-alpha.25) (2020-01-13)
+
+
+### Bug Fixes
+
+* make sure paths aren't aliased when building definitions ([65a5dac](https://github.com/react-navigation/navigation-ex/tree/master/packages/compat/commit/65a5dac2bf887f4ba081ab15bd4c9870bb15697f)), closes [#265](https://github.com/react-navigation/navigation-ex/tree/master/packages/compat/issues/265)
+
+
+
+
+
+# [5.0.0-alpha.24](https://github.com/react-navigation/navigation-ex/tree/master/packages/compat/compare/@react-navigation/compat@5.0.0-alpha.23...@react-navigation/compat@5.0.0-alpha.24) (2020-01-13)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
 # [5.0.0-alpha.23](https://github.com/react-navigation/navigation-ex/tree/master/packages/compat/compare/@react-navigation/compat@5.0.0-alpha.21...@react-navigation/compat@5.0.0-alpha.23) (2020-01-09)
 
 **Note:** Version bump only for package @react-navigation/compat

packages/compat/package.json

@@ -1,17 +1,18 @@
 {
   "name": "@react-navigation/compat",
   "description": "Compatibility layer to write navigator definitions in static configuration format",
-  "version": "5.0.0-alpha.23",
+  "version": "5.0.0-alpha.28",
   "license": "MIT",
   "repository": "https://github.com/react-navigation/navigation-ex/tree/master/packages/compat",
   "main": "lib/commonjs/index.js",
   "react-native": "src/index.tsx",
   "module": "lib/module/index.js",
-  "types": "lib/typescript/compat/src/index.d.ts",
+  "types": "lib/typescript/src/index.d.ts",
   "files": [
     "src",
     "lib"
   ],
+  "sideEffects": false,
   "publishConfig": {
     "access": "public"
   },
@@ -20,7 +21,7 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/routers": "^5.0.0-alpha.22"
+    "@react-navigation/routers": "^5.0.0-alpha.27"
   },
   "devDependencies": {
     "@types/react": "^16.9.17",
@@ -37,7 +38,12 @@
     "targets": [
       "commonjs",
       "module",
-      "typescript"
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
     ]
   }
 }

packages/compat/src/CompatScreen.tsx

@@ -5,7 +5,7 @@ import {
   RouteProp,
 } from '@react-navigation/native';
 import ScreenPropsContext from './ScreenPropsContext';
-import createCompatNavigationProp from './createCompatNavigationProp';
+import useCompatNavigation from './useCompatNavigation';
 
 type Props<ParamList extends ParamListBase> = {
   navigation: NavigationProp<ParamList>;
@@ -16,12 +16,7 @@ type Props<ParamList extends ParamListBase> = {
 function ScreenComponent<ParamList extends ParamListBase>(
   props: Props<ParamList>
 ) {
-  const navigation = React.useMemo(
-    () =>
-      createCompatNavigationProp(props.navigation as any, props.route as any),
-    [props.navigation, props.route]
-  );
-
+  const navigation = useCompatNavigation();
   const screenProps = React.useContext(ScreenPropsContext);
 
   return <props.component navigation={navigation} screenProps={screenProps} />;

packages/compat/src/StackActions.tsx

@@ -19,7 +19,7 @@ export function replace({
   key?: string;
   newKey?: string;
   action?: never;
-}): CommonActions.Action {
+}): StackActionType {
   if (action !== undefined) {
     throw new Error(
       'Sub-actions are not supported for `replace`. Remove the `action` key from the options.'

packages/compat/src/createCompatNavigationProp.tsx

@@ -8,11 +8,17 @@ import {
 import * as helpers from './helpers';
 import { CompatNavigationProp } from './types';
 
-type EventName = 'willFocus' | 'willBlur' | 'didFocus' | 'didBlur' | 'refocus';
+type EventName =
+  | 'action'
+  | 'willFocus'
+  | 'willBlur'
+  | 'didFocus'
+  | 'didBlur'
+  | 'refocus';
 
-const focusSubscriptions = new WeakMap<() => void, () => void>();
-const blurSubscriptions = new WeakMap<() => void, () => void>();
-const refocusSubscriptions = new WeakMap<() => void, () => void>();
+// const focusSubscriptions = new WeakMap<() => void, () => void>();
+// const blurSubscriptions = new WeakMap<() => void, () => void>();
+// const refocusSubscriptions = new WeakMap<() => void, () => void>();
 
 export default function createCompatNavigationProp<
   NavigationPropType extends NavigationProp<ParamListBase>,
@@ -28,8 +34,17 @@ export default function createCompatNavigationProp<
         state?: NavigationState | PartialState<NavigationState>;
       })
     | NavigationState
-    | PartialState<NavigationState>
+    | PartialState<NavigationState>,
+  context: Record<string, any>,
+  isFirstRouteInParent?: boolean
 ): CompatNavigationProp<NavigationPropType> {
+  context.parent = context.parent || {};
+  context.subscriptions = context.subscriptions || {
+    didFocus: new Map<() => void, () => void>(),
+    didBlur: new Map<() => void, () => void>(),
+    refocus: new Map<() => void, () => void>(),
+  };
+
   return {
     ...navigation,
     ...Object.entries(helpers).reduce<{
@@ -61,7 +76,7 @@ export default function createCompatNavigationProp<
 
           // @ts-ignore
           unsubscribe = navigation.addListener('transitionEnd', listener);
-          focusSubscriptions.set(callback, unsubscribe);
+          context.subscriptions.didFocus.set(callback, unsubscribe);
           break;
         }
         case 'didBlur': {
@@ -73,7 +88,7 @@ export default function createCompatNavigationProp<
 
           // @ts-ignore
           unsubscribe = navigation.addListener('transitionEnd', listener);
-          blurSubscriptions.set(callback, unsubscribe);
+          context.subscriptions.didBlur.set(callback, unsubscribe);
           break;
         }
         case 'refocus': {
@@ -85,9 +100,11 @@ export default function createCompatNavigationProp<
 
           // @ts-ignore
           unsubscribe = navigation.addListener('tabPress', listener);
-          refocusSubscriptions.set(callback, unsubscribe);
+          context.subscriptions.refocus.set(callback, unsubscribe);
           break;
         }
+        case 'action':
+          throw new Error("Listening to 'action' events is not supported.");
         default:
           // @ts-ignore
           unsubscribe = navigation.addListener(type, callback);
@@ -100,6 +117,8 @@ export default function createCompatNavigationProp<
       return subscription;
     },
     removeListener(type: EventName, callback: () => void) {
+      context.subscriptions = context.subscriptions || {};
+
       switch (type) {
         case 'willFocus':
           navigation.removeListener('focus', callback);
@@ -108,20 +127,22 @@ export default function createCompatNavigationProp<
           navigation.removeListener('blur', callback);
           break;
         case 'didFocus': {
-          const unsubscribe = focusSubscriptions.get(callback);
+          const unsubscribe = context.subscriptions.didFocus.get(callback);
           unsubscribe?.();
           break;
         }
         case 'didBlur': {
-          const unsubscribe = blurSubscriptions.get(callback);
+          const unsubscribe = context.subscriptions.didBlur.get(callback);
           unsubscribe?.();
           break;
         }
         case 'refocus': {
-          const unsubscribe = refocusSubscriptions.get(callback);
+          const unsubscribe = context.subscriptions.refocus.get(callback);
           unsubscribe?.();
           break;
         }
+        case 'action':
+          throw new Error("Listening to 'action' events is not supported.");
         default:
           // @ts-ignore
           navigation.removeListener(type, callback);
@@ -174,6 +195,10 @@ export default function createCompatNavigationProp<
       return defaultValue;
     },
     isFirstRouteInParent(): boolean {
+      if (typeof isFirstRouteInParent === 'boolean') {
+        return isFirstRouteInParent;
+      }
+
       const { routes } = navigation.dangerouslyGetState();
 
       // @ts-ignore
@@ -185,7 +210,8 @@ export default function createCompatNavigationProp<
       if (parent) {
         return createCompatNavigationProp(
           parent,
-          navigation.dangerouslyGetState()
+          navigation.dangerouslyGetState(),
+          context.parent
         );
       }
 

packages/compat/src/createCompatNavigatorFactory.tsx

@@ -110,7 +110,7 @@ export default function createCompatNavigatorFactory<
                   ? {
                       navigation: createCompatNavigationProp<
                         NavigationPropType
-                      >(navigation, route),
+                      >(navigation, route, {}),
                       navigationOptions: defaultNavigationOptions || {},
                       screenProps,
                     }

packages/compat/src/useCompatNavigation.tsx

@@ -4,6 +4,7 @@ import {
   useRoute,
   NavigationProp,
   ParamListBase,
+  useNavigationState,
 } from '@react-navigation/native';
 import createCompatNavigationProp from './createCompatNavigationProp';
 import { CompatNavigationProp } from './types';
@@ -14,12 +15,20 @@ export default function useCompatNavigation<
   const navigation = useNavigation();
   const route = useRoute();
 
+  const isFirstRouteInParent = useNavigationState(
+    state => state.routes[0].key === route.key
+  );
+
+  const context = React.useRef<Record<string, any>>({});
+
   return React.useMemo(
     () =>
       createCompatNavigationProp(
         navigation,
-        route as any
+        route as any,
+        context.current,
+        isFirstRouteInParent
       ) as CompatNavigationProp<T>,
-    [navigation, route]
+    [isFirstRouteInParent, navigation, route]
   );
 }

packages/compat/tsconfig.build.json

@@ -0,0 +1,6 @@
+{
+  "extends": "./tsconfig",
+  "compilerOptions": {
+    "paths": {}
+  }
+}

packages/compat/tsconfig.json

@@ -1,3 +1,11 @@
 {
-  "extends": "../../tsconfig"
+  "extends": "../../tsconfig",
+  "references": [
+    { "path": "../core" },
+    { "path": "../native" },
+    { "path": "../routers" }
+  ],
+  "compilerOptions": {
+    "outDir": "./lib/typescript"
+  }
 }

packages/core/CHANGELOG.md

@@ -3,6 +3,71 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.0.0-alpha.37](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/compare/@react-navigation/core@5.0.0-alpha.36...@react-navigation/core@5.0.0-alpha.37) (2020-01-24)
+
+
+### Bug Fixes
+
+* add error message when trying to use v4 API with v5 ([179e807](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/commit/179e807a64a7d031d671c2c4b12edaee3c3440c5))
+* validate screen configs ([2f1f0af](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/commit/2f1f0af862ef8625da4c2aaf463d45fe17a4ac88))
+* warn if non-serializable values found in state ([5751e7f](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/commit/5751e7f97a1731a5c71862174dfd931b6ffe13e2))
+
+
+
+
+
+# [5.0.0-alpha.36](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/compare/@react-navigation/core@5.0.0-alpha.35...@react-navigation/core@5.0.0-alpha.36) (2020-01-23)
+
+
+### Bug Fixes
+
+* disallow canPreventDefault option if not present in types ([d9059b5](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/commit/d9059b56d8a89b39fec43d38a7b0514d41c0b550))
+* don't add ?if query params is empty ([3bf5ddd](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/commit/3bf5ddde2ac1ba45f1123752d37532175f18a3d9))
+* fix types for useFocusEffect ([23ab45a](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/commit/23ab45aceb72cc27ebfacdedfbf60d0c540fecfb)), closes [#270](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/issues/270)
+* make sure that we return correct value if selector changes ([6c2acbb](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/commit/6c2acbb304a9f11789b45a410b6c41911eca3947)), closes [/github.com/react-navigation/navigation-ex/pull/273#issuecomment-576581225](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/issues/issuecomment-576581225)
+* use protected for private value store ([ad4eaff](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/commit/ad4eaff1e99e4f9fca3a193764fd0f26efa41341))
+
+
+### Features
+
+* add useNavigationState hook ([32a2206](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/commit/32a2206513bc084d8da07187385d11db498f1e2a))
+* let the navigator specify if default can be prevented ([da67e13](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/commit/da67e134d2157201360427d3c10da24f24cae7aa))
+* support nested config in getPathFromState ([#266](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/issues/266)) ([1e53821](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/commit/1e53821d52be182369add07a86c72221c5dba53e))
+
+
+
+
+
+# [5.0.0-alpha.35](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/compare/@react-navigation/core@5.0.0-alpha.34...@react-navigation/core@5.0.0-alpha.35) (2020-01-14)
+
+
+### Bug Fixes
+
+* fix intellisense for CompositeNavigationProp ([a912323](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/commit/a912323c1dfa0c3564ca82c448a86f85d1658f7f))
+
+
+
+
+
+# [5.0.0-alpha.34](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/compare/@react-navigation/core@5.0.0-alpha.33...@react-navigation/core@5.0.0-alpha.34) (2020-01-13)
+
+
+### Bug Fixes
+
+* make sure paths aren't aliased when building definitions ([65a5dac](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/commit/65a5dac2bf887f4ba081ab15bd4c9870bb15697f)), closes [#265](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/issues/265)
+
+
+
+
+
+# [5.0.0-alpha.33](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/compare/@react-navigation/core@5.0.0-alpha.32...@react-navigation/core@5.0.0-alpha.33) (2020-01-13)
+
+**Note:** Version bump only for package @react-navigation/core
+
+
+
+
+
 # [5.0.0-alpha.32](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/compare/@react-navigation/core@5.0.0-alpha.30...@react-navigation/core@5.0.0-alpha.32) (2020-01-09)
 
 **Note:** Version bump only for package @react-navigation/core

packages/core/package.json

@@ -6,13 +6,13 @@
     "react-native",
     "react-navigation"
   ],
-  "version": "5.0.0-alpha.32",
+  "version": "5.0.0-alpha.37",
   "license": "MIT",
   "repository": "https://github.com/react-navigation/navigation-ex/tree/master/packages/core",
   "main": "lib/commonjs/index.js",
   "react-native": "src/index.tsx",
   "module": "lib/module/index.js",
-  "types": "lib/typescript/index.d.ts",
+  "types": "lib/typescript/src/index.d.ts",
   "files": [
     "src",
     "lib"
@@ -27,14 +27,17 @@
   "dependencies": {
     "escape-string-regexp": "^2.0.0",
     "query-string": "^6.9.0",
+    "react-is": "^16.12.0",
     "shortid": "^2.2.15",
     "use-subscription": "^1.3.0"
   },
   "devDependencies": {
     "@babel/core": "^7.7.7",
-    "@react-native-community/bob": "^0.7.0",
+    "@react-native-community/bob": "^0.8.0",
     "@types/react": "^16.9.17",
+    "@types/react-is": "^16.7.1",
     "@types/shortid": "^0.0.29",
+    "@types/use-subscription": "^1.0.0",
     "del-cli": "^3.0.0",
     "react": "~16.9.0",
     "react-native-testing-library": "^1.12.0",
@@ -50,7 +53,12 @@
     "targets": [
       "commonjs",
       "module",
-      "typescript"
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
     ]
   }
 }

packages/core/src/BaseRouter.tsx

@@ -1,4 +1,3 @@
-import shortid from 'shortid';
 import { CommonAction, NavigationState, PartialState } from './types';
 
 /**
@@ -11,35 +10,6 @@ const BaseRouter = {
     action: CommonAction
   ): State | PartialState<State> | null {
     switch (action.type) {
-      case 'REPLACE': {
-        const index = action.source
-          ? state.routes.findIndex(r => r.key === action.source)
-          : state.index;
-
-        if (index === -1) {
-          return null;
-        }
-
-        const { name, key, params } = action.payload;
-
-        if (!state.routeNames.includes(name)) {
-          return null;
-        }
-
-        return {
-          ...state,
-          routes: state.routes.map((route, i) =>
-            i === index
-              ? {
-                  key: key !== undefined ? key : `${name}-${shortid()}`,
-                  name,
-                  params,
-                }
-              : route
-          ),
-        };
-      }
-
       case 'SET_PARAMS': {
         const index = action.source
           ? state.routes.findIndex(r => r.key === action.source)

packages/core/src/CommonActions.tsx

@@ -14,12 +14,6 @@ export type Action =
       source?: string;
       target?: string;
     }
-  | {
-      type: 'REPLACE';
-      payload: { name: string; key?: string; params?: object };
-      source?: string;
-      target?: string;
-    }
   | {
       type: 'RESET';
       payload: PartialState<NavigationState>;
@@ -59,10 +53,6 @@ export function navigate(...args: any): Action {
   }
 }
 
-export function replace(name: string, params?: object): Action {
-  return { type: 'REPLACE', payload: { name, params } };
-}
-
 export function reset(state: PartialState<NavigationState>): Action {
   return { type: 'RESET', payload: state };
 }

packages/core/src/NavigationContainer.tsx

@@ -2,10 +2,10 @@ import * as React from 'react';
 import * as CommonActions from './CommonActions';
 import EnsureSingleNavigator from './EnsureSingleNavigator';
 import NavigationBuilderContext from './NavigationBuilderContext';
-import ResetRootContext from './ResetRootContext';
 import useFocusedListeners from './useFocusedListeners';
 import useDevTools from './useDevTools';
 import useStateGetters from './useStateGetters';
+import isSerializable from './isSerializable';
 
 import {
   Route,
@@ -45,6 +45,8 @@ export const NavigationStateContext = React.createContext<{
   },
 });
 
+let hasWarnedForSerialization = false;
+
 /**
  * Remove `key` and `routeNames` from the state objects recursively to get partial state.
  *
@@ -242,6 +244,20 @@ const Container = React.forwardRef(function NavigationContainer(
   );
 
   React.useEffect(() => {
+    if (process.env.NODE_ENV !== 'production') {
+      if (
+        state !== undefined &&
+        !isSerializable(state) &&
+        !hasWarnedForSerialization
+      ) {
+        hasWarnedForSerialization = true;
+
+        console.warn(
+          "We found non-serializable values in the navigation state, which can break usage such as persisting and restoring state. This might happen if you passed non-serializable values such as function, class instances etc. in params. If you need to use functions in your options, you can use 'navigation.setOptions' instead."
+        );
+      }
+    }
+
     if (skipTrackingRef.current) {
       skipTrackingRef.current = false;
     } else {
@@ -261,9 +277,7 @@ const Container = React.forwardRef(function NavigationContainer(
   return (
     <NavigationBuilderContext.Provider value={builderContext}>
       <NavigationStateContext.Provider value={context}>
-        <ResetRootContext.Provider value={resetRoot}>
-          <EnsureSingleNavigator>{children}</EnsureSingleNavigator>
-        </ResetRootContext.Provider>
+        <EnsureSingleNavigator>{children}</EnsureSingleNavigator>
       </NavigationStateContext.Provider>
     </NavigationBuilderContext.Provider>
   );

packages/core/src/ResetRootContext.tsx

@@ -1,15 +0,0 @@
-import * as React from 'react';
-import { NavigationState, PartialState } from './types';
-
-/**
- * Context which holds the method to reset root navigator state.
- */
-const ResetRootContext = React.createContext<
-  (state: PartialState<NavigationState> | NavigationState) => void
->(() => {
-  throw new Error(
-    "We couldn't find a way to reset root state. Have you wrapped your app with 'NavigationContainer'?"
-  );
-});
-
-export default ResetRootContext;

packages/core/src/__tests__/BaseRouter.test.tsx

@@ -16,64 +16,6 @@ const STATE = {
   routeNames: ['foo', 'bar', 'baz', 'qux'],
 };
 
-it('replaces focused screen with REPLACE', () => {
-  const result = BaseRouter.getStateForAction(
-    STATE,
-    CommonActions.replace('qux', { answer: 42 })
-  );
-
-  expect(result).toEqual({
-    stale: false,
-    type: 'test',
-    key: 'root',
-    index: 1,
-    routes: [
-      { key: 'foo', name: 'foo' },
-      { key: 'qux-test', name: 'qux', params: { answer: 42 } },
-      { key: 'baz', name: 'baz' },
-    ],
-    routeNames: ['foo', 'bar', 'baz', 'qux'],
-  });
-});
-
-it('replaces source screen with REPLACE', () => {
-  const result = BaseRouter.getStateForAction(STATE, {
-    ...CommonActions.replace('qux', { answer: 42 }),
-    source: 'baz',
-  });
-
-  expect(result).toEqual({
-    stale: false,
-    type: 'test',
-    key: 'root',
-    index: 1,
-    routes: [
-      { key: 'foo', name: 'foo' },
-      { key: 'bar', name: 'bar', params: { fruit: 'orange' } },
-      { key: 'qux-test', name: 'qux', params: { answer: 42 } },
-    ],
-    routeNames: ['foo', 'bar', 'baz', 'qux'],
-  });
-});
-
-it("doesn't handle REPLACE if source key isn't present", () => {
-  const result = BaseRouter.getStateForAction(STATE, {
-    ...CommonActions.replace('qux', { answer: 42 }),
-    source: 'magic',
-  });
-
-  expect(result).toBe(null);
-});
-
-it("doesn't handle REPLACE if screen to replace with isn't present", () => {
-  const result = BaseRouter.getStateForAction(
-    STATE,
-    CommonActions.replace('nonexistent', { answer: 42 })
-  );
-
-  expect(result).toBe(null);
-});
-
 it('sets params for the focused screen with SET_PARAMS', () => {
   const result = BaseRouter.getStateForAction(
     STATE,

packages/core/src/__tests__/createNavigatorFactory.test.tsx

@@ -0,0 +1,12 @@
+import createNavigatorFactory from '../createNavigatorFactory';
+
+it('throws descriptive error if an argument is passed', () => {
+  const createDummyNavigator = createNavigatorFactory(() => null);
+
+  expect(() => createDummyNavigator()).not.toThrowError();
+
+  // @ts-ignore
+  expect(() => createDummyNavigator({})).toThrowError(
+    "Creating a navigator doesn't take an argument."
+  );
+});

packages/core/src/__tests__/getPathFromState.test.tsx

@@ -1,89 +1,374 @@
 import getPathFromState from '../getPathFromState';
+import getStateFromPath from '../getStateFromPath';
 
 it('converts state to path string', () => {
-  expect(
-    getPathFromState({
-      routes: [
-        {
-          name: 'foo',
-          state: {
-            index: 1,
-            routes: [
-              { name: 'boo' },
-              {
-                name: 'bar',
-                params: { fruit: 'apple' },
-                state: {
-                  routes: [
-                    {
-                      name: 'baz qux',
-                      params: { author: 'jane', valid: true },
-                    },
-                  ],
-                },
+  const state = {
+    routes: [
+      {
+        name: 'foo',
+        state: {
+          index: 1,
+          routes: [
+            { name: 'boo' },
+            {
+              name: 'bar',
+              params: { fruit: 'apple' },
+              state: {
+                routes: [
+                  {
+                    name: 'baz qux',
+                    params: { author: 'jane', valid: true },
+                  },
+                ],
               },
-            ],
-          },
+            },
+          ],
         },
-      ],
-    })
-  ).toMatchInlineSnapshot(`"/foo/bar/baz%20qux?author=jane&valid=true"`);
+      },
+    ],
+  };
+
+  const path = '/foo/bar/baz%20qux?author=jane&valid=true';
+
+  expect(getPathFromState(state)).toBe(path);
+  expect(getPathFromState(getStateFromPath(path))).toBe(path);
 });
 
 it('converts state to path string with config', () => {
-  expect(
-    getPathFromState(
-      {
-        routes: [
-          {
-            name: 'Foo',
-            state: {
-              index: 1,
-              routes: [
-                { name: 'boo' },
-                {
-                  name: 'Bar',
-                  params: { fruit: 'apple', type: 'sweet', avaliable: false },
-                  state: {
-                    routes: [
-                      {
-                        name: 'Baz',
-                        params: { author: 'Jane', valid: true, id: 10 },
-                      },
-                    ],
-                  },
-                },
-              ],
-            },
-          },
-        ],
+  const path = '/few/bar/sweet/apple/baz/jane?id=x10&valid=true';
+  const config = {
+    Foo: 'few',
+    Bar: 'bar/:type/:fruit',
+    Baz: {
+      path: 'baz/:author',
+      parse: {
+        author: (author: string) => author.replace(/^\w/, c => c.toUpperCase()),
+        id: (id: string) => Number(id.replace(/^x/, '')),
+        valid: Boolean,
       },
+      stringify: {
+        author: (author: string) => author.toLowerCase(),
+        id: (id: number) => `x${id}`,
+      },
+    },
+  };
+
+  const state = {
+    routes: [
       {
-        Foo: 'few',
-        Bar: 'bar/:type/:fruit',
-        Baz: {
-          path: 'baz/:author',
-          stringify: {
-            author: author => author.toLowerCase(),
-            id: id => `x${id}`,
-          },
+        name: 'Foo',
+        state: {
+          index: 1,
+          routes: [
+            { name: 'boo' },
+            {
+              name: 'Bar',
+              params: { fruit: 'apple', type: 'sweet', avaliable: false },
+              state: {
+                routes: [
+                  {
+                    name: 'Baz',
+                    params: { author: 'Jane', valid: true, id: 10 },
+                  },
+                ],
+              },
+            },
+          ],
         },
-      }
-    )
-  ).toMatchInlineSnapshot(`"/few/bar/sweet/apple/baz/jane?id=x10&valid=true"`);
+      },
+    ],
+  };
+
+  expect(getPathFromState(state, config)).toBe(path);
+  expect(getPathFromState(getStateFromPath(path, config), config)).toBe(path);
 });
 
 it('handles route without param', () => {
-  expect(
-    getPathFromState({
-      routes: [
-        {
-          name: 'foo',
-          state: {
-            routes: [{ name: 'bar' }],
-          },
+  const path = '/foo/bar';
+  const state = {
+    routes: [
+      {
+        name: 'foo',
+        state: {
+          routes: [{ name: 'bar' }],
         },
-      ],
-    })
-  ).toBe('/foo/bar');
+      },
+    ],
+  };
+
+  expect(getPathFromState(state)).toBe(path);
+  expect(getPathFromState(getStateFromPath(path))).toBe(path);
+});
+
+it("doesn't add query param for empty params", () => {
+  const path = '/foo';
+  const state = {
+    routes: [
+      {
+        name: 'foo',
+        params: {},
+      },
+    ],
+  };
+
+  expect(getPathFromState(state)).toBe(path);
+  expect(getPathFromState(getStateFromPath(path))).toBe(path);
+});
+
+it('handles state with config with nested screens', () => {
+  const path = '/few/bar/sweet/apple/baz/jane?answer=42&count=10&valid=true';
+  const config = {
+    Foo: {
+      Foe: 'few',
+    },
+    Bar: 'bar/:type/:fruit',
+    Baz: {
+      path: 'baz/:author',
+      parse: {
+        author: (author: string) => author.replace(/^\w/, c => c.toUpperCase()),
+        count: Number,
+        valid: Boolean,
+      },
+      stringify: {
+        author: (author: string) => author.toLowerCase(),
+        id: (id: number) => `x${id}`,
+        unknown: (_: unknown) => 'x',
+      },
+    },
+  };
+
+  const state = {
+    routes: [
+      {
+        name: 'Foo',
+        state: {
+          routes: [
+            {
+              name: 'Foe',
+              state: {
+                routes: [
+                  {
+                    name: 'Bar',
+                    params: { fruit: 'apple', type: 'sweet' },
+                    state: {
+                      routes: [
+                        {
+                          name: 'Baz',
+                          params: {
+                            author: 'Jane',
+                            count: '10',
+                            answer: '42',
+                            valid: true,
+                          },
+                        },
+                      ],
+                    },
+                  },
+                ],
+              },
+            },
+          ],
+        },
+      },
+    ],
+  };
+
+  expect(getPathFromState(state, config)).toBe(path);
+  expect(getPathFromState(getStateFromPath(path, config), config)).toBe(path);
+});
+
+it('handles state with config with nested screens and unused configs', () => {
+  const path = '/few/baz/jane?answer=42&count=10&valid=true';
+  const config = {
+    Foo: {
+      Foe: 'few',
+    },
+    Baz: {
+      path: 'baz/:author',
+      parse: {
+        author: (author: string) => author.replace(/^\w/, c => c.toUpperCase()),
+        count: Number,
+        valid: Boolean,
+      },
+      stringify: {
+        author: (author: string) => author.replace(/^\w/, c => c.toLowerCase()),
+        unknown: (_: unknown) => 'x',
+      },
+    },
+  };
+
+  const state = {
+    routes: [
+      {
+        name: 'Foo',
+        state: {
+          routes: [
+            {
+              name: 'Foe',
+              state: {
+                routes: [
+                  {
+                    name: 'Baz',
+                    params: {
+                      author: 'Jane',
+                      count: 10,
+                      answer: '42',
+                      valid: true,
+                    },
+                  },
+                ],
+              },
+            },
+          ],
+        },
+      },
+    ],
+  };
+
+  expect(getPathFromState(state, config)).toBe(path);
+  expect(getPathFromState(getStateFromPath(path, config), config)).toBe(path);
+});
+
+it('handles nested object with stringify in it', () => {
+  const path = '/bar/sweet/apple/few/bis/jane?answer=42&count=10&valid=true';
+  const config = {
+    Foo: {
+      Foe: 'few',
+    },
+    Bar: 'bar/:type/:fruit',
+    Baz: {
+      Bos: 'bos',
+      Bis: {
+        path: 'bis/:author',
+        stringify: {
+          author: (author: string) =>
+            author.replace(/^\w/, c => c.toLowerCase()),
+        },
+      },
+    },
+  };
+
+  const state = {
+    routes: [
+      {
+        name: 'Bar',
+        params: { fruit: 'apple', type: 'sweet' },
+        state: {
+          routes: [
+            {
+              name: 'Foo',
+              state: {
+                routes: [
+                  {
+                    name: 'Foe',
+                    state: {
+                      routes: [
+                        {
+                          name: 'Baz',
+                          state: {
+                            routes: [
+                              {
+                                name: 'Bis',
+                                params: {
+                                  author: 'Jane',
+                                  count: 10,
+                                  answer: '42',
+                                  valid: true,
+                                },
+                              },
+                            ],
+                          },
+                        },
+                      ],
+                    },
+                  },
+                ],
+              },
+            },
+          ],
+        },
+      },
+    ],
+  };
+
+  expect(getPathFromState(state, config)).toBe(path);
+  expect(getPathFromState(getStateFromPath(path))).toBe(path);
+});
+
+it('handles nested object for second route depth', () => {
+  const path = '/baz';
+  const config = {
+    Foo: {
+      path: 'foo',
+      Foe: 'foe',
+      Bar: {
+        Baz: 'baz',
+      },
+    },
+  };
+
+  const state = {
+    routes: [
+      {
+        name: 'Foo',
+        state: {
+          routes: [
+            {
+              name: 'Bar',
+              state: {
+                routes: [{ name: 'Baz' }],
+              },
+            },
+          ],
+        },
+      },
+    ],
+  };
+
+  expect(getPathFromState(state, config)).toBe(path);
+  expect(getPathFromState(getStateFromPath(path))).toBe(path);
+});
+
+it('handles nested object for second route depth and and path and stringify in roots', () => {
+  const path = '/baz';
+  const config = {
+    Foo: {
+      path: 'foo/:id',
+      stringify: {
+        id: (id: number) => `id=${id}`,
+      },
+      Foe: 'foe',
+      Bar: {
+        path: 'bar/:id',
+        stringify: {
+          id: (id: number) => `id=${id}`,
+        },
+        parse: {
+          id: Number,
+        },
+        Baz: 'baz',
+      },
+    },
+  };
+
+  const state = {
+    routes: [
+      {
+        name: 'Foo',
+        state: {
+          routes: [
+            {
+              name: 'Bar',
+              state: {
+                routes: [{ name: 'Baz' }],
+              },
+            },
+          ],
+        },
+      },
+    ],
+  };
+
+  expect(getPathFromState(state, config)).toBe(path);
+  expect(getPathFromState(getStateFromPath(path))).toBe(path);
 });

packages/core/src/__tests__/getStateFromPath.test.tsx

@@ -1,9 +1,13 @@
 import getStateFromPath from '../getStateFromPath';
+import getPathFromState from '../getPathFromState';
+
+it('returns undefined for invalid path', () => {
+  expect(getStateFromPath('//')).toBe(undefined);
+});
 
 it('converts path string to initial state', () => {
-  expect(
-    getStateFromPath('foo/bar/baz%20qux?author=jane%20%26%20co&valid=true')
-  ).toEqual({
+  const path = 'foo/bar/baz%20qux?author=jane%20%26%20co&valid=true';
+  const state = {
     routes: [
       {
         name: 'foo',
@@ -24,28 +28,31 @@ it('converts path string to initial state', () => {
         },
       },
     ],
-  });
+  };
+
+  expect(getStateFromPath(path)).toEqual(state);
+  expect(getStateFromPath(getPathFromState(state))).toEqual(state);
 });
 
 it('converts path string to initial state with config', () => {
-  expect(
-    getStateFromPath(
-      '/few/bar/sweet/apple/baz/jane?count=10&answer=42&valid=true',
-      {
-        Foo: 'few',
-        Bar: 'bar/:type/:fruit',
-        Baz: {
-          path: 'baz/:author',
-          parse: {
-            author: (author: string) =>
-              author.replace(/^\w/, c => c.toUpperCase()),
-            count: Number,
-            valid: Boolean,
-          },
-        },
-      }
-    )
-  ).toEqual({
+  const path = '/few/bar/sweet/apple/baz/jane?count=10&answer=42&valid=true';
+  const config = {
+    Foo: 'few',
+    Bar: 'bar/:type/:fruit',
+    Baz: {
+      path: 'baz/:author',
+      parse: {
+        author: (author: string) => author.replace(/^\w/, c => c.toUpperCase()),
+        count: Number,
+        valid: Boolean,
+      },
+      stringify: {
+        author: (author: string) => author.toLowerCase(),
+      },
+    },
+  };
+
+  const state = {
     routes: [
       {
         name: 'Foo',
@@ -72,7 +79,12 @@ it('converts path string to initial state with config', () => {
         },
       },
     ],
-  });
+  };
+
+  expect(getStateFromPath(path, config)).toEqual(state);
+  expect(getStateFromPath(getPathFromState(state, config), config)).toEqual(
+    state
+  );
 });
 
 it('handles leading slash when converting', () => {
@@ -112,7 +124,8 @@ it('handles ending slash when converting', () => {
 });
 
 it('handles route without param', () => {
-  expect(getStateFromPath('foo/bar')).toEqual({
+  const path = 'foo/bar';
+  const state = {
     routes: [
       {
         name: 'foo',
@@ -121,34 +134,33 @@ it('handles route without param', () => {
         },
       },
     ],
-  });
-});
+  };
 
-it('returns undefined for invalid path', () => {
-  expect(getStateFromPath('//')).toBe(undefined);
+  expect(getStateFromPath(path)).toEqual(state);
+  expect(getStateFromPath(getPathFromState(state))).toEqual(state);
 });
 
 it('converts path string to initial state with config with nested screens', () => {
-  expect(
-    getStateFromPath(
-      '/few/bar/sweet/apple/baz/jane?count=10&answer=42&valid=true',
-      {
-        Foo: {
-          Foe: 'few',
-        },
-        Bar: 'bar/:type/:fruit',
-        Baz: {
-          path: 'baz/:author',
-          parse: {
-            author: (author: string) =>
-              author.replace(/^\w/, c => c.toUpperCase()),
-            count: Number,
-            valid: Boolean,
-          },
-        },
-      }
-    )
-  ).toEqual({
+  const path = '/few/bar/sweet/apple/baz/jane?count=10&answer=42&valid=true';
+  const config = {
+    Foo: {
+      Foe: 'few',
+    },
+    Bar: 'bar/:type/:fruit',
+    Baz: {
+      path: 'baz/:author',
+      parse: {
+        author: (author: string) => author.replace(/^\w/, c => c.toUpperCase()),
+        count: Number,
+        valid: Boolean,
+      },
+      stringify: {
+        author: (author: string) => author.toLowerCase(),
+      },
+    },
+  };
+
+  const state = {
     routes: [
       {
         name: 'Foo',
@@ -182,26 +194,32 @@ it('converts path string to initial state with config with nested screens', () =
         },
       },
     ],
-  });
+  };
+
+  expect(getStateFromPath(path, config)).toEqual(state);
+  expect(getStateFromPath(getPathFromState(state, config), config)).toEqual(
+    state
+  );
 });
 
-it('converts path string to initial state with config with nested screens and unused configs', () => {
-  expect(
-    getStateFromPath('/few/baz/jane?count=10&answer=42&valid=true', {
-      Foo: {
-        Foe: 'few',
+it('converts path string to initial state with config with nested screens and unused parse functions', () => {
+  const path = '/few/baz/jane?count=10&answer=42&valid=true';
+  const config = {
+    Foo: {
+      Foe: 'few',
+    },
+    Baz: {
+      path: 'baz/:author',
+      parse: {
+        author: (author: string) => author.replace(/^\w/, c => c.toUpperCase()),
+        count: Number,
+        valid: Boolean,
+        id: Boolean,
       },
-      Baz: {
-        path: 'baz/:author',
-        parse: {
-          author: (author: string) =>
-            author.replace(/^\w/, c => c.toUpperCase()),
-          count: Number,
-          valid: Boolean,
-        },
-      },
-    })
-  ).toEqual({
+    },
+  };
+
+  const state = {
     routes: [
       {
         name: 'Foo',
@@ -227,32 +245,36 @@ it('converts path string to initial state with config with nested screens and un
         },
       },
     ],
-  });
+  };
+
+  expect(getStateFromPath(path, config)).toEqual(state);
+  expect(getStateFromPath(getPathFromState(state, config), config)).toEqual(
+    state
+  );
 });
 
-it('handles parse in nested object with parse in it', () => {
-  expect(
-    getStateFromPath(
-      '/bar/sweet/apple/few/bis/jane?count=10&answer=42&valid=true',
-      {
-        Foo: {
-          Foe: 'few',
+it('handles nested object with unused configs and with parse in it', () => {
+  const path = '/bar/sweet/apple/few/bis/jane?count=10&answer=42&valid=true';
+  const config = {
+    Foo: {
+      Foe: 'few',
+    },
+    Bar: 'bar/:type/:fruit',
+    Baz: {
+      Bos: 'bos',
+      Bis: {
+        path: 'bis/:author',
+        parse: {
+          author: (author: string) =>
+            author.replace(/^\w/, c => c.toUpperCase()),
+          count: Number,
+          valid: Boolean,
         },
-        Bar: 'bar/:type/:fruit',
-        Baz: {
-          Bis: {
-            path: 'bis/:author',
-            parse: {
-              author: (author: string) =>
-                author.replace(/^\w/, c => c.toUpperCase()),
-              count: Number,
-              valid: Boolean,
-            },
-          },
-        },
-      }
-    )
-  ).toEqual({
+      },
+    },
+  };
+
+  const state = {
     routes: [
       {
         name: 'Bar',
@@ -293,21 +315,27 @@ it('handles parse in nested object with parse in it', () => {
         },
       },
     ],
-  });
+  };
+
+  expect(getStateFromPath(path, config)).toEqual(state);
+  expect(getStateFromPath(getPathFromState(state, config), config)).toEqual(
+    state
+  );
 });
 
 it('handles parse in nested object for second route depth', () => {
-  expect(
-    getStateFromPath('/baz', {
-      Foo: {
-        path: 'foo',
-        Foe: 'foe',
-        Bar: {
-          Baz: 'baz',
-        },
+  const path = '/baz';
+  const config = {
+    Foo: {
+      path: 'foo',
+      Foe: 'foe',
+      Bar: {
+        Baz: 'baz',
       },
-    })
-  ).toEqual({
+    },
+  };
+
+  const state = {
     routes: [
       {
         name: 'Foo',
@@ -323,28 +351,40 @@ it('handles parse in nested object for second route depth', () => {
         },
       },
     ],
-  });
+  };
+
+  expect(getStateFromPath(path, config)).toEqual(state);
+  expect(getStateFromPath(getPathFromState(state, config), config)).toEqual(
+    state
+  );
 });
 
 it('handles parse in nested object for second route depth and and path and parse in roots', () => {
-  expect(
-    getStateFromPath('/baz', {
-      Foo: {
-        path: 'foo/:id',
+  const path = '/baz';
+  const config = {
+    Foo: {
+      path: 'foo/:id',
+      parse: {
+        id: Number,
+      },
+      stringify: {
+        id: (id: number) => `id=${id}`,
+      },
+      Foe: 'foe',
+      Bar: {
+        path: 'bar/:id',
         parse: {
           id: Number,
         },
-        Foe: 'foe',
-        Bar: {
-          path: 'bar/:id',
-          parse: {
-            id: Number,
-          },
-          Baz: 'baz',
+        stringify: {
+          id: (id: number) => `id=${id}`,
         },
+        Baz: 'baz',
       },
-    })
-  ).toEqual({
+    },
+  };
+
+  const state = {
     routes: [
       {
         name: 'Foo',
@@ -360,5 +400,10 @@ it('handles parse in nested object for second route depth and and path and parse
         },
       },
     ],
-  });
+  };
+
+  expect(getStateFromPath(path, config)).toEqual(state);
+  expect(getStateFromPath(getPathFromState(state, config), config)).toEqual(
+    state
+  );
 });

packages/core/src/__tests__/index.test.tsx

@@ -936,3 +936,100 @@ it('switches rendered navigators', () => {
     'Another navigator is already registered for this container.'
   );
 });
+
+it('throws if both children and component are passed', () => {
+  const TestNavigator = (props: any) => {
+    useNavigationBuilder(MockRouter, props);
+    return null;
+  };
+
+  const element = (
+    <NavigationContainer>
+      <TestNavigator>
+        <Screen name="foo" component={jest.fn()}>
+          {jest.fn()}
+        </Screen>
+      </TestNavigator>
+    </NavigationContainer>
+  );
+
+  expect(() => render(element).update(element)).toThrowError(
+    "We got both 'component' and 'children' props for 'Screen'. You must pass only one of them."
+  );
+});
+
+it('throws descriptive error for undefined screen component', () => {
+  const TestNavigator = (props: any) => {
+    useNavigationBuilder(MockRouter, props);
+    return null;
+  };
+
+  const element = (
+    <NavigationContainer>
+      <TestNavigator>
+        <Screen name="foo" component={undefined as any} />
+      </TestNavigator>
+    </NavigationContainer>
+  );
+
+  expect(() => render(element).update(element)).toThrowError(
+    "We couldn't find a 'component' or 'children' prop for 'Screen'"
+  );
+});
+
+it('throws descriptive error for invalid screen component', () => {
+  const TestNavigator = (props: any) => {
+    useNavigationBuilder(MockRouter, props);
+    return null;
+  };
+
+  const element = (
+    <NavigationContainer>
+      <TestNavigator>
+        <Screen name="foo" component={{} as any} />
+      </TestNavigator>
+    </NavigationContainer>
+  );
+
+  expect(() => render(element).update(element)).toThrowError(
+    "We got an invalid value for 'component' prop for 'Screen'. It must be a a valid React Component."
+  );
+});
+
+it('throws descriptive error for invalid children', () => {
+  const TestNavigator = (props: any) => {
+    useNavigationBuilder(MockRouter, props);
+    return null;
+  };
+
+  const element = (
+    <NavigationContainer>
+      <TestNavigator>
+        <Screen name="foo">{[] as any}</Screen>
+      </TestNavigator>
+    </NavigationContainer>
+  );
+
+  expect(() => render(element).update(element)).toThrowError(
+    "We got an invalid value for 'children' prop for 'Screen'. It must be a function returning a React Element."
+  );
+});
+
+it("doesn't throw if children is null", () => {
+  const TestNavigator = (props: any) => {
+    useNavigationBuilder(MockRouter, props);
+    return null;
+  };
+
+  const element = (
+    <NavigationContainer>
+      <TestNavigator>
+        <Screen name="foo" component={jest.fn()}>
+          {null as any}
+        </Screen>
+      </TestNavigator>
+    </NavigationContainer>
+  );
+
+  expect(() => render(element).update(element)).not.toThrowError();
+});

packages/core/src/__tests__/useEventEmitter.test.tsx

@@ -391,6 +391,8 @@ it('fires custom events', () => {
   expect(thirdCallback).toBeCalledTimes(1);
   expect(thirdCallback.mock.calls[0][0].type).toBe('someSuperCoolEvent');
   expect(thirdCallback.mock.calls[0][0].data).toBe(42);
+  expect(thirdCallback.mock.calls[0][0].defaultPrevented).toBe(undefined);
+  expect(thirdCallback.mock.calls[0][0].preventDefault).toBe(undefined);
 
   act(() => {
     ref.current.navigation.emit({ type: eventName });
@@ -400,3 +402,62 @@ it('fires custom events', () => {
   expect(secondCallback).toBeCalledTimes(1);
   expect(thirdCallback).toBeCalledTimes(2);
 });
+
+it('has option to prevent default', () => {
+  expect.assertions(5);
+
+  const eventName = 'someSuperCoolEvent';
+
+  const TestNavigator = React.forwardRef((props: any, ref: any): any => {
+    const { state, navigation, descriptors } = useNavigationBuilder(
+      MockRouter,
+      props
+    );
+
+    React.useImperativeHandle(ref, () => ({ navigation, state }), [
+      navigation,
+      state,
+    ]);
+
+    return state.routes.map(route => descriptors[route.key].render());
+  });
+
+  const callback = (e: any) => {
+    expect(e.type).toBe('someSuperCoolEvent');
+    expect(e.data).toBe(42);
+    expect(e.defaultPrevented).toBe(false);
+    expect(e.preventDefault).not.toBe(undefined);
+
+    e.preventDefault();
+
+    expect(e.defaultPrevented).toBe(true);
+  };
+
+  const Test = ({ navigation }: any) => {
+    React.useEffect(() => navigation.addListener(eventName, callback), [
+      navigation,
+    ]);
+
+    return null;
+  };
+
+  const ref = React.createRef<any>();
+
+  const element = (
+    <NavigationContainer>
+      <TestNavigator ref={ref}>
+        <Screen name="first" component={Test} />
+      </TestNavigator>
+    </NavigationContainer>
+  );
+
+  render(element);
+
+  act(() => {
+    ref.current.navigation.emit({
+      type: eventName,
+      data: 42,
+      canPreventDefault: true,
+    });
+  });
+});

packages/core/src/__tests__/useNavigationCache.test.tsx

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import { render } from 'react-native-testing-library';
+import useEventEmitter from '../useEventEmitter';
+import useNavigationCache from '../useNavigationCache';
+import MockRouter, { MockRouterKey } from './__fixtures__/MockRouter';
+
+beforeEach(() => (MockRouterKey.current = 0));
+
+it('preserves reference for navigation objects', () => {
+  expect.assertions(2);
+
+  const state = {
+    type: 'tab',
+    stale: false as const,
+    index: 1,
+    key: 'State',
+    routeNames: ['Foo', 'Bar'],
+    routes: [
+      { key: 'Foo', name: 'Foo' },
+      { key: 'Bar', name: 'Bar' },
+    ],
+  };
+
+  const getState = () => state;
+  const navigation = {} as any;
+  const setOptions = (() => {}) as any;
+  const router = MockRouter({});
+
+  const Test = () => {
+    const previous = React.useRef<any>();
+
+    const emitter = useEventEmitter();
+    const navigations = useNavigationCache({
+      state,
+      getState,
+      navigation,
+      setOptions,
+      router,
+      emitter,
+    });
+
+    if (previous.current) {
+      Object.keys(navigations).forEach(key => {
+        expect(navigations[key]).toBe(previous.current[key]);
+      });
+    }
+
+    React.useEffect(() => {
+      previous.current = navigations;
+    });
+
+    return null;
+  };
+
+  const root = render(<Test />);
+
+  root.update(<Test />);
+});

packages/core/src/__tests__/useNavigationState.test.tsx

@@ -0,0 +1,156 @@
+import * as React from 'react';
+import { render, act } from 'react-native-testing-library';
+import useNavigationBuilder from '../useNavigationBuilder';
+import useNavigationState from '../useNavigationState';
+import NavigationContainer from '../NavigationContainer';
+import Screen from '../Screen';
+import MockRouter from './__fixtures__/MockRouter';
+import { NavigationState } from '../types';
+
+it('gets the current navigation state', () => {
+  const TestNavigator = (props: any): any => {
+    const { state, descriptors } = useNavigationBuilder(MockRouter, props);
+
+    return state.routes.map(route => descriptors[route.key].render());
+  };
+
+  const callback = jest.fn();
+
+  const Test = () => {
+    const state = useNavigationState(state => state);
+
+    callback(state);
+
+    return null;
+  };
+
+  const navigation = React.createRef<any>();
+
+  const element = (
+    <NavigationContainer ref={navigation}>
+      <TestNavigator>
+        <Screen name="first" component={Test} />
+        <Screen name="second">{() => null}</Screen>
+        <Screen name="third">{() => null}</Screen>
+      </TestNavigator>
+    </NavigationContainer>
+  );
+
+  render(element);
+
+  expect(callback).toBeCalledTimes(1);
+  expect(callback.mock.calls[0][0].index).toBe(0);
+
+  act(() => navigation.current.navigate('second'));
+
+  expect(callback).toBeCalledTimes(2);
+  expect(callback.mock.calls[1][0].index).toBe(1);
+
+  act(() => navigation.current.navigate('third'));
+
+  expect(callback).toBeCalledTimes(3);
+  expect(callback.mock.calls[2][0].index).toBe(2);
+
+  act(() => navigation.current.navigate('second', { answer: 42 }));
+
+  expect(callback).toBeCalledTimes(4);
+  expect(callback.mock.calls[3][0].index).toBe(1);
+  expect(callback.mock.calls[3][0].routes[1].params).toEqual({ answer: 42 });
+});
+
+it('gets the current navigation state with selector', () => {
+  const TestNavigator = (props: any): any => {
+    const { state, descriptors } = useNavigationBuilder(MockRouter, props);
+
+    return state.routes.map(route => descriptors[route.key].render());
+  };
+
+  const callback = jest.fn();
+
+  const Test = () => {
+    const index = useNavigationState(state => state.index);
+
+    callback(index);
+
+    return null;
+  };
+
+  const navigation = React.createRef<any>();
+
+  const element = (
+    <NavigationContainer ref={navigation}>
+      <TestNavigator>
+        <Screen name="first" component={Test} />
+        <Screen name="second">{() => null}</Screen>
+        <Screen name="third">{() => null}</Screen>
+      </TestNavigator>
+    </NavigationContainer>
+  );
+
+  render(element);
+
+  expect(callback).toBeCalledTimes(1);
+  expect(callback.mock.calls[0][0]).toBe(0);
+
+  act(() => navigation.current.navigate('second'));
+
+  expect(callback).toBeCalledTimes(2);
+  expect(callback.mock.calls[1][0]).toBe(1);
+
+  act(() => navigation.current.navigate('third'));
+
+  expect(callback).toBeCalledTimes(3);
+  expect(callback.mock.calls[1][0]).toBe(1);
+
+  act(() => navigation.current.navigate('second'));
+
+  expect(callback).toBeCalledTimes(4);
+  expect(callback.mock.calls[3][0]).toBe(1);
+});
+
+it('gets the correct value if selector changes', () => {
+  const TestNavigator = (props: any): any => {
+    const { state, descriptors } = useNavigationBuilder(MockRouter, props);
+
+    return state.routes.map(route => descriptors[route.key].render());
+  };
+
+  const callback = jest.fn();
+
+  const SelectorContext = React.createContext<any>(null);
+
+  const Test = () => {
+    const selector = React.useContext(SelectorContext);
+    const result = useNavigationState(selector);
+
+    callback(result);
+
+    return null;
+  };
+
+  const navigation = React.createRef<any>();
+
+  const App = ({ selector }: { selector: (state: NavigationState) => any }) => {
+    return (
+      <SelectorContext.Provider value={selector}>
+        <NavigationContainer ref={navigation}>
+          <TestNavigator>
+            <Screen name="first" component={Test} />
+            <Screen name="second">{() => null}</Screen>
+            <Screen name="third">{() => null}</Screen>
+          </TestNavigator>
+        </NavigationContainer>
+      </SelectorContext.Provider>
+    );
+  };
+
+  const root = render(<App selector={state => state.index} />);
+
+  expect(callback).toBeCalledTimes(1);
+  expect(callback.mock.calls[0][0]).toBe(0);
+
+  root.update(<App selector={state => state.routes[state.index].name} />);
+
+  expect(callback).toBeCalledTimes(2);
+  expect(callback.mock.calls[1][0]).toBe('first');
+});

packages/core/src/createNavigatorFactory.tsx

@@ -13,11 +13,17 @@ export default function createNavigatorFactory<
   ScreenOptions extends object,
   NavigatorComponent extends React.ComponentType<any>
 >(Navigator: NavigatorComponent) {
-  return <ParamList extends ParamListBase>(): TypedNavigator<
+  return function<ParamList extends ParamListBase>(): TypedNavigator<
     ParamList,
     ScreenOptions,
     typeof Navigator
-  > => {
+  > {
+    if (arguments[0] !== undefined) {
+      throw new Error(
+        "Creating a navigator doesn't take an argument. Maybe you are trying to use React Navigation 4 API with React Navigation 5?"
+      );
+    }
+
     return {
       Navigator,
       Screen,

packages/core/src/getPathFromState.tsx

@@ -6,7 +6,10 @@ type State = NavigationState | Omit<PartialState<NavigationState>, 'stale'>;
 type StringifyConfig = Record<string, (value: any) => string>;
 
 type Options = {
-  [routeName: string]: string | { path: string; stringify?: StringifyConfig };
+  [routeName: string]:
+    | string
+    | { path: string; stringify?: StringifyConfig }
+    | Options;
 };
 
 /**
@@ -37,7 +40,7 @@ type Options = {
  * @returns Path representing the state, e.g. /foo/bar?count=42.
  */
 export default function getPathFromState(
-  state: State,
+  state?: State,
   options: Options = {}
 ): string {
   let path = '/';
@@ -45,14 +48,35 @@ export default function getPathFromState(
   let current: State | undefined = state;
 
   while (current) {
-    const index = typeof current.index === 'number' ? current.index : 0;
-    const route = current.routes[index] as Route<string> & {
+    let index = typeof current.index === 'number' ? current.index : 0;
+    let route = current.routes[index] as Route<string> & {
       state?: State | undefined;
     };
+    let currentOptions = options;
+    let pattern = route.name;
+
+    while (route.name in currentOptions) {
+      if (typeof currentOptions[route.name] === 'string') {
+        pattern = currentOptions[route.name] as string;
+        break;
+      } else if (typeof currentOptions[route.name] === 'object') {
+        if (route.state === undefined) {
+          pattern = (currentOptions[route.name] as { path: string }).path;
+          break;
+        } else {
+          currentOptions = currentOptions[route.name] as Options;
+          index = typeof route.state.index === 'number' ? route.state.index : 0;
+          route = route.state.routes[index] as Route<string> & {
+            state?: State | undefined;
+          };
+        }
+      }
+    }
 
     const config =
-      options[route.name] !== undefined
-        ? (options[route.name] as { stringify?: StringifyConfig }).stringify
+      currentOptions[route.name] !== undefined
+        ? (currentOptions[route.name] as { stringify?: StringifyConfig })
+            .stringify
         : undefined;
 
     const params = route.params
@@ -65,12 +89,7 @@ export default function getPathFromState(
         }, {})
       : undefined;
 
-    if (options[route.name] !== undefined) {
-      const pattern =
-        typeof options[route.name] === 'string'
-          ? (options[route.name] as string)
-          : (options[route.name] as { path: string }).path;
-
+    if (currentOptions[route.name] !== undefined) {
       path += pattern
         .split('/')
         .map(p => {
@@ -95,7 +114,11 @@ export default function getPathFromState(
     if (route.state) {
       path += '/';
     } else if (params) {
-      path += `?${queryString.stringify(params)}`;
+      const query = queryString.stringify(params);
+
+      if (query) {
+        path += `?${query}`;
+      }
     }
 
     current = route.state;

packages/core/src/getStateFromPath.tsx

@@ -12,7 +12,7 @@ type RouteConfig = {
   match: RegExp;
   pattern: string;
   routeNames: string[];
-  parse: Record<string, (value: string) => any> | undefined;
+  parse: ParseConfig | undefined;
 };
 
 type ResultState = PartialState<NavigationState> & {

packages/core/src/index.tsx

@@ -14,6 +14,7 @@ export { default as useNavigation } from './useNavigation';
 export { default as useRoute } from './useRoute';
 export { default as useFocusEffect } from './useFocusEffect';
 export { default as useIsFocused } from './useIsFocused';
+export { default as useNavigationState } from './useNavigationState';
 
 export { default as getStateFromPath } from './getStateFromPath';
 export { default as getPathFromState } from './getPathFromState';

packages/core/src/isSerializable.tsx

@@ -0,0 +1,34 @@
+export default function isSerializable(o: { [key: string]: any }): boolean {
+  if (
+    o === undefined ||
+    o === null ||
+    typeof o === 'boolean' ||
+    typeof o === 'number' ||
+    typeof o === 'string'
+  ) {
+    return true;
+  }
+
+  if (
+    Object.prototype.toString.call(o) !== '[object Object]' &&
+    !Array.isArray(o)
+  ) {
+    return false;
+  }
+
+  if (Array.isArray(o)) {
+    for (const it of o) {
+      if (!isSerializable(it)) {
+        return false;
+      }
+    }
+  } else {
+    for (const key in o) {
+      if (!isSerializable(o[key])) {
+        return false;
+      }
+    }
+  }
+
+  return true;
+}

packages/core/src/types.tsx

@@ -207,31 +207,52 @@ export type Router<
 
 export type ParamListBase = Record<string, object | undefined>;
 
-export type EventMapBase = {
-  focus: undefined;
-  blur: undefined;
+export type EventMapBase = Record<
+  string,
+  { data?: any; canPreventDefault?: boolean }
+>;
+
+export type EventMapCore = {
+  focus: { data: undefined };
+  blur: { data: undefined };
+  state: { data: { state: NavigationState } };
 };
 
-export type EventArg<EventName extends string, Data = undefined> = {
+export type EventArg<
+  EventName extends string,
+  CanPreventDefault extends boolean | undefined = false,
+  Data = undefined
+> = {
   /**
    * Type of the event (e.g. `focus`, `blur`)
    */
   readonly type: EventName;
-  /**
-   * Whether `event.preventDefault()` was called on this event object.
-   */
-  readonly defaultPrevented: boolean;
-  /**
-   * Prevent the default action which happens on this event.
-   */
-  preventDefault(): void;
-} & (Data extends undefined ? {} : { readonly data: Data });
+} & (CanPreventDefault extends true
+  ? {
+      /**
+       * Whether `event.preventDefault()` was called on this event object.
+       */
+      readonly defaultPrevented: boolean;
+      /**
+       * Prevent the default action which happens on this event.
+       */
+      preventDefault(): void;
+    }
+  : {}) &
+  (Data extends undefined ? {} : { readonly data: Data });
 
-export type EventListenerCallback<EventName extends string, Data> = (
-  e: EventArg<EventName, Data>
+export type EventListenerCallback<
+  EventMap extends EventMapBase,
+  EventName extends keyof EventMap
+> = (
+  e: EventArg<
+    Extract<EventName, string>,
+    EventMap[EventName]['canPreventDefault'],
+    EventMap[EventName]['data']
+  >
 ) => void;
 
-export type EventConsumer<EventMap extends Record<string, any>> = {
+export type EventConsumer<EventMap extends EventMapBase> = {
   /**
    * Subscribe to events from the parent navigator.
    *
@@ -240,15 +261,15 @@ export type EventConsumer<EventMap extends Record<string, any>> = {
    */
   addListener<EventName extends Extract<keyof EventMap, string>>(
     type: EventName,
-    callback: EventListenerCallback<EventName, EventMap[EventName]>
+    callback: EventListenerCallback<EventMap, EventName>
   ): () => void;
   removeListener<EventName extends Extract<keyof EventMap, string>>(
     type: EventName,
-    callback: EventListenerCallback<EventName, EventMap[EventName]>
+    callback: EventListenerCallback<EventMap, EventName>
   ): void;
 };
 
-export type EventEmitter<EventMap extends Record<string, any>> = {
+export type EventEmitter<EventMap extends EventMapBase> = {
   /**
    * Emit an event to child screens.
    *
@@ -261,23 +282,31 @@ export type EventEmitter<EventMap extends Record<string, any>> = {
     options: {
       type: EventName;
       target?: string;
-    } & (EventMap[EventName] extends undefined
-      ? {}
-      : { data: EventMap[EventName] })
-  ): EventArg<EventName, EventMap[EventName]>;
+    } & (EventMap[EventName]['canPreventDefault'] extends true
+      ? { canPreventDefault: true }
+      : {}) &
+      (EventMap[EventName]['data'] extends undefined
+        ? {}
+        : { data: EventMap[EventName]['data'] })
+  ): EventArg<
+    EventName,
+    EventMap[EventName]['canPreventDefault'],
+    EventMap[EventName]['data']
+  >;
 };
 
 export class PrivateValueStore<A, B, C> {
   /**
-   * TypeScript requires a type to be actually used to be able to infer it.
-   * This is a hacky way of storing type in a property without surfacing it in intellisense.
+   * UGLY HACK! DO NOT USE THE TYPE!!!
+   *
+   * TypeScript requires a type to be used to be able to infer it.
+   * The type should exist as its own without any operations such as union.
+   * So we need to figure out a way to store this type in a property.
+   * The problem with a normal property is that it shows up in intelliSense.
+   * Adding private keyword works, but the annotation is stripped away in declaration.
+   * Turns out if we use an empty string, it doesn't show up in intelliSense.
    */
-  // @ts-ignore
-  private __private_value_type_a?: A;
-  // @ts-ignore
-  private __private_value_type_b?: B;
-  // @ts-ignore
-  private __private_value_type_c?: C;
+  protected ''?: { a: A; b: B; c: C };
 }
 
 type NavigationHelpersCommon<
@@ -336,13 +365,6 @@ type NavigationHelpersCommon<
    */
   reset(state: PartialState<State> | State): void;
 
-  /**
-   * Reset the navigation state of the root navigator to the provided state.
-   *
-   * @param state Navigation state object.
-   */
-  resetRoot(state?: PartialState<NavigationState> | NavigationState): void;
-
   /**
    * Go back to the previous route in history.
    */
@@ -365,7 +387,7 @@ type NavigationHelpersCommon<
 
 export type NavigationHelpers<
   ParamList extends ParamListBase,
-  EventMap extends Record<string, any> = {}
+  EventMap extends EventMapBase = {}
 > = NavigationHelpersCommon<ParamList> &
   EventEmitter<EventMap> & {
     /**
@@ -405,7 +427,7 @@ export type NavigationProp<
   RouteName extends keyof ParamList = string,
   State extends NavigationState = NavigationState,
   ScreenOptions extends object = {},
-  EventMap extends Record<string, any> = {}
+  EventMap extends EventMapBase = {}
 > = NavigationHelpersCommon<ParamList, State> & {
   /**
    * Update the param object for the route.
@@ -436,7 +458,7 @@ export type NavigationProp<
    * Note that this method doesn't re-render screen when the result changes. So don't use it in `render`.
    */
   dangerouslyGetState(): State;
-} & EventConsumer<EventMap & EventMapBase> &
+} & EventConsumer<EventMap & EventMapCore> &
   PrivateValueStore<ParamList, RouteName, EventMap>;
 
 export type RouteProp<
@@ -490,7 +512,7 @@ export type Descriptor<
   RouteName extends keyof ParamList = string,
   State extends NavigationState = NavigationState,
   ScreenOptions extends object = {},
-  EventMap extends Record<string, any> = {}
+  EventMap extends EventMapBase = {}
 > = {
   /**
    * Render the component associated with this route.
@@ -543,10 +565,7 @@ export type RouteConfig<
       /**
        * React component to render for this screen.
        */
-      component: React.ComponentType<{
-        route: RouteProp<ParamList, RouteName>;
-        navigation: any;
-      }>;
+      component: React.ComponentType<any>;
     }
   | {
       /**
@@ -567,6 +586,9 @@ export type NavigationContainerRef =
        * @param state Navigation state object.
        */
       resetRoot(state?: PartialState<NavigationState> | NavigationState): void;
+      /**
+       * Get the rehydrated navigation state of the navigation tree.
+       */
       getRootState(): NavigationState;
     })
   | undefined

packages/core/src/useEventEmitter.tsx

@@ -43,7 +43,17 @@ export default function useEventEmitter(): NavigationEventEmitter {
   }, []);
 
   const emit = React.useCallback(
-    ({ type, data, target }: { type: string; data?: any; target?: string }) => {
+    ({
+      type,
+      data,
+      target,
+      canPreventDefault,
+    }: {
+      type: string;
+      data?: any;
+      target?: string;
+      canPreventDefault?: boolean;
+    }) => {
       const items = listeners.current[type] || {};
 
       // Copy the current list of callbacks in case they are mutated during execution
@@ -52,26 +62,40 @@ export default function useEventEmitter(): NavigationEventEmitter {
           ? items[target] && items[target].slice()
           : ([] as Listeners).concat(...Object.keys(items).map(t => items[t]));
 
-      let defaultPrevented = false;
-
-      const event: EventArg<any, any> = {
+      const event: EventArg<any, any, any> = {
         get type() {
           return type;
         },
-        get data() {
-          return data;
-        },
-        get defaultPrevented() {
-          return defaultPrevented;
-        },
-        preventDefault() {
-          defaultPrevented = true;
-        },
       };
 
+      if (data !== undefined) {
+        Object.defineProperty(event, 'data', {
+          get() {
+            return data;
+          },
+        });
+      }
+
+      if (canPreventDefault) {
+        let defaultPrevented = false;
+
+        Object.defineProperties(event, {
+          defaultPrevented: {
+            get() {
+              return defaultPrevented;
+            },
+          },
+          preventDefault: {
+            value() {
+              defaultPrevented = true;
+            },
+          },
+        });
+      }
+
       callbacks?.forEach(cb => cb(event));
 
-      return event;
+      return event as any;
     },
     []
   );

packages/core/src/useFocusEffect.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import useNavigation from './useNavigation';
 
-type EffectCallback = (() => undefined) | (() => () => void);
+type EffectCallback = () => undefined | void | (() => void);
 
 /**
  * Hook to run an effect in a focused screen, similar to `React.useEffect`.
@@ -15,7 +15,7 @@ export default function useFocusEffect(callback: EffectCallback) {
 
   React.useEffect(() => {
     let isFocused = false;
-    let cleanup: (() => void) | undefined;
+    let cleanup: undefined | void | (() => void);
 
     // We need to run the effect on intial render/dep changes if the screen is focused
     if (navigation.isFocused()) {
@@ -30,19 +30,28 @@ export default function useFocusEffect(callback: EffectCallback) {
         return;
       }
 
-      cleanup?.();
+      if (cleanup !== undefined) {
+        cleanup();
+      }
+
       cleanup = callback();
       isFocused = true;
     });
 
     const unsubscribeBlur = navigation.addListener('blur', () => {
-      cleanup?.();
+      if (cleanup !== undefined) {
+        cleanup();
+      }
+
       cleanup = undefined;
       isFocused = false;
     });
 
     return () => {
-      cleanup?.();
+      if (cleanup !== undefined) {
+        cleanup();
+      }
+
       unsubscribeFocus();
       unsubscribeBlur();
     };

packages/core/src/useFocusEvents.tsx

@@ -18,7 +18,7 @@ export default function useFocusEvents({ state, emitter }: Options) {
   const currentFocusedKey = state.routes[state.index].key;
 
   // When the parent screen changes its focus state, we also need to change child's focus
-  // Coz the child screen can't be focused if the parent screen is out of fcous
+  // Coz the child screen can't be focused if the parent screen is out of focus
   React.useEffect(
     () =>
       navigation?.addListener('focus', () =>

packages/core/src/useNavigationBuilder.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { isValidElementType } from 'react-is';
 import { NavigationStateContext } from './NavigationContainer';
 import NavigationRouteContext from './NavigationRouteContext';
 import Screen from './Screen';
@@ -53,8 +54,8 @@ const isArrayEqual = (a: any[], b: any[]) =>
  */
 const getRouteConfigsFromChildren = <ScreenOptions extends object>(
   children: React.ReactNode
-) =>
-  React.Children.toArray(children).reduce<
+) => {
+  const configs = React.Children.toArray(children).reduce<
     RouteConfig<ParamListBase, string, ScreenOptions>[]
   >((acc, child) => {
     if (React.isValidElement(child)) {
@@ -85,6 +86,39 @@ const getRouteConfigsFromChildren = <ScreenOptions extends object>(
     );
   }, []);
 
+  if (process.env.NODE_ENV !== 'production') {
+    configs.forEach(config => {
+      const { children, component } = config as any;
+
+      if (children != null || component !== undefined) {
+        if (children != null && component !== undefined) {
+          throw new Error(
+            "We got both 'component' and 'children' props for 'Screen'. You must pass only one of them."
+          );
+        }
+
+        if (children != null && typeof children !== 'function') {
+          throw new Error(
+            `We got an invalid value for 'children' prop for 'Screen'. It must be a function returning a React Element.`
+          );
+        }
+
+        if (component !== undefined && !isValidElementType(component)) {
+          throw new Error(
+            `We got an invalid value for 'component' prop for 'Screen'. It must be a a valid React Component.`
+          );
+        }
+      } else {
+        throw new Error(
+          "We couldn't find a 'component' or 'children' prop for 'Screen'. This can happen if you passed 'undefined'. You likely forgot to export your component from the file it's defined in, or mixed up default import and named import when importing."
+        );
+      }
+    });
+  }
+
+  return configs;
+};
+
 /**
  * Hook for building navigators.
  *
@@ -293,6 +327,10 @@ export default function useNavigationBuilder<
 
   useFocusEvents({ state, emitter });
 
+  React.useEffect(() => {
+    emitter.emit({ type: 'state', data: { state } });
+  }, [emitter, state]);
+
   const {
     listeners: actionListeners,
     addListener: addActionListener,

packages/core/src/useNavigationHelpers.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import * as CommonActions from './CommonActions';
 import NavigationContext from './NavigationContext';
-import ResetRootContext from './ResetRootContext';
 import { NavigationStateContext } from './NavigationContainer';
 import { NavigationEventEmitter } from './useEventEmitter';
 import {
@@ -37,7 +36,6 @@ export default function useNavigationHelpers<
   Action extends NavigationAction,
   EventMap extends Record<string, any>
 >({ onAction, getState, emitter, router }: Options<State, Action>) {
-  const resetRoot = React.useContext(ResetRootContext);
   const parentNavigationHelpers = React.useContext(NavigationContext);
   const { performTransaction } = React.useContext(NavigationStateContext);
 
@@ -76,7 +74,6 @@ export default function useNavigationHelpers<
     return {
       ...parentNavigationHelpers,
       ...helpers,
-      resetRoot,
       dispatch,
       emit: emitter.emit,
       isFocused: parentNavigationHelpers
@@ -100,7 +97,6 @@ export default function useNavigationHelpers<
     router,
     getState,
     parentNavigationHelpers,
-    resetRoot,
     emitter.emit,
     performTransaction,
     onAction,

packages/core/src/useNavigationState.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import useNavigation from './useNavigation';
+import { NavigationState } from './types';
+
+type Selector<T> = (state: NavigationState) => T;
+
+/**
+ * Hook to get a value from the current navigation state using a selector.
+ *
+ * @param selector Selector function to get a value from the state.
+ */
+export default function useNavigationState<T>(selector: Selector<T>): T {
+  const navigation = useNavigation();
+
+  // We don't care about the state value, we run the selector again at the end
+  // The state is only to make sure that there's a re-render when we have a new value
+  const [, setResult] = React.useState(() =>
+    selector(navigation.dangerouslyGetState())
+  );
+
+  // We store the selector in a ref to avoid re-subscribing listeners every render
+  const selectorRef = React.useRef(selector);
+
+  React.useEffect(() => {
+    selectorRef.current = selector;
+  });
+
+  React.useEffect(() => {
+    const unsubscribe = navigation.addListener('state', e => {
+      setResult(selectorRef.current(e.data.state));
+    });
+
+    return unsubscribe;
+  }, [navigation]);
+
+  return selector(navigation.dangerouslyGetState());
+}

packages/core/tsconfig.build.json

@@ -0,0 +1,6 @@
+{
+  "extends": "./tsconfig",
+  "compilerOptions": {
+    "paths": {}
+  }
+}

packages/core/tsconfig.json

@@ -1,3 +1,6 @@
 {
-  "extends": "../../tsconfig"
+  "extends": "../../tsconfig",
+  "compilerOptions": {
+    "outDir": "./lib/typescript"
+  }
 }

packages/drawer/CHANGELOG.md

@@ -3,6 +3,53 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.0.0-alpha.41](https://github.com/react-navigation/navigation-ex/tree/master/packages/drawer/compare/@react-navigation/drawer@5.0.0-alpha.40...@react-navigation/drawer@5.0.0-alpha.41) (2020-01-24)
+
+**Note:** Version bump only for package @react-navigation/drawer
+
+
+
+
+
+# [5.0.0-alpha.40](https://github.com/react-navigation/navigation-ex/tree/master/packages/drawer/compare/@react-navigation/drawer@5.0.0-alpha.39...@react-navigation/drawer@5.0.0-alpha.40) (2020-01-23)
+
+
+### Features
+
+* emit appear and dismiss events for native stack ([f1df4a0](https://github.com/react-navigation/navigation-ex/tree/master/packages/drawer/commit/f1df4a080877b3642e748a41a5ffc2da8c449a8c))
+* let the navigator specify if default can be prevented ([da67e13](https://github.com/react-navigation/navigation-ex/tree/master/packages/drawer/commit/da67e134d2157201360427d3c10da24f24cae7aa))
+
+
+
+
+
+# [5.0.0-alpha.39](https://github.com/react-navigation/navigation-ex/tree/master/packages/drawer/compare/@react-navigation/drawer@5.0.0-alpha.38...@react-navigation/drawer@5.0.0-alpha.39) (2020-01-14)
+
+**Note:** Version bump only for package @react-navigation/drawer
+
+
+
+
+
+# [5.0.0-alpha.38](https://github.com/react-navigation/navigation-ex/tree/master/packages/drawer/compare/@react-navigation/drawer@5.0.0-alpha.37...@react-navigation/drawer@5.0.0-alpha.38) (2020-01-13)
+
+
+### Bug Fixes
+
+* make sure paths aren't aliased when building definitions ([65a5dac](https://github.com/react-navigation/navigation-ex/tree/master/packages/drawer/commit/65a5dac2bf887f4ba081ab15bd4c9870bb15697f)), closes [#265](https://github.com/react-navigation/navigation-ex/tree/master/packages/drawer/issues/265)
+
+
+
+
+
+# [5.0.0-alpha.37](https://github.com/react-navigation/navigation-ex/tree/master/packages/drawer/compare/@react-navigation/drawer@5.0.0-alpha.36...@react-navigation/drawer@5.0.0-alpha.37) (2020-01-13)
+
+**Note:** Version bump only for package @react-navigation/drawer
+
+
+
+
+
 # [5.0.0-alpha.36](https://github.com/react-navigation/navigation-ex/tree/master/packages/drawer/compare/@react-navigation/drawer@5.0.0-alpha.34...@react-navigation/drawer@5.0.0-alpha.36) (2020-01-09)
 
 **Note:** Version bump only for package @react-navigation/drawer

packages/drawer/package.json

@@ -11,17 +11,18 @@
     "material",
     "drawer"
   ],
-  "version": "5.0.0-alpha.36",
+  "version": "5.0.0-alpha.41",
   "license": "MIT",
   "repository": "https://github.com/react-navigation/navigation-ex/tree/master/packages/drawer",
   "main": "lib/commonjs/index.js",
   "react-native": "src/index.tsx",
   "module": "lib/module/index.js",
-  "types": "lib/typescript/drawer/src/index.d.ts",
+  "types": "lib/typescript/src/index.d.ts",
   "files": [
     "src",
     "lib"
   ],
+  "sideEffects": false,
   "publishConfig": {
     "access": "public"
   },
@@ -30,12 +31,12 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/routers": "^5.0.0-alpha.22",
+    "@react-navigation/routers": "^5.0.0-alpha.27",
     "color": "^3.1.2",
     "react-native-iphone-x-helper": "^1.2.1"
   },
   "devDependencies": {
-    "@react-native-community/bob": "^0.7.0",
+    "@react-native-community/bob": "^0.8.0",
     "@types/react": "^16.9.17",
     "@types/react-native": "^0.60.30",
     "del-cli": "^3.0.0",
@@ -44,7 +45,7 @@
     "react-native-gesture-handler": "^1.5.3",
     "react-native-reanimated": "^1.4.0",
     "react-native-safe-area-context": "^0.6.2",
-    "react-native-screens": "^2.0.0-alpha.22",
+    "react-native-screens": "^2.0.0-alpha.25",
     "typescript": "^3.7.4"
   },
   "peerDependencies": {
@@ -62,7 +63,12 @@
     "targets": [
       "commonjs",
       "module",
-      "typescript"
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
     ]
   }
 }

packages/drawer/src/types.tsx

@@ -173,11 +173,11 @@ export type DrawerNavigationEventMap = {
   /**
    * Event which fires when the drawer opens.
    */
-  drawerOpen: undefined;
+  drawerOpen: { data: undefined };
   /**
    * Event which fires when the drawer closes.
    */
-  drawerClose: undefined;
+  drawerClose: { data: undefined };
 };
 
 export type DrawerNavigationHelpers = NavigationHelpers<

packages/drawer/tsconfig.build.json

@@ -0,0 +1,6 @@
+{
+  "extends": "./tsconfig",
+  "compilerOptions": {
+    "paths": {}
+  }
+}

packages/drawer/tsconfig.json

@@ -1,3 +1,11 @@
 {
-  "extends": "../../tsconfig"
+  "extends": "../../tsconfig",
+  "references": [
+    { "path": "../core" },
+    { "path": "../native" },
+    { "path": "../routers" }
+  ],
+  "compilerOptions": {
+    "outDir": "./lib/typescript"
+  }
 }

packages/material-bottom-tabs/CHANGELOG.md

@@ -3,6 +3,53 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.0.0-alpha.36](https://github.com/react-navigation/navigation-ex/tree/master/packages/material-bottom-tabs/compare/@react-navigation/material-bottom-tabs@5.0.0-alpha.35...@react-navigation/material-bottom-tabs@5.0.0-alpha.36) (2020-01-24)
+
+**Note:** Version bump only for package @react-navigation/material-bottom-tabs
+
+
+
+
+
+# [5.0.0-alpha.35](https://github.com/react-navigation/navigation-ex/tree/master/packages/material-bottom-tabs/compare/@react-navigation/material-bottom-tabs@5.0.0-alpha.34...@react-navigation/material-bottom-tabs@5.0.0-alpha.35) (2020-01-23)
+
+
+### Features
+
+* add preventDefault functionality in material bottom tabs ([3dede31](https://github.com/react-navigation/navigation-ex/tree/master/packages/material-bottom-tabs/commit/3dede316ccab3b2403a475f60ce20b5c4e4cc068))
+* let the navigator specify if default can be prevented ([da67e13](https://github.com/react-navigation/navigation-ex/tree/master/packages/material-bottom-tabs/commit/da67e134d2157201360427d3c10da24f24cae7aa))
+
+
+
+
+
+# [5.0.0-alpha.34](https://github.com/react-navigation/navigation-ex/tree/master/packages/material-bottom-tabs/compare/@react-navigation/material-bottom-tabs@5.0.0-alpha.33...@react-navigation/material-bottom-tabs@5.0.0-alpha.34) (2020-01-14)
+
+**Note:** Version bump only for package @react-navigation/material-bottom-tabs
+
+
+
+
+
+# [5.0.0-alpha.33](https://github.com/react-navigation/navigation-ex/tree/master/packages/material-bottom-tabs/compare/@react-navigation/material-bottom-tabs@5.0.0-alpha.32...@react-navigation/material-bottom-tabs@5.0.0-alpha.33) (2020-01-13)
+
+
+### Bug Fixes
+
+* make sure paths aren't aliased when building definitions ([65a5dac](https://github.com/react-navigation/navigation-ex/tree/master/packages/material-bottom-tabs/commit/65a5dac2bf887f4ba081ab15bd4c9870bb15697f)), closes [#265](https://github.com/react-navigation/navigation-ex/tree/master/packages/material-bottom-tabs/issues/265)
+
+
+
+
+
+# [5.0.0-alpha.32](https://github.com/react-navigation/navigation-ex/tree/master/packages/material-bottom-tabs/compare/@react-navigation/material-bottom-tabs@5.0.0-alpha.31...@react-navigation/material-bottom-tabs@5.0.0-alpha.32) (2020-01-13)
+
+**Note:** Version bump only for package @react-navigation/material-bottom-tabs
+
+
+
+
+
 # [5.0.0-alpha.31](https://github.com/react-navigation/navigation-ex/tree/master/packages/material-bottom-tabs/compare/@react-navigation/material-bottom-tabs@5.0.0-alpha.29...@react-navigation/material-bottom-tabs@5.0.0-alpha.31) (2020-01-09)
 
 **Note:** Version bump only for package @react-navigation/material-bottom-tabs

packages/material-bottom-tabs/package.json

@@ -11,17 +11,18 @@
     "material",
     "tab"
   ],
-  "version": "5.0.0-alpha.31",
+  "version": "5.0.0-alpha.36",
   "license": "MIT",
   "repository": "https://github.com/react-navigation/navigation-ex/tree/master/packages/material-bottom-tabs",
   "main": "lib/commonjs/index.js",
   "react-native": "src/index.tsx",
   "module": "lib/module/index.js",
-  "types": "lib/typescript/material-bottom-tabs/src/index.d.ts",
+  "types": "lib/typescript/src/index.d.ts",
   "files": [
     "src",
     "lib"
   ],
+  "sideEffects": false,
   "publishConfig": {
     "access": "public"
   },
@@ -30,17 +31,17 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/routers": "^5.0.0-alpha.22"
+    "@react-navigation/routers": "^5.0.0-alpha.27"
   },
   "devDependencies": {
-    "@react-native-community/bob": "^0.7.0",
+    "@react-native-community/bob": "^0.8.0",
     "@types/react": "^16.9.17",
     "@types/react-native": "^0.60.30",
     "@types/react-native-vector-icons": "^6.4.5",
     "del-cli": "^3.0.0",
     "react": "~16.9.0",
     "react-native": "~0.61.5",
-    "react-native-paper": "^3.4.0",
+    "react-native-paper": "^3.5.0",
     "react-native-vector-icons": "^6.6.0",
     "typescript": "^3.7.4"
   },
@@ -48,7 +49,7 @@
     "@react-navigation/native": "^5.0.0-alpha.0",
     "react": "*",
     "react-native": "*",
-    "react-native-paper": "^3.0.0",
+    "react-native-paper": "^3.5.0",
     "react-native-vector-icons": "^6.0.0"
   },
   "@react-native-community/bob": {
@@ -57,7 +58,12 @@
     "targets": [
       "commonjs",
       "module",
-      "typescript"
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
     ]
   }
 }

packages/material-bottom-tabs/src/types.tsx

@@ -11,7 +11,7 @@ export type MaterialBottomTabNavigationEventMap = {
   /**
    * Event which fires on tapping on the tab in the tab bar.
    */
-  tabPress: undefined;
+  tabPress: { data: undefined; canPreventDefault: true };
 };
 
 export type MaterialBottomTabNavigationHelpers = NavigationHelpers<

packages/material-bottom-tabs/src/views/MaterialBottomTabView.tsx

@@ -89,11 +89,16 @@ export default function MaterialBottomTabView({
         descriptors[route.key].options.tabBarAccessibilityLabel
       }
       getTestID={({ route }) => descriptors[route.key].options.tabBarTestID}
-      onTabPress={({ route }) => {
-        navigation.emit({
+      onTabPress={({ route, preventDefault }) => {
+        const event = navigation.emit({
           type: 'tabPress',
           target: route.key,
+          canPreventDefault: true,
         });
+
+        if (event.defaultPrevented) {
+          preventDefault();
+        }
       }}
     />
   );

packages/material-bottom-tabs/tsconfig.build.json

@@ -0,0 +1,6 @@
+{
+  "extends": "./tsconfig",
+  "compilerOptions": {
+    "paths": {}
+  }
+}

packages/material-bottom-tabs/tsconfig.json

@@ -1,3 +1,11 @@
 {
-  "extends": "../../tsconfig"
+  "extends": "../../tsconfig",
+  "references": [
+    { "path": "../core" },
+    { "path": "../native" },
+    { "path": "../routers" }
+  ],
+  "compilerOptions": {
+    "outDir": "./lib/typescript"
+  }
 }

packages/material-top-tabs/CHANGELOG.md

@@ -3,6 +3,60 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.0.0-alpha.35](https://github.com/react-navigation/navigation-ex/tree/master/packages/material-top-tabs/compare/@react-navigation/material-top-tabs@5.0.0-alpha.34...@react-navigation/material-top-tabs@5.0.0-alpha.35) (2020-01-24)
+
+**Note:** Version bump only for package @react-navigation/material-top-tabs
+
+
+
+
+
+# [5.0.0-alpha.34](https://github.com/react-navigation/navigation-ex/tree/master/packages/material-top-tabs/compare/@react-navigation/material-top-tabs@5.0.0-alpha.33...@react-navigation/material-top-tabs@5.0.0-alpha.34) (2020-01-23)
+
+
+### Features
+
+* let the navigator specify if default can be prevented ([da67e13](https://github.com/react-navigation/navigation-ex/tree/master/packages/material-top-tabs/commit/da67e134d2157201360427d3c10da24f24cae7aa))
+
+
+
+
+
+# [5.0.0-alpha.33](https://github.com/react-navigation/navigation-ex/tree/master/packages/material-top-tabs/compare/@react-navigation/material-top-tabs@5.0.0-alpha.32...@react-navigation/material-top-tabs@5.0.0-alpha.33) (2020-01-14)
+
+**Note:** Version bump only for package @react-navigation/material-top-tabs
+
+
+
+
+
+# [5.0.0-alpha.32](https://github.com/react-navigation/navigation-ex/tree/master/packages/material-top-tabs/compare/@react-navigation/material-top-tabs@5.0.0-alpha.31...@react-navigation/material-top-tabs@5.0.0-alpha.32) (2020-01-13)
+
+
+### Bug Fixes
+
+* make sure paths aren't aliased when building definitions ([65a5dac](https://github.com/react-navigation/navigation-ex/tree/master/packages/material-top-tabs/commit/65a5dac2bf887f4ba081ab15bd4c9870bb15697f)), closes [#265](https://github.com/react-navigation/navigation-ex/tree/master/packages/material-top-tabs/issues/265)
+
+
+
+
+
+# [5.0.0-alpha.31](https://github.com/react-navigation/navigation-ex/tree/master/packages/material-top-tabs/compare/@react-navigation/material-top-tabs@5.0.0-alpha.30...@react-navigation/material-top-tabs@5.0.0-alpha.31) (2020-01-13)
+
+**Note:** Version bump only for package @react-navigation/material-top-tabs
+
+
+
+
+
+# [5.0.0-alpha.30](https://github.com/react-navigation/navigation-ex/tree/master/packages/material-top-tabs/compare/@react-navigation/material-top-tabs@5.0.0-alpha.29...@react-navigation/material-top-tabs@5.0.0-alpha.30) (2020-01-09)
+
+**Note:** Version bump only for package @react-navigation/material-top-tabs
+
+
+
+
+
 # [5.0.0-alpha.29](https://github.com/react-navigation/navigation-ex/tree/master/packages/material-top-tabs/compare/@react-navigation/material-top-tabs@5.0.0-alpha.27...@react-navigation/material-top-tabs@5.0.0-alpha.29) (2020-01-09)
 
 **Note:** Version bump only for package @react-navigation/material-top-tabs

packages/material-top-tabs/package.json

@@ -11,17 +11,18 @@
     "material",
     "tab"
   ],
-  "version": "5.0.0-alpha.29",
+  "version": "5.0.0-alpha.35",
   "license": "MIT",
   "repository": "https://github.com/react-navigation/navigation-ex/tree/master/packages/material-top-tabs",
   "main": "lib/commonjs/index.js",
   "react-native": "src/index.tsx",
   "module": "lib/module/index.js",
-  "types": "lib/typescript/material-top-tabs/src/index.d.ts",
+  "types": "lib/typescript/src/index.d.ts",
   "files": [
     "src",
     "lib"
   ],
+  "sideEffects": false,
   "publishConfig": {
     "access": "public"
   },
@@ -30,11 +31,11 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/routers": "^5.0.0-alpha.22",
+    "@react-navigation/routers": "^5.0.0-alpha.27",
     "color": "^3.1.2"
   },
   "devDependencies": {
-    "@react-native-community/bob": "^0.7.0",
+    "@react-native-community/bob": "^0.8.0",
     "@types/react": "^16.9.17",
     "@types/react-native": "^0.60.30",
     "del-cli": "^3.0.0",
@@ -59,7 +60,12 @@
     "targets": [
       "commonjs",
       "module",
-      "typescript"
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
     ]
   }
 }

packages/material-top-tabs/src/types.tsx

@@ -13,19 +13,19 @@ export type MaterialTopTabNavigationEventMap = {
   /**
    * Event which fires on tapping on the tab in the tab bar.
    */
-  tabPress: undefined;
+  tabPress: { data: undefined; canPreventDefault: true };
   /**
    * Event which fires on long press on the tab in the tab bar.
    */
-  tabLongPress: undefined;
+  tabLongPress: { data: undefined };
   /**
    * Event which fires when a swipe gesture starts, i.e. finger touches the screen.
    */
-  swipeStart: undefined;
+  swipeStart: { data: undefined };
   /**
    * Event which fires when a swipe gesture ends, i.e. finger leaves the screen.
    */
-  swipeEnd: undefined;
+  swipeEnd: { data: undefined };
 };
 
 export type MaterialTopTabNavigationHelpers = NavigationHelpers<
@@ -86,11 +86,6 @@ export type MaterialTopTabNavigationOptions = {
    * ID to locate this tab button in tests.
    */
   tabBarTestID?: string;
-
-  /**
-   * Boolean indicating whether the tab bar is visible when this screen is active.
-   */
-  tabBarVisible?: boolean;
 };
 
 export type MaterialTopTabDescriptor = Descriptor<

packages/material-top-tabs/src/views/MaterialTopTabBar.tsx

@@ -49,6 +49,7 @@ export default function TabBarTop(props: MaterialTopTabBarProps) {
         const event = navigation.emit({
           type: 'tabPress',
           target: route.key,
+          canPreventDefault: true,
         });
 
         if (event.defaultPrevented) {

packages/material-top-tabs/src/views/MaterialTopTabView.tsx

@@ -32,15 +32,6 @@ export default function MaterialTopTabView({
   const { colors } = useTheme();
 
   const renderTabBar = (props: SceneRendererProps) => {
-    const route = state.routes[state.index];
-    const options = descriptors[route.key].options;
-
-    const tabBarVisible = options.tabBarVisible !== false;
-
-    if (tabBarVisible === false) {
-      return null;
-    }
-
     return tabBar({
       ...tabBarOptions,
       ...props,

packages/material-top-tabs/tsconfig.build.json

@@ -0,0 +1,6 @@
+{
+  "extends": "./tsconfig",
+  "compilerOptions": {
+    "paths": {}
+  }
+}

packages/material-top-tabs/tsconfig.json

@@ -1,3 +1,11 @@
 {
-  "extends": "../../tsconfig"
+  "extends": "../../tsconfig",
+  "references": [
+    { "path": "../core" },
+    { "path": "../native" },
+    { "path": "../routers" }
+  ],
+  "compilerOptions": {
+    "outDir": "./lib/typescript"
+  }
 }

packages/native-stack/CHANGELOG.md

@@ -3,6 +3,58 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.0.0-alpha.29](https://github.com/react-navigation/navigation-ex/tree/master/packages/native-stack/compare/@react-navigation/native-stack@5.0.0-alpha.28...@react-navigation/native-stack@5.0.0-alpha.29) (2020-01-24)
+
+**Note:** Version bump only for package @react-navigation/native-stack
+
+
+
+
+
+# [5.0.0-alpha.28](https://github.com/react-navigation/navigation-ex/tree/master/packages/native-stack/compare/@react-navigation/native-stack@5.0.0-alpha.27...@react-navigation/native-stack@5.0.0-alpha.28) (2020-01-23)
+
+
+### Bug Fixes
+
+* fix types for native stack ([1da4a64](https://github.com/react-navigation/navigation-ex/tree/master/packages/native-stack/commit/1da4a6437f4607c1d4547d26dd5068615631982e))
+
+
+### Features
+
+* emit appear and dismiss events for native stack ([f1df4a0](https://github.com/react-navigation/navigation-ex/tree/master/packages/native-stack/commit/f1df4a080877b3642e748a41a5ffc2da8c449a8c))
+* let the navigator specify if default can be prevented ([da67e13](https://github.com/react-navigation/navigation-ex/tree/master/packages/native-stack/commit/da67e134d2157201360427d3c10da24f24cae7aa))
+
+
+
+
+
+# [5.0.0-alpha.27](https://github.com/react-navigation/navigation-ex/tree/master/packages/native-stack/compare/@react-navigation/native-stack@5.0.0-alpha.26...@react-navigation/native-stack@5.0.0-alpha.27) (2020-01-14)
+
+**Note:** Version bump only for package @react-navigation/native-stack
+
+
+
+
+
+# [5.0.0-alpha.26](https://github.com/react-navigation/navigation-ex/tree/master/packages/native-stack/compare/@react-navigation/native-stack@5.0.0-alpha.25...@react-navigation/native-stack@5.0.0-alpha.26) (2020-01-13)
+
+
+### Bug Fixes
+
+* make sure paths aren't aliased when building definitions ([65a5dac](https://github.com/react-navigation/navigation-ex/tree/master/packages/native-stack/commit/65a5dac2bf887f4ba081ab15bd4c9870bb15697f)), closes [#265](https://github.com/react-navigation/navigation-ex/tree/master/packages/native-stack/issues/265)
+
+
+
+
+
+# [5.0.0-alpha.25](https://github.com/react-navigation/navigation-ex/tree/master/packages/native-stack/compare/@react-navigation/native-stack@5.0.0-alpha.24...@react-navigation/native-stack@5.0.0-alpha.25) (2020-01-13)
+
+**Note:** Version bump only for package @react-navigation/native-stack
+
+
+
+
+
 # [5.0.0-alpha.24](https://github.com/react-navigation/navigation-ex/tree/master/packages/native-stack/compare/@react-navigation/native-stack@5.0.0-alpha.22...@react-navigation/native-stack@5.0.0-alpha.24) (2020-01-09)
 
 **Note:** Version bump only for package @react-navigation/native-stack

packages/native-stack/package.json

@@ -6,17 +6,18 @@
     "react-native",
     "react-navigation"
   ],
-  "version": "5.0.0-alpha.24",
+  "version": "5.0.0-alpha.29",
   "license": "MIT",
   "repository": "https://github.com/react-navigation/navigation-ex/tree/master/packages/native-stack",
   "main": "lib/commonjs/index.js",
   "react-native": "src/index.tsx",
   "module": "lib/module/index.js",
-  "types": "lib/typescript/native-stack/src/index.d.ts",
+  "types": "lib/typescript/src/index.d.ts",
   "files": [
     "src",
     "lib"
   ],
+  "sideEffects": false,
   "publishConfig": {
     "access": "public"
   },
@@ -25,19 +26,19 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/routers": "^5.0.0-alpha.22"
+    "@react-navigation/routers": "^5.0.0-alpha.27"
   },
   "devDependencies": {
-    "@react-native-community/bob": "^0.7.0",
+    "@react-native-community/bob": "^0.8.0",
     "del-cli": "^3.0.0",
-    "react-native-screens": "^2.0.0-alpha.22",
+    "react-native-screens": "^2.0.0-alpha.25",
     "typescript": "^3.7.4"
   },
   "peerDependencies": {
     "@react-navigation/native": "^5.0.0-alpha.0",
     "react": "*",
     "react-native": "*",
-    "react-native-screens": "^2.0.0-alpha.8"
+    "react-native-screens": "^2.0.0-alpha.25"
   },
   "@react-native-community/bob": {
     "source": "src",
@@ -45,7 +46,12 @@
     "targets": [
       "commonjs",
       "module",
-      "typescript"
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
     ]
   }
 }

packages/native-stack/src/navigators/createNativeStackNavigator.tsx

@@ -20,6 +20,7 @@ import NativeStackView from '../views/NativeStackView';
 import {
   NativeStackNavigatorProps,
   NativeStackNavigationOptions,
+  NativeStackNavigationEventMap,
 } from '../types';
 
 function NativeStackNavigator(props: NativeStackNavigatorProps) {
@@ -34,7 +35,7 @@ function NativeStackNavigator(props: NativeStackNavigatorProps) {
     StackNavigationState,
     StackRouterOptions,
     NativeStackNavigationOptions,
-    {}
+    NativeStackNavigationEventMap
   >(StackRouter, {
     initialRouteName,
     children,
@@ -44,13 +45,17 @@ function NativeStackNavigator(props: NativeStackNavigatorProps) {
   React.useEffect(
     () =>
       navigation.addListener &&
-      navigation.addListener('tabPress', (e: EventArg<'tabPress'>) => {
+      navigation.addListener('tabPress', e => {
         const isFocused = navigation.isFocused();
 
         // Run the operation in the next frame so we're sure all listeners have been run
         // This is necessary to know if preventDefault() has been called
         requestAnimationFrame(() => {
-          if (state.index > 0 && isFocused && !e.defaultPrevented) {
+          if (
+            state.index > 0 &&
+            isFocused &&
+            !(e as EventArg<'tabPress', true>).defaultPrevented
+          ) {
             // When user taps on already focused tab and we're inside the tab,
             // reset the stack to replicate native behaviour
             navigation.dispatch({

packages/native-stack/src/types.tsx

@@ -1,5 +1,7 @@
 import * as React from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
+// eslint-disable-next-line import/no-unresolved
+import { ScreenProps } from 'react-native-screens';
 import {
   DefaultNavigatorOptions,
   Descriptor,
@@ -12,6 +14,17 @@ import {
   StackRouterOptions,
 } from '@react-navigation/routers';
 
+export type NativeStackNavigationEventMap = {
+  /**
+   * Event which fires when the screen appears.
+   */
+  appear: { data: undefined };
+  /**
+   * Event which fires when the current screen is dismissed by hardware back (on Android) or dismiss gesture (swipe back or down).
+   */
+  dismiss: { data: undefined };
+};
+
 export type NativeStackNavigationProp<
   ParamList extends ParamListBase,
   RouteName extends keyof ParamList = string
@@ -20,7 +33,7 @@ export type NativeStackNavigationProp<
   RouteName,
   StackNavigationState,
   NativeStackNavigationOptions,
-  {}
+  NativeStackNavigationEventMap
 > & {
   /**
    * Push a new screen onto the stack.
@@ -45,7 +58,10 @@ export type NativeStackNavigationProp<
   popToTop(): void;
 };
 
-export type NativeStackNavigationHelpers = NavigationHelpers<ParamListBase, {}>;
+export type NativeStackNavigationHelpers = NavigationHelpers<
+  ParamListBase,
+  NativeStackNavigationEventMap
+>;
 
 export type NativeStackNavigationConfig = {};
 
@@ -168,15 +184,21 @@ export type NativeStackNavigationOptions = {
   gestureEnabled?: boolean;
   /**
    * How should the screen be presented.
+   * The following values are currently supported:
+   * - "push" – the new screen will be pushed onto a stack which on iOS means that the default animation will be slide from the side, the animation on Android may vary depending on the OS version and theme.
+   * - "modal" – the new screen will be presented modally. In addition this allow for a nested stack to be rendered inside such screens
+   * - "transparentModal" – the new screen will be presented modally but in addition the second to last screen will remain attached to the stack container such that if the top screen is non opaque the content below can still be seen. If "modal" is used instead the below screen will get unmounted as soon as the transition ends.
    */
-  presentation?: 'modal' | 'transparentModal' | 'push';
+  stackPresentation?: ScreenProps['stackPresentation'];
   /**
-   * How should the screen should be animated.
-   * Only supported on Android.
-   *
-   * @platform android
+   * How the screen should appear/disappear when pushed or popped at the top of the stack.
+   * The following values are currently supported:
+   * - "default" – uses a platform default animation
+   * - "fade" – fades screen in or out
+   * - "flip" – flips the screen, requires stackPresentation: "modal" (iOS only)
+   * - "none" – the screen appears/dissapears without an animation
    */
-  animation?: 'default' | 'fade' | 'none';
+  stackAnimation?: ScreenProps['stackAnimation'];
 };
 
 export type NativeStackNavigatorProps = DefaultNavigatorOptions<

packages/native-stack/src/views/HeaderConfig.tsx

@@ -1,8 +1,6 @@
 import * as React from 'react';
 import {
-  // @ts-ignore
   ScreenStackHeaderConfig,
-  // @ts-ignore
   ScreenStackHeaderRightView,
   // eslint-disable-next-line import/no-unresolved
 } from 'react-native-screens';

packages/native-stack/src/views/NativeStackView.tsx

@@ -3,7 +3,6 @@ import { View, StyleSheet } from 'react-native';
 import { StackNavigationState, StackActions } from '@react-navigation/routers';
 
 import {
-  // @ts-ignore
   ScreenStack,
   Screen as ScreenComponent,
   ScreenProps,
@@ -16,13 +15,7 @@ import {
   NativeStackDescriptorMap,
 } from '../types';
 
-const Screen = (ScreenComponent as unknown) as React.ComponentType<
-  ScreenProps & {
-    stackPresentation?: 'push' | 'modal' | 'transparentModal';
-    stackAnimation?: 'default' | 'fade' | 'none';
-    onDismissed?: () => void;
-  }
->;
+const Screen = (ScreenComponent as unknown) as React.ComponentType<ScreenProps>;
 
 type Props = {
   state: StackNavigationState;
@@ -41,15 +34,30 @@ export default function NativeStackView({
     <ScreenStack style={styles.container}>
       {state.routes.map(route => {
         const { options, render: renderScene } = descriptors[route.key];
-        const { presentation = 'push', animation, contentStyle } = options;
+        const {
+          stackPresentation = 'push',
+          stackAnimation,
+          contentStyle,
+        } = options;
 
         return (
           <Screen
             key={route.key}
             style={StyleSheet.absoluteFill}
-            stackPresentation={presentation}
-            stackAnimation={animation}
+            stackPresentation={stackPresentation}
+            stackAnimation={stackAnimation}
+            onAppear={() => {
+              navigation.emit({
+                type: 'appear',
+                target: route.key,
+              });
+            }}
             onDismissed={() => {
+              navigation.emit({
+                type: 'dismiss',
+                target: route.key,
+              });
+
               navigation.dispatch({
                 ...StackActions.pop(),
                 source: route.key,

packages/native-stack/tsconfig.build.json

@@ -0,0 +1,6 @@
+{
+  "extends": "./tsconfig",
+  "compilerOptions": {
+    "paths": {}
+  }
+}

packages/native-stack/tsconfig.json

@@ -1,3 +1,11 @@
 {
-  "extends": "../../tsconfig"
+  "extends": "../../tsconfig",
+  "references": [
+    { "path": "../core" },
+    { "path": "../native" },
+    { "path": "../routers" }
+  ],
+  "compilerOptions": {
+    "outDir": "./lib/typescript"
+  }
 }

packages/native/CHANGELOG.md

@@ -3,6 +3,52 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.0.0-alpha.29](https://github.com/react-navigation/navigation-ex/tree/master/packages/native/compare/@react-navigation/native@5.0.0-alpha.28...@react-navigation/native@5.0.0-alpha.29) (2020-01-24)
+
+**Note:** Version bump only for package @react-navigation/native
+
+
+
+
+
+# [5.0.0-alpha.28](https://github.com/react-navigation/navigation-ex/tree/master/packages/native/compare/@react-navigation/native@5.0.0-alpha.27...@react-navigation/native@5.0.0-alpha.28) (2020-01-23)
+
+
+### Features
+
+* let the navigator specify if default can be prevented ([da67e13](https://github.com/react-navigation/navigation-ex/tree/master/packages/native/commit/da67e134d2157201360427d3c10da24f24cae7aa))
+
+
+
+
+
+# [5.0.0-alpha.27](https://github.com/react-navigation/navigation-ex/tree/master/packages/native/compare/@react-navigation/native@5.0.0-alpha.26...@react-navigation/native@5.0.0-alpha.27) (2020-01-14)
+
+**Note:** Version bump only for package @react-navigation/native
+
+
+
+
+
+# [5.0.0-alpha.26](https://github.com/react-navigation/navigation-ex/tree/master/packages/native/compare/@react-navigation/native@5.0.0-alpha.25...@react-navigation/native@5.0.0-alpha.26) (2020-01-13)
+
+
+### Bug Fixes
+
+* make sure paths aren't aliased when building definitions ([65a5dac](https://github.com/react-navigation/navigation-ex/tree/master/packages/native/commit/65a5dac2bf887f4ba081ab15bd4c9870bb15697f)), closes [#265](https://github.com/react-navigation/navigation-ex/tree/master/packages/native/issues/265)
+
+
+
+
+
+# [5.0.0-alpha.25](https://github.com/react-navigation/navigation-ex/tree/master/packages/native/compare/@react-navigation/native@5.0.0-alpha.24...@react-navigation/native@5.0.0-alpha.25) (2020-01-13)
+
+**Note:** Version bump only for package @react-navigation/native
+
+
+
+
+
 # [5.0.0-alpha.24](https://github.com/react-navigation/navigation-ex/tree/master/packages/native/compare/@react-navigation/native@5.0.0-alpha.22...@react-navigation/native@5.0.0-alpha.24) (2020-01-09)
 
 **Note:** Version bump only for package @react-navigation/native