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

.circleci/config.yml

@@ -49,6 +49,7 @@ jobs:
             at: ~/project
         - run: |
             yarn lerna run prepare
+            node scripts/check-types-path.js
 
 workflows:
   version: 2

.github/ISSUE_TEMPLATE.md

@@ -1,40 +0,0 @@
-## The issue tracker is reserved for bug reports only.
-
-If you have a question, feature request, or an idea for improving the library or its related tools, please try one of the following resources:
-
-- [Read the documentation](https://reactnavigation.org/)
-- [Post an issue to the website repository if you'd like to see a documentation change](http://github.com/react-navigation/website)
-- [Post a feature request to Canny](https://react-navigation.canny.io/feature-requests)
-- [Write a RFC if you have ideas for how to implement a feature request](https://github.com/react-navigation/rfcs)
-- [Get help on Discord chat (#react-navigation on Reactiflux)](https://discord.gg/4xEK3nD) or [on StackOverflow](https://stackoverflow.com/questions/tagged/react-navigation)
-- Search for your issue - it may have already been answered or even fixed in the development branch. However, if you find that an old, closed issue still persists in the latest version, you should open a new issue.
-
-Bugs with react-navigation must be reproducible *without any external libraries that operate on it*. This means that if you are attempting to use Redux or MobX with it and you think you have found a bug, you must be able to reproduce it without Redux or MobX in this report.
-
----
-
-### Current Behavior
-
-- What code are you running and what is happening?
-- Include a screenshot if it makes sense.
-
-### Expected Behavior
-
-- What do you expect should be happening?
-- Include a screenshot if it makes sense.
-
-### How to reproduce
-
-- You must provide a way to reproduce the problem. If you are having an issue with your machine or build tools, the issue belongs on another repository as that is outside of the scope of React Navigation.
-- Either re-create the bug on [Snack](https://snack.expo.io) or link to a GitHub repository with code that reproduces the bug.
-- Explain how to run the example app and any steps that we need to take to reproduce the issue from the example app.
-
-### Your Environment
-
-| software         | version
-| ---------------- | -------
-| react-navigation |
-| react-native     |
-| expo             |
-| node             |
-| npm or yarn      |

.github/ISSUE_TEMPLATE/bug-report-bottom-tabs.md

@@ -0,0 +1,38 @@
+---
+name: Bottom Tab Navigator
+about: Report an issue with Bottom Tab Navigator (@react-navigation/bottom-tabs)
+title: ''
+labels: bug, package:bottom-tabs
+assignees: ''
+---
+
+**Current Behavior**
+
+- What code are you running and what is happening?
+- Include a screenshot or video if it makes sense.
+
+**Expected Behavior**
+
+- What do you expect should be happening?
+- Include a screenshot or video if it makes sense.
+
+**How to reproduce**
+
+- You must provide a way to reproduce the problem. If you are having an issue with your machine or build tools, the issue belongs on another repository as that is outside of the scope of React Navigation.
+- Either re-create the bug on [Snack](https://snack.expo.io) or link to a GitHub repository with code that reproduces the bug.
+- Explain how to run the example app and any steps that we need to take to reproduce the issue from the example app.
+- Keep the repro code as simple as possible, with the minimum amount of code required to repro the issue.
+- Before reporting an issue, make sure you are on latest version of the package.
+
+**Your Environment**
+
+| software                      | version |
+| ----------------------------- | ------- |
+| iOS or Android                |
+| @react-navigation/native      |
+| @react-navigation/bottom-tabs |
+| react-native-screens          |
+| react-native                  |
+| expo                          |
+| node                          |
+| npm or yarn                   |

.github/ISSUE_TEMPLATE/bug-report-drawer.md

@@ -0,0 +1,41 @@
+---
+name: Drawer Navigator
+about: Report an issue with Drawer Navigator (@react-navigation/drawer)
+title: ''
+labels: bug, package:drawer
+assignees: ''
+---
+
+**Current Behavior**
+
+- What code are you running and what is happening?
+- Include a screenshot or video if it makes sense.
+
+**Expected Behavior**
+
+- What do you expect should be happening?
+- Include a screenshot or video if it makes sense.
+
+**How to reproduce**
+
+- You must provide a way to reproduce the problem. If you are having an issue with your machine or build tools, the issue belongs on another repository as that is outside of the scope of React Navigation.
+- Either re-create the bug on [Snack](https://snack.expo.io) or link to a GitHub repository with code that reproduces the bug.
+- Explain how to run the example app and any steps that we need to take to reproduce the issue from the example app.
+- Keep the repro code as simple as possible, with the minimum amount of code required to repro the issue.
+- Before reporting an issue, make sure you are on latest version of the package.
+
+**Your Environment**
+
+| software                       | version |
+| ------------------------------ | ------- |
+| iOS or Android                 |
+| @react-navigation/native       |
+| @react-navigation/drawer       |
+| react-native-reanimated        |
+| react-native-gesture-handler   |
+| react-native-safe-area-context |
+| react-native-screens           |
+| react-native                   |
+| expo                           |
+| node                           |
+| npm or yarn                    |

.github/ISSUE_TEMPLATE/bug-report-material-bottom-tabs.md

@@ -0,0 +1,38 @@
+---
+name: Material Bottom Tab Navigator
+about: Report an issue with Material Bottom Tab Navigator (@react-navigation/material-bottom-tabs)
+title: ''
+labels: bug, package:material-bottom-tabs
+assignees: ''
+---
+
+**Current Behavior**
+
+- What code are you running and what is happening?
+- Include a screenshot or video if it makes sense.
+
+**Expected Behavior**
+
+- What do you expect should be happening?
+- Include a screenshot or video if it makes sense.
+
+**How to reproduce**
+
+- You must provide a way to reproduce the problem. If you are having an issue with your machine or build tools, the issue belongs on another repository as that is outside of the scope of React Navigation.
+- Either re-create the bug on [Snack](https://snack.expo.io) or link to a GitHub repository with code that reproduces the bug.
+- Explain how to run the example app and any steps that we need to take to reproduce the issue from the example app.
+- Keep the repro code as simple as possible, with the minimum amount of code required to repro the issue.
+- Before reporting an issue, make sure you are on latest version of the package.
+
+**Your Environment**
+
+| software                               | version |
+| -------------------------------------- | ------- |
+| iOS or Android                         |
+| @react-navigation/native               |
+| @react-navigation/material-bottom-tabs |
+| react-native-paper                     |
+| react-native                           |
+| expo                                   |
+| node                                   |
+| npm or yarn                            |

.github/ISSUE_TEMPLATE/bug-report-material-top-tabs.md

@@ -0,0 +1,38 @@
+---
+name: Material Top Tab Navigator
+about: Report an issue with Material Top Tab Navigator (@react-navigation/material-top-tabs)
+title: ''
+labels: bug, package:material-top-tabs
+assignees: ''
+---
+
+**Current Behavior**
+
+- What code are you running and what is happening?
+- Include a screenshot or video if it makes sense.
+
+**Expected Behavior**
+
+- What do you expect should be happening?
+- Include a screenshot or video if it makes sense.
+
+**How to reproduce**
+
+- You must provide a way to reproduce the problem. If you are having an issue with your machine or build tools, the issue belongs on another repository as that is outside of the scope of React Navigation.
+- Either re-create the bug on [Snack](https://snack.expo.io) or link to a GitHub repository with code that reproduces the bug.
+- Explain how to run the example app and any steps that we need to take to reproduce the issue from the example app.
+- Keep the repro code as simple as possible, with the minimum amount of code required to repro the issue.
+- Before reporting an issue, make sure you are on latest version of the package.
+
+**Your Environment**
+
+| software                            | version |
+| ----------------------------------- | ------- |
+| iOS or Android                      |
+| @react-navigation/native            |
+| @react-navigation/material-top-tabs |
+| react-native-tab-view               |
+| react-native                        |
+| expo                                |
+| node                                |
+| npm or yarn                         |

.github/ISSUE_TEMPLATE/bug-report-native-stack.md

@@ -0,0 +1,38 @@
+---
+name: Native Stack Navigator
+about: Report an issue with Native Stack Navigator (@react-navigation/native-stack)
+title: ''
+labels: bug, package:native-stack
+assignees: ''
+---
+
+**Current Behavior**
+
+- What code are you running and what is happening?
+- Include a screenshot or video if it makes sense.
+
+**Expected Behavior**
+
+- What do you expect should be happening?
+- Include a screenshot or video if it makes sense.
+
+**How to reproduce**
+
+- You must provide a way to reproduce the problem. If you are having an issue with your machine or build tools, the issue belongs on another repository as that is outside of the scope of React Navigation.
+- Either re-create the bug on [Snack](https://snack.expo.io) or link to a GitHub repository with code that reproduces the bug.
+- Explain how to run the example app and any steps that we need to take to reproduce the issue from the example app.
+- Keep the repro code as simple as possible, with the minimum amount of code required to repro the issue.
+- Before reporting an issue, make sure you are on latest version of the package.
+
+**Your Environment**
+
+| software                       | version |
+| ------------------------------ | ------- |
+| iOS or Android                 |
+| @react-navigation/native       |
+| @react-navigation/native-stack |
+| react-native-screens           |
+| react-native                   |
+| expo                           |
+| node                           |
+| npm or yarn                    |

.github/ISSUE_TEMPLATE/bug-report-stack.md

@@ -0,0 +1,40 @@
+---
+name: Stack Navigator
+about: Report an issue with Stack Navigator (@react-navigation/stack)
+title: ''
+labels: bug, package:stack
+assignees: ''
+---
+
+**Current Behavior**
+
+- What code are you running and what is happening?
+- Include a screenshot or video if it makes sense.
+
+**Expected Behavior**
+
+- What do you expect should be happening?
+- Include a screenshot or video if it makes sense.
+
+**How to reproduce**
+
+- You must provide a way to reproduce the problem. If you are having an issue with your machine or build tools, the issue belongs on another repository as that is outside of the scope of React Navigation.
+- Either re-create the bug on [Snack](https://snack.expo.io) or link to a GitHub repository with code that reproduces the bug.
+- Explain how to run the example app and any steps that we need to take to reproduce the issue from the example app.
+- Keep the repro code as simple as possible, with the minimum amount of code required to repro the issue.
+- Before reporting an issue, make sure you are on latest version of the package.
+
+**Your Environment**
+
+| software                       | version |
+| ------------------------------ | ------- |
+| iOS or Android                 |
+| @react-navigation/native       |
+| @react-navigation/stack        |
+| react-native-gesture-handler   |
+| react-native-safe-area-context |
+| react-native-screens           |
+| react-native                   |
+| expo                           |
+| node                           |
+| npm or yarn                    |

.github/ISSUE_TEMPLATE/bug-report.md

@@ -0,0 +1,36 @@
+---
+name: Other bugs
+about: Report an issue which is not about a specific navigator.
+title: ''
+labels: bug
+assignees: ''
+---
+
+**Current Behavior**
+
+- What code are you running and what is happening?
+- Include a screenshot or video if it makes sense.
+
+**Expected Behavior**
+
+- What do you expect should be happening?
+- Include a screenshot or video if it makes sense.
+
+**How to reproduce**
+
+- You must provide a way to reproduce the problem. If you are having an issue with your machine or build tools, the issue belongs on another repository as that is outside of the scope of React Navigation.
+- Either re-create the bug on [Snack](https://snack.expo.io) or link to a GitHub repository with code that reproduces the bug.
+- Explain how to run the example app and any steps that we need to take to reproduce the issue from the example app.
+- Keep the repro code as simple as possible, with the minimum amount of code required to repro the issue.
+- Before reporting an issue, make sure you are on latest version of the package.
+
+**Your Environment**
+
+| software                       | version |
+| ------------------------------ | ------- |
+| iOS or Android                 |
+| @react-navigation/native       |
+| react-native                   |
+| expo                           |
+| node                           |
+| npm or yarn                    |

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,20 @@
+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
+    url: https://react-navigation.canny.io/feature-requests
+    about: Post a feature request on Canny.
+  - name: StackOverflow
+    url: https://stackoverflow.com/questions/tagged/react-navigation
+    about: Ask and answer questions using the react-navigation label.
+  - name: Reactiflux
+    url: https://www.reactiflux.com/
+    about: Chat with other community members in the react-navigation channel.
+  - name: Write an RFC
+    url: https://github.com/react-navigation/rfcs
+    about: Write a RFC if you have ideas for how to implement a feature request.

.github/PULL_REQUEST.md

@@ -1,10 +1,10 @@
 Please provide enough information so that others can review your pull request:
 
-## Motivation
+**Motivation**
 
 Explain the **motivation** for making this change. What existing problem does the pull request solve?
 
-## Test plan
+**Test plan**
 
 Demonstrate the code is solid. Example: the exact commands you ran and their output, screenshots / videos if the pull request changes UI.
 
@@ -12,6 +12,6 @@ Make sure you test on both platforms if your change affects both platforms.
 
 The code must pass tests.
 
-## Code formatting
+**Code formatting**
 
 Look around. Match the style of the rest of the codebase. Run `yarn lint --fix` before committing.

README.md

@@ -1,496 +1,12 @@
-# Rethinking Navigation
+# React Navigation 5
 
 [![Build Status][build-badge]][build]
 [![Code Coverage][coverage-badge]][coverage]
 [![MIT License][license-badge]][license]
 
-An exploration of a component-first API for React Navigation for building more dynamic navigation solutions.
+Routing and navigation for your React Native apps with a component-first API.
 
-## Considerations
-
-- Should play well with static type system
-- Navigation state should be contained in root component (helpful for stuff such as deep linking)
-- Component-first API
-
-## Building blocks
-
-### `NavigationContainer`
-
-Component which wraps the whole app. It stores the state for the whole navigation tree.
-
-### `useNavigationBuilder`
-
-Hook which can access the navigation state from the context. Along with the state, it also provides some helpers to modify the navigation state provided by the router. All state changes are notified to the parent `NavigationContainer`.
-
-### Router
-
-The router object provides various helper methods to deal with the state and actions, a reducer to update the state as well as some action creators.
-
-The router is responsible for handling actions dispatched by calling methods on the `navigation` object. If the router cannot handle an action, it can return `null`, which would propagate the action to other routers until it's handled.
-
-### Navigator
-
-Navigators bundle a router and a view which takes the navigation state and decides how to render it.
-
-A simple navigator could look like this:
-
-```js
-import { createNavigatorFactory } from '@react-navigation/core';
-
-function StackNavigator({ initialRouteName, children, ...rest }) {
-  // The `navigation` object contains the navigation state and some helpers (e.g. push, pop)
-  // The `descriptors` object contains the screen options and a helper for rendering a screen
-  const { state, navigation, descriptors } = useNavigationBuilder(StackRouter, {
-    initialRouteName,
-    children,
-  });
-
-  return (
-    // The view determines how to animate any state changes
-    <StackView
-      state={state}
-      navigation={navigation}
-      descriptors={descriptors}
-      {...rest}
-    />
-  );
-}
-
-export default createNavigatorFactory(StackNavigator);
-```
-
-The navigator can render a screen by calling `descriptors[route.key].render()`. Internally, the descriptor adds appropriate wrappers to handle nested state.
-
-## Architectural differences
-
-### Shape of the navigation state
-
-The shape of the navigation state looks very similar to the current implementation. There are few important differences:
-
-- The name of the route is in the `route.name` property instead of `route.routeName`.
-- The state of the child navigator exists on a separate property `route.state`.
-- The state object contains a `routeNames` property which contains the list of defined route names in an array of strings,
-
-Example:
-
-```js
-{
-  index: 0,
-  key: 'stack-ytwk65',
-  routeNames: ['home', 'profile', 'settings'],
-  routes: [
-    {
-      key: 'home-hjds3b',
-      name: 'home',
-      state: {
-        index: 1,
-        key: 'tab-jhsf6g',
-        routeNames: ['feed', 'recommended'],
-        routes: [
-          {
-            key: 'feed-jv2iud',
-            name: 'feed',
-          },
-          {
-            key: 'recommended-njdh63',
-            name: 'recommended',
-          },
-        ],
-      },
-    },
-  ],
-}
-```
-
-### Deriving initial state
-
-In the current implementation of React Navigation, the initial state is extracted from the navigator definitions. This is possible because they are defined statically. In our case, it's not possible because the screens are rendered dynamically.
-
-Turns out we don't really need the initial state in the `NavigationContainer`. This state is the default state, so we can store `undefined` instead, and let the navigators initialize their initial state themselves. Next time an action modifies the state, we update the value in the container.
-
-If an initial state is specified, e.g. as a result of `Linking.getInitialURL()`, the child navigators will use that state, instead of having to initialize it themselves.
-
-### Passing state to child navigator
-
-Navigation state is exposed to children navigators via React context instead of having to pass it down manually. This lets the user nest navigators freely without having to worry about properly passing the state down.
-
-### Accessing state of other navigators
-
-Navigators should not access the state of other navigators. It might be tempting to access the state of a child route to perform some checks, but it's not going to work correctly, as the state object may not exist yet.
-
-Instead of direct state access, navigators should communicate via events. Each navigator should access and modify its own state only.
-
-### Bubbling of actions
-
-In the current implementation of React Navigation, routers manually call the child routers to apply any actions. Since we have a component based architecture, this is not really possible.
-
-Instead, we use an event based system. Child navigators can add listeners to handle actions. If the parent couldn't handle the action, it'll call the listeners. The event system is built into the core and the routers don't need to worry about it.
-
-When an action can be bubble, the `getStateForAction` method from a router should return `null`, otherwise it should return the state object.
-
-It's also possible to disable bubbling of actions when dispatching them by adding a `target` key in the action. The `target` key should refer to the key of the navigator that should handle the action.
-
-## Basic usage
-
-```js
-import { createStackNavigator } from '@react-navigation/stack';
-import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
-
-const Stack = createStackNavigator();
-const Tab = createBottomTabNavigator();
-
-function App() {
-  return (
-    <NavigationContainer>
-      <Stack.Navigator initialRouteName="home">
-        <Stack.Screen name="settings" component={Settings} />
-        <Stack.Screen
-          name="profile"
-          component={Profile}
-          options={{ title: 'John Doe' }}
-        />
-        <Stack.Screen name="home">
-          {() => (
-            <Tab.Navigator initialRouteName="feed">
-              <Tab.Screen name="feed" component={Feed} />
-              <Tab.Screen name="article" component={Article} />
-              <Tab.Screen name="notifications">
-                {props => <Notifications {...props} />}
-              </Tab.Screen>
-            </Tab.Navigator>
-          )}
-        </Stack.Screen>
-      </Stack.Navigator>
-    </NavigationContainer>
-  );
-}
-```
-
-Navigators need to have `Screen` components as their direct children. These components don't do anything by themselves, but the navigator can extract information from these and determine what to render. Implementation-wise, we use `React.Children` API for this purpose.
-
-The content to render can be specified in 2 ways:
-
-1. React component in `component` prop (recommended)
-2. Render callback as children
-
-When a React component is specified, the navigator takes care of adding a `React.memo` to prevent unnecessary re-renders. However, it's not possible to pass extra props to the component this way. It's preferable to use the context API for such cases instead of props.
-
-A render callback which doesn't have such limitation and is easier to use for this purpose. However, performance optimization for the component is left to the user in such case.
-
-The rendered component will receives a `navigation` prop with various helpers and a `route` prop which represents the route being rendered.
-
-## Setting screen options
-
-In React Navigation, screen options can be specified in a static property on the component (`navigationOptions`). This poses few issues:
-
-- It's not possible to configure options based on props, state or context
-- To update the props based on an action in the component (such as button press), we need to do it in a hacky way by changing params
-- It breaks when used with HOCs which don't hoist static props, which is a common source of confusion
-
-Instead of a static property, we expose a method to configure screen options:
-
-```js
-function Selection({ navigation }) {
-  const [selectedIds, setSelectedIds] = React.useState([]);
-
-  navigation.setOptions({
-    title: `${selectedIds.length} items selected`,
-  });
-
-  return <SelectionList onSelect={id => setSelectedIds(ids => [...ids, id])} />;
-}
-```
-
-This allows options to be changed based on props, state or context, and doesn't have the disadvantages of static configuration.
-
-## Navigation events
-
-Screens can add listeners on the `navigation` prop like in React Navigation. By default, `focus` and `blur` events are fired when focused screen changes:
-
-```js
-function Profile({ navigation }) {
-  React.useEffect(() =>
-    navigation.addListener('focus', () => {
-      // do something
-    })
-  );
-
-  return <ProfileContent />;
-}
-```
-
-The `navigation.addListener` method returns a function to remove the listener which can be returned as the cleanup function in an effect.
-
-Navigators can also emit custom events using the `emit` method in the `navigation` object passed:
-
-```js
-navigation.emit({
-  type: 'transitionStart',
-  data: { blurring: false },
-  target: route.key,
-});
-```
-
-The `data` is available under the `data` property in the `event` object, i.e. `event.data`.
-
-The `target` property determines the screen that will receive the event. If the `target` property is omitted, the event is dispatched to all screens in the navigator.
-
-Screens cannot emit events as there is no `emit` method on a screen's `navigation` prop.
-
-If you don't need to get notified of focus change, but just need to check if the screen is currently focused in a callback, you can use the `navigation.isFocused()` method which returns a boolean. Note that it's not safe to use this in `render`. Only use it in callbacks, event listeners etc.
-
-## Additional utilities
-
-### Access navigation anywhere
-
-Passing the `navigation` prop down can be tedious. The library exports a `useNavigation` hook which can access the `navigation` prop from the parent screen:
-
-```js
-const navigation = useNavigation();
-```
-
-### Side-effects in focused screen
-
-Sometimes we want to run side-effects when a screen is focused. A side effect may involve things like adding an event listener, fetching data, updating document title, etc. While this can be achieved using `focus` and `blur` events, it's not very ergonomic.
-
-To make this easier, the library exports a `useFocusEffect` hook:
-
-```js
-import { useFocusEffect } from '@react-navigation/core';
-
-function Profile({ userId }) {
-  const [user, setUser] = React.useState(null);
-
-  const fetchUser = React.useCallback(() => {
-    const request = API.fetchUser(userId).then(
-      data => setUser(data),
-      error => alert(error.message)
-    );
-
-    return () => request.abort();
-  }, [userId]);
-
-  useFocusEffect(fetchUser);
-
-  return <ProfileContent user={user} />;
-}
-```
-
-The `useFocusEffect` is analogous to React's `useEffect` hook. The only difference is that it runs on focus instead of render.
-
-**NOTE:** To avoid the running the effect too often, it's important to wrap the callback in `useCallback` before passing it to `useFocusEffect` as shown in the example.
-
-### Render based on focus state
-
-We might want to render different content based on the current focus state of the screen. The library exports a `useIsFocused` hook to make this easier:
-
-```js
-import { useIsFocused } from '@react-navigation/core';
-
-// ...
-
-const isFocused = useIsFocused();
-```
-
-## React Native
-
-For proper UX in React Native, we need to respect platform behavior such as the device back button on Android, deep linking etc. The library exports few hooks to make it easier.
-
-### Back button integration
-
-When the back button on the device is pressed, we also want to navigate back in the focused navigator. The library exports a `useBackButton` hook to handle this:
-
-```js
-import { useBackButton } from '@react-navigation/native';
-
-// ...
-
-const ref = React.useRef();
-
-useBackButton(ref);
-
-return <NavigationContainer ref={ref}>{/* content */}</NavigationContainer>;
-```
-
-### Scroll to top on tab button press
-
-When there's a scroll view in a tab and the user taps on the already focused tab bar again, we might want to scroll to top in our scroll view. The library exports a `useScrollToTop` hook to handle this:
-
-```js
-import { useScrollToTop } from '@react-navigation/native';
-
-// ...
-
-const ref = React.useRef();
-
-useScrollToTop(ref);
-
-return <ScrollView ref={ref}>{/* content */}</ScrollView>;
-```
-
-The hook can accept a ref object to any view that has a `scrollTo` method.
-
-### Deep-link integration
-
-To handle incoming links, we need to handle 2 scenarios:
-
-1. If the app wasn't previously open, we need to set the initial state based on the link
-2. If the app was already open, we need to update the state to reflect the incoming link
-
-The current implementation of React Navigation has an advantage in handling deep links and is able to automatically set the state based on the path definitions for each screen. It's possible because it can get the configuration for all screens statically.
-
-With our dynamic architecture, we can't determine the state automatically. So it's necessary to manually translate a deep link to a navigation state. The library exports a `getStateFromPath` utility to convert a URL to a state object if the path segments translate directly to route names.
-
-For example, the path `/rooms/chat?user=jane` will be translated to a state object like this:
-
-```js
-{
-  routes: [
-    {
-      name: 'rooms',
-      state: {
-        routes: [
-          {
-            name: 'chat',
-            params: { user: 'jane' },
-          },
-        ],
-      },
-    },
-  ],
-}
-```
-
-The `useLinking` hooks makes it easier to handle incoming links:
-
-```js
-import { useLinking } from '@react-navigation/native';
-
-// ...
-
-const ref = React.useRef();
-
-const { getInitialState } = useLinking(ref, {
-  prefixes: ['https://myapp.com', 'myapp://'],
-});
-
-const [isReady, setIsReady] = React.useState(false);
-const [initialState, setInitialState] = React.useState();
-
-React.useEffect(() => {
-  getInitialState()
-    .catch(() => {})
-    .then(state => {
-      if (state !== undefined) {
-        setInitialState(state);
-      }
-
-      setIsReady(true);
-    });
-}, [getInitialState]);
-
-if (!isReady) {
-  return null;
-}
-
-return (
-  <NavigationContainer initialState={initialState} ref={ref}>
-    {/* content */}
-  </NavigationContainer>
-);
-```
-
-The hook also accepts a `getStateFromPath` option where you can provide a custom function to convert the URL to a valid state object for more advanced use cases.
-
-## Type-checking
-
-The library is written with TypeScript and provides type definitions for TypeScript projects.
-
-When building custom navigators, each navigator also need to export a custom type for the `navigation` prop which should contain the actions they provide, .e.g. `push` for stack, `jumpTo` for tab etc. and pass correct type parameters to the helper functions to ensure that it works well with type-checking.
-
-Currently type checking and intelliSense works for route name and params. The user has to define a type alias with a list of routes along with the type of params they use.
-
-For our example above, we need 2 separate types for stack and tabs:
-
-```ts
-type StackParamList = {
-  settings: undefined;
-  profile: { userId: string };
-  home: undefined;
-};
-
-type TabParamList = {
-  feed: undefined;
-  article: undefined;
-  notifications: undefined;
-};
-```
-
-In a component, it's possible to annotate the `navigation` and `route` props using these types:
-
-```ts
-type Props = {
-  navigation: StackNavigationProp<StackParamList, 'profile'>;
-  route: RouteProp<StackParamList, 'profile'>;
-};
-
-function Profile(props: Props) {
-  // Content
-}
-```
-
-Annotating the `navigation` prop will be enough for provide type-checking for actions such as `navigate` etc. Annotating `route` will provide type-checking for accessing `params` for the current route.
-
-For nested navigators, the `navigation` prop is a combination of multiple `navigation` props, so we need to combine multiple types to type them. We export a type called `CompositeNavigationProp` to make it easier:
-
-```ts
-type FeedScreenNavigationProp = CompositeNavigationProp<
-  TabNavigationProp<TabParamList, 'feed'>,
-  StackNavigationProp<StackParamList>
->;
-```
-
-The `CompositeNavigationProp` type takes 2 parameters, first parameter is the primary navigation type (type for the navigator that owns this screen) and second parameter is the secondary navigation type (type for a parent navigator). The primary navigation type should always have the screen's route name as it's second parameter.
-
-For multiple parent navigators, this secondary type should be nested:
-
-```ts
-type FeedScreenNavigationProp = CompositeNavigationProp<
-  TabNavigationProp<TabParamList, 'feed'>,
-  CompositeNavigationProp<
-    StackNavigationProp<StackParamList>,
-    DrawerNavigationProp<DrawerParamList>
-  >
->;
-```
-
-To annotate the `navigation` prop from `useNavigation`, we can use a type parameter:
-
-```ts
-const navigation = useNavigation<FeedScreenNavigationProp>();
-```
-
-It's also possible to type-check the navigator to some extent. To do this, we need to pass a generic when creating the navigator object:
-
-```ts
-const Stack = createStackNavigator<StackParamList>();
-```
-
-And then we can use it:
-
-```js
-<Stack.Navigator initialRouteName="profile">
-  <Stack.Screen name="settings" component={Settings} />
-  <Stack.Screen
-    name="profile"
-    component={Profile}
-    options={{ title: 'My profile' }}
-  />
-  <Stack.Screen name="home" component={Home} />
-</Stack.Navigator>
-```
-
-Unfortunately it's not possible to verify that the type of children elements are correct since [TypeScript doesn't support type-checking JSX elements](https://github.com/microsoft/TypeScript/issues/21699).
+Documentation can be found at [next.reactnavigation.org](https://next.reactnavigation.org/).
 
 ## Contributing
 
@@ -519,12 +35,32 @@ To fix formatting errors, run the following:
 yarn lint --fix
 ```
 
-Remember to add tests for your change if possible. Run the tests by:
+Remember to add tests for your change if possible. Run the unit tests by:
 
 ```sh
 yarn test
 ```
 
+Running the e2e tests with Detox (on iOS) requires the following:
+
+- Mac with macOS (at least macOS High Sierra 10.13.6)
+- Xcode 10.1+ with Xcode command line tools
+
+First you need to install `applesimutils` and `detox-cli`:
+
+```sh
+brew tap wix/brew
+brew install applesimutils
+yarn global add detox-cli
+```
+
+Then you can build and run the tests:
+
+```sh
+detox build -c ios.sim.debug
+detox test -c ios.sim.debug
+```
+
 ## Publishing
 
 To publish a new version, first we need to export a `GH_TOKEN` environment variable as mentioned [here](https://github.com/lerna/lerna/tree/master/commands/version#--create-release-type). Then run:
@@ -535,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

babel.config.js

@@ -13,5 +13,8 @@ module.exports = {
     '@babel/preset-react',
     '@babel/preset-typescript',
   ],
-  plugins: ['@babel/plugin-proposal-class-properties'],
+  plugins: [
+    '@babel/plugin-proposal-class-properties',
+    '@babel/plugin-proposal-optional-chaining',
+  ],
 };

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/__integration_tests__/index.test.js

@@ -0,0 +1,9 @@
+import { by, element, expect, device } from 'detox';
+
+beforeEach(async () => {
+  await device.reloadReactNative();
+});
+
+it('has dark theme toggle', async () => {
+  await expect(element(by.text('Dark theme'))).toBeVisible();
+});

example/e2e/config.json

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

example/e2e/init.js

@@ -0,0 +1,28 @@
+/* eslint-disable jest/no-jasmine-globals, import/no-commonjs */
+
+const detox = require('detox');
+const config = require('../../package.json').detox;
+const adapter = require('detox/runners/jest/adapter');
+const specReporter = require('detox/runners/jest/specReporter');
+
+// Set the default timeout
+jest.setTimeout(120000);
+
+jasmine.getEnv().addReporter(adapter);
+
+// This takes care of generating status logs on a per-spec basis. By default, jest only reports at file-level.
+// This is strictly optional.
+jasmine.getEnv().addReporter(specReporter);
+
+beforeAll(async () => {
+  await detox.init(config);
+}, 300000);
+
+beforeEach(async () => {
+  await adapter.beforeEach();
+});
+
+afterAll(async () => {
+  await adapter.afterAll();
+  await detox.cleanup();
+});

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

@@ -210,7 +210,7 @@ PODS:
     - React-cxxreact (= 0.61.5)
     - React-jsi (= 0.61.5)
   - React-jsinspector (0.61.5)
-  - react-native-safe-area-context (0.6.1):
+  - react-native-safe-area-context (0.6.2):
     - React
   - React-RCTActionSheet (0.61.5):
     - React-Core/RCTActionSheetHeaders (= 0.61.5)
@@ -249,11 +249,11 @@ PODS:
     - ReactCommon/jscallinvoker (= 0.61.5)
   - RNCMaskedView (0.1.5):
     - React
-  - RNGestureHandler (1.5.2):
+  - RNGestureHandler (1.5.3):
     - React
   - RNReanimated (1.4.0):
     - React
-  - RNScreens (2.0.0-alpha.17):
+  - RNScreens (2.0.0-alpha.22):
     - React
   - UMBarCodeScannerInterface (5.0.0)
   - UMCameraInterface (5.0.0)
@@ -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/node_modules/expo-app-loader-provider/ios`)
-  - EXConstants (from `../node_modules/expo/node_modules/expo-constants/ios`)
-  - EXErrorRecovery (from `../node_modules/expo-error-recovery/ios`)
-  - EXFileSystem (from `../node_modules/expo/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/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/expo/node_modules/unimodules-barcode-scanner-interface/ios`)
-  - UMCameraInterface (from `../node_modules/expo/node_modules/unimodules-camera-interface/ios`)
-  - UMConstantsInterface (from `../node_modules/expo/node_modules/unimodules-constants-interface/ios`)
-  - "UMCore (from `../node_modules/expo/node_modules/@unimodules/core/ios`)"
-  - UMFaceDetectorInterface (from `../node_modules/expo/node_modules/unimodules-face-detector-interface/ios`)
-  - UMFileSystemInterface (from `../node_modules/expo/node_modules/unimodules-file-system-interface/ios`)
-  - UMFontInterface (from `../node_modules/expo/node_modules/unimodules-font-interface/ios`)
-  - UMImageLoaderInterface (from `../node_modules/expo/node_modules/unimodules-image-loader-interface/ios`)
-  - UMPermissionsInterface (from `../node_modules/expo/node_modules/unimodules-permissions-interface/ios`)
-  - "UMReactNativeAdapter (from `../node_modules/expo/node_modules/@unimodules/react-native-adapter/ios`)"
-  - UMSensorsInterface (from `../node_modules/expo/node_modules/unimodules-sensors-interface/ios`)
-  - UMTaskManagerInterface (from `../node_modules/expo/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/node_modules/expo-app-loader-provider/ios"
+    path: "../../node_modules/expo-app-loader-provider/ios"
   EXConstants:
     :path: !ruby/object:Pathname
-    path: "../node_modules/expo/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/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/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/expo/node_modules/unimodules-barcode-scanner-interface/ios"
+    path: "../../node_modules/unimodules-barcode-scanner-interface/ios"
   UMCameraInterface:
     :path: !ruby/object:Pathname
-    path: "../node_modules/expo/node_modules/unimodules-camera-interface/ios"
+    path: "../../node_modules/unimodules-camera-interface/ios"
   UMConstantsInterface:
     :path: !ruby/object:Pathname
-    path: "../node_modules/expo/node_modules/unimodules-constants-interface/ios"
+    path: "../../node_modules/unimodules-constants-interface/ios"
   UMCore:
     :path: !ruby/object:Pathname
-    path: "../node_modules/expo/node_modules/@unimodules/core/ios"
+    path: "../../node_modules/@unimodules/core/ios"
   UMFaceDetectorInterface:
     :path: !ruby/object:Pathname
-    path: "../node_modules/expo/node_modules/unimodules-face-detector-interface/ios"
+    path: "../../node_modules/unimodules-face-detector-interface/ios"
   UMFileSystemInterface:
     :path: !ruby/object:Pathname
-    path: "../node_modules/expo/node_modules/unimodules-file-system-interface/ios"
+    path: "../../node_modules/unimodules-file-system-interface/ios"
   UMFontInterface:
     :path: !ruby/object:Pathname
-    path: "../node_modules/expo/node_modules/unimodules-font-interface/ios"
+    path: "../../node_modules/unimodules-font-interface/ios"
   UMImageLoaderInterface:
     :path: !ruby/object:Pathname
-    path: "../node_modules/expo/node_modules/unimodules-image-loader-interface/ios"
+    path: "../../node_modules/unimodules-image-loader-interface/ios"
   UMPermissionsInterface:
     :path: !ruby/object:Pathname
-    path: "../node_modules/expo/node_modules/unimodules-permissions-interface/ios"
+    path: "../../node_modules/unimodules-permissions-interface/ios"
   UMReactNativeAdapter:
     :path: !ruby/object:Pathname
-    path: "../node_modules/expo/node_modules/@unimodules/react-native-adapter/ios"
+    path: "../../node_modules/@unimodules/react-native-adapter/ios"
   UMSensorsInterface:
     :path: !ruby/object:Pathname
-    path: "../node_modules/expo/node_modules/unimodules-sensors-interface/ios"
+    path: "../../node_modules/unimodules-sensors-interface/ios"
   UMTaskManagerInterface:
     :path: !ruby/object:Pathname
-    path: "../node_modules/expo/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
@@ -492,7 +492,7 @@ SPEC CHECKSUMS:
   React-jsi: cb2cd74d7ccf4cffb071a46833613edc79cdf8f7
   React-jsiexecutor: d5525f9ed5f782fdbacb64b9b01a43a9323d2386
   React-jsinspector: fa0ecc501688c3c4c34f28834a76302233e29dc0
-  react-native-safe-area-context: 1f8a52fb0ab1321eef9a7099bd2c360d4e38264b
+  react-native-safe-area-context: 25260c5d0b9c53fd7aa88e569e2edae72af1f6a3
   React-RCTActionSheet: 600b4d10e3aea0913b5a92256d2719c0cdd26d76
   React-RCTAnimation: 791a87558389c80908ed06cc5dfc5e7920dfa360
   React-RCTBlob: d89293cc0236d9cb0933d85e430b0bbe81ad1d72
@@ -504,9 +504,9 @@ SPEC CHECKSUMS:
   React-RCTVibration: a49a1f42bf8f5acf1c3e297097517c6b3af377ad
   ReactCommon: 198c7c8d3591f975e5431bec1b0b3b581aa1c5dd
   RNCMaskedView: dd13f9f7b146a9ad82f9b7eb6c9b5548fcf6e990
-  RNGestureHandler: 946a7691e41df61e2c4b1884deab41a4cdc3afff
+  RNGestureHandler: 02905abe54e1f6e59c081a10b4bd689721e17aa6
   RNReanimated: b2ab0b693dddd2339bd2f300e770f6302d2e960c
-  RNScreens: f5e2ff7ccde2a1bfcf2a48c6fd07fdcf1fd95223
+  RNScreens: 6adf01eb4080f44af6cca551207c6b0505066857
   UMBarCodeScannerInterface: 3802c8574ef119c150701d679ab386e2266d6a54
   UMCameraInterface: 985d301f688ed392f815728f0dd906ca34b7ccb1
   UMConstantsInterface: bda5f8bd3403ad99e663eb3c4da685d063c5653c
@@ -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,54 +8,83 @@ 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;
     }, {}),
   },
 
+  server: {
+    enhanceMiddleware: middleware => {
+      return (req, res, next) => {
+        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'
+          );
+        }
+
+        return middleware(req, res, next);
+      };
+    },
+  },
+
   transformer: {
-    getTransformOptions: async () => ({
+    getTransformOptions: () => ({
       transform: {
         experimentalImportSupport: false,
         inlineRequires: true,

example/package.json

@@ -3,48 +3,39 @@
   "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",
     "@react-native-community/masked-view": "0.1.5",
-    "expo": "^36.0.0",
+    "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.0",
-    "react-native-paper": "^3.2.1",
+    "react-native-gesture-handler": "~1.5.3",
+    "react-native-paper": "^3.5.0",
     "react-native-reanimated": "^1.4.0",
-    "react-native-safe-area-context": "^0.6.0",
-    "react-native-screens": "^2.0.0-alpha.12",
+    "react-native-safe-area-context": "^0.6.2",
+    "react-native-screens": "^2.0.0-alpha.25",
     "react-native-tab-view": "2.11.0",
-    "react-native-unimodules": "^0.6.0",
-    "react-native-web": "^0.11.7",
-    "scheduler": "^0.18.0",
-    "shortid": "^2.2.15",
-    "use-subscription": "^1.3.0"
+    "react-native-unimodules": "^0.7.0",
+    "react-native-web": "^0.11.7"
   },
   "devDependencies": {
-    "@babel/core": "^7.7.2",
-    "@expo/webpack-config": "^0.10.1",
-    "@types/react": "^16.9.11",
-    "@types/react-native": "^0.60.22",
-    "babel-preset-expo": "^7.1.0",
-    "expo-cli": "^3.8.0",
-    "typescript": "^3.7.2"
+    "@babel/core": "^7.7.7",
+    "@expo/webpack-config": "^0.10.9",
+    "@types/react": "^16.9.17",
+    "@types/react-native": "^0.60.30",
+    "babel-preset-expo": "^8.0.0",
+    "expo-cli": "^3.11.5",
+    "typescript": "^3.7.4"
   }
 }

example/src/Screens/AuthFlow.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { View, TextInput, ActivityIndicator, StyleSheet } from 'react-native';
 import { Title, Button } from 'react-native-paper';
-import { ParamListBase } from '@react-navigation/core';
+import { ParamListBase } from '@react-navigation/native';
 import {
   createStackNavigator,
   HeaderBackButton,
@@ -9,11 +9,27 @@ import {
 } from '@react-navigation/stack';
 
 type AuthStackParams = {
-  splash: undefined;
-  home: undefined;
-  'sign-in': undefined;
+  Splash: undefined;
+  Home: undefined;
+  SignIn: undefined;
+  PostSignOut: undefined;
 };
 
+const AUTH_CONTEXT_ERROR =
+  'Authentication context not found. Have your wrapped your components with AuthContext.Consumer?';
+
+const AuthContext = React.createContext<{
+  signIn: () => void;
+  signOut: () => void;
+}>({
+  signIn: () => {
+    throw new Error(AUTH_CONTEXT_ERROR);
+  },
+  signOut: () => {
+    throw new Error(AUTH_CONTEXT_ERROR);
+  },
+});
+
 const SplashScreen = () => {
   return (
     <View style={styles.content}>
@@ -22,27 +38,27 @@ const SplashScreen = () => {
   );
 };
 
-const SignInScreen = ({ onSignIn }: { onSignIn: (token: string) => void }) => {
+const SignInScreen = () => {
+  const { signIn } = React.useContext(AuthContext);
+
   return (
     <View style={styles.content}>
       <TextInput placeholder="Username" style={styles.input} />
       <TextInput placeholder="Password" secureTextEntry style={styles.input} />
-      <Button
-        mode="contained"
-        onPress={() => onSignIn('token')}
-        style={styles.button}
-      >
+      <Button mode="contained" onPress={signIn} style={styles.button}>
         Sign in
       </Button>
     </View>
   );
 };
 
-const HomeScreen = ({ onSignOut }: { onSignOut: () => void }) => {
+const HomeScreen = () => {
+  const { signOut } = React.useContext(AuthContext);
+
   return (
     <View style={styles.content}>
       <Title style={styles.text}>Signed in successfully 🎉</Title>
-      <Button onPress={onSignOut} style={styles.button}>
+      <Button onPress={signOut} style={styles.button}>
         Sign out
       </Button>
     </View>
@@ -105,36 +121,44 @@ export default function SimpleStackScreen({ navigation }: Props) {
     headerShown: false,
   });
 
+  const authContext = React.useMemo(
+    () => ({
+      signIn: () => dispatch({ type: 'SIGN_IN', token: 'dummy-auth-token' }),
+      signOut: () => dispatch({ type: 'SIGN_OUT' }),
+    }),
+    []
+  );
+
   return (
-    <SimpleStack.Navigator
-      screenOptions={{
-        headerLeft: () => (
-          <HeaderBackButton onPress={() => navigation.goBack()} />
-        ),
-      }}
-    >
-      {state.isLoading ? (
-        <SimpleStack.Screen
-          name="splash"
-          component={SplashScreen}
-          options={{ title: `Auth Flow` }}
-        />
-      ) : state.userToken === undefined ? (
-        <SimpleStack.Screen name="sign-in" options={{ title: `Sign in` }}>
-          {() => (
-            <SignInScreen
-              onSignIn={token => dispatch({ type: 'SIGN_IN', token })}
-            />
-          )}
-        </SimpleStack.Screen>
-      ) : (
-        <SimpleStack.Screen name="home" options={{ title: 'Home' }}>
-          {() => (
-            <HomeScreen onSignOut={() => dispatch({ type: 'SIGN_OUT' })} />
-          )}
-        </SimpleStack.Screen>
-      )}
-    </SimpleStack.Navigator>
+    <AuthContext.Provider value={authContext}>
+      <SimpleStack.Navigator
+        screenOptions={{
+          headerLeft: () => (
+            <HeaderBackButton onPress={() => navigation.goBack()} />
+          ),
+        }}
+      >
+        {state.isLoading ? (
+          <SimpleStack.Screen
+            name="Splash"
+            component={SplashScreen}
+            options={{ title: 'Auth Flow' }}
+          />
+        ) : state.userToken === undefined ? (
+          <SimpleStack.Screen
+            name="SignIn"
+            options={{ title: 'Sign in' }}
+            component={SignInScreen}
+          />
+        ) : (
+          <SimpleStack.Screen
+            name="Home"
+            options={{ title: 'Home' }}
+            component={HomeScreen}
+          />
+        )}
+      </SimpleStack.Navigator>
+    </AuthContext.Provider>
   );
 }
 

example/src/Screens/BottomTabs.tsx

@@ -16,10 +16,10 @@ const getTabBarIcon = (name: string) => ({
 }) => <MaterialCommunityIcons name={name} color={color} size={size} />;
 
 type BottomTabParams = {
-  article: undefined;
-  albums: undefined;
-  contacts: undefined;
-  chat: undefined;
+  Article: undefined;
+  Albums: undefined;
+  Contacts: undefined;
+  Chat: undefined;
 };
 
 const BottomTabs = createBottomTabNavigator<BottomTabParams>();
@@ -32,7 +32,7 @@ export default function BottomTabsScreen() {
       }}
     >
       <BottomTabs.Screen
-        name="article"
+        name="Article"
         options={{
           title: 'Article',
           tabBarIcon: getTabBarIcon('file-document-box'),
@@ -41,7 +41,7 @@ export default function BottomTabsScreen() {
         {props => <SimpleStackScreen {...props} headerMode="none" />}
       </BottomTabs.Screen>
       <BottomTabs.Screen
-        name="chat"
+        name="Chat"
         component={Chat}
         options={{
           tabBarLabel: 'Chat',
@@ -49,7 +49,7 @@ export default function BottomTabsScreen() {
         }}
       />
       <BottomTabs.Screen
-        name="contacts"
+        name="Contacts"
         component={Contacts}
         options={{
           title: 'Contacts',
@@ -57,7 +57,7 @@ export default function BottomTabsScreen() {
         }}
       />
       <BottomTabs.Screen
-        name="albums"
+        name="Albums"
         component={Albums}
         options={{
           title: 'Albums',

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/MaterialBottomTabs.tsx

@@ -7,10 +7,10 @@ import Chat from '../Shared/Chat';
 import SimpleStackScreen from './SimpleStack';
 
 type MaterialBottomTabParams = {
-  article: undefined;
-  albums: undefined;
-  contacts: undefined;
-  chat: undefined;
+  Article: undefined;
+  Albums: undefined;
+  Contacts: undefined;
+  Chat: undefined;
 };
 
 const MaterialBottomTabs = createMaterialBottomTabNavigator<
@@ -21,7 +21,7 @@ export default function MaterialBottomTabsScreen() {
   return (
     <MaterialBottomTabs.Navigator barStyle={styles.tabBar}>
       <MaterialBottomTabs.Screen
-        name="article"
+        name="Article"
         options={{
           tabBarLabel: 'Article',
           tabBarIcon: 'file-document-box',
@@ -31,7 +31,7 @@ export default function MaterialBottomTabsScreen() {
         {props => <SimpleStackScreen {...props} headerMode="none" />}
       </MaterialBottomTabs.Screen>
       <MaterialBottomTabs.Screen
-        name="chat"
+        name="Chat"
         component={Chat}
         options={{
           tabBarLabel: 'Chat',
@@ -41,7 +41,7 @@ export default function MaterialBottomTabsScreen() {
         }}
       />
       <MaterialBottomTabs.Screen
-        name="contacts"
+        name="Contacts"
         component={Contacts}
         options={{
           tabBarLabel: 'Contacts',
@@ -50,7 +50,7 @@ export default function MaterialBottomTabsScreen() {
         }}
       />
       <MaterialBottomTabs.Screen
-        name="albums"
+        name="Albums"
         component={Albums}
         options={{
           tabBarLabel: 'Albums',

example/src/Screens/MaterialTopTabs.tsx

@@ -1,54 +1,35 @@
 import * as React from 'react';
-import { StyleSheet } from 'react-native';
 import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
 import Albums from '../Shared/Albums';
 import Contacts from '../Shared/Contacts';
 import Chat from '../Shared/Chat';
 
 type MaterialTopTabParams = {
-  albums: undefined;
-  contacts: undefined;
-  chat: undefined;
+  Albums: undefined;
+  Contacts: undefined;
+  Chat: undefined;
 };
 
 const MaterialTopTabs = createMaterialTopTabNavigator<MaterialTopTabParams>();
 
 export default function MaterialTopTabsScreen() {
   return (
-    <MaterialTopTabs.Navigator
-      tabBarOptions={{
-        style: styles.tabBar,
-        labelStyle: styles.tabLabel,
-        indicatorStyle: styles.tabIndicator,
-      }}
-    >
+    <MaterialTopTabs.Navigator>
       <MaterialTopTabs.Screen
-        name="chat"
+        name="Chat"
         component={Chat}
         options={{ title: 'Chat' }}
       />
       <MaterialTopTabs.Screen
-        name="contacts"
+        name="Contacts"
         component={Contacts}
         options={{ title: 'Contacts' }}
       />
       <MaterialTopTabs.Screen
-        name="albums"
+        name="Albums"
         component={Albums}
         options={{ title: 'Albums' }}
       />
     </MaterialTopTabs.Navigator>
   );
 }
-
-const styles = StyleSheet.create({
-  tabBar: {
-    backgroundColor: 'white',
-  },
-  tabLabel: {
-    color: 'black',
-  },
-  tabIndicator: {
-    backgroundColor: 'tomato',
-  },
-});

example/src/Screens/ModalPresentationStack.tsx

@@ -1,8 +1,7 @@
 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 { useSafeArea } from 'react-native-safe-area-context';
-import { RouteProp, ParamListBase } from '@react-navigation/core';
+import { RouteProp, ParamListBase } from '@react-navigation/native';
 import {
   createStackNavigator,
   StackNavigationProp,
@@ -11,28 +10,26 @@ import {
 import Article from '../Shared/Article';
 import Albums from '../Shared/Albums';
 
-type SimpleStackParams = {
-  article: { author: string };
-  album: undefined;
+type ModalStackParams = {
+  Article: { author: string };
+  Album: undefined;
 };
 
-type SimpleStackNavigation = StackNavigationProp<SimpleStackParams>;
+type ModalStackNavigation = StackNavigationProp<ModalStackParams>;
 
 const ArticleScreen = ({
   navigation,
   route,
 }: {
-  navigation: SimpleStackNavigation;
-  route: RouteProp<SimpleStackParams, 'article'>;
+  navigation: ModalStackNavigation;
+  route: RouteProp<ModalStackParams, 'Article'>;
 }) => {
-  const insets = useSafeArea();
-
   return (
-    <React.Fragment>
-      <View style={[styles.buttons, { marginTop: insets.top }]}>
+    <ScrollView>
+      <View style={styles.buttons}>
         <Button
           mode="contained"
-          onPress={() => navigation.push('album')}
+          onPress={() => navigation.push('Album')}
           style={styles.button}
         >
           Push album
@@ -45,24 +42,18 @@ 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: SimpleStackNavigation;
-}) => {
-  const insets = useSafeArea();
-
+const AlbumsScreen = ({ navigation }: { navigation: ModalStackNavigation }) => {
   return (
-    <React.Fragment>
-      <View style={[styles.buttons, { marginTop: insets.top }]}>
+    <ScrollView>
+      <View style={styles.buttons}>
         <Button
           mode="contained"
-          onPress={() => navigation.push('article', { author: 'Babel fish' })}
+          onPress={() => navigation.push('Article', { author: 'Babel fish' })}
           style={styles.button}
         >
           Push article
@@ -75,12 +66,12 @@ const AlbumsScreen = ({
           Go back
         </Button>
       </View>
-      <Albums />
-    </React.Fragment>
+      <Albums scrollEnabled={false} />
+    </ScrollView>
   );
 };
 
-const ModalPresentationStack = createStackNavigator<SimpleStackParams>();
+const ModalPresentationStack = createStackNavigator<ModalStackParams>();
 
 type Props = {
   options?: React.ComponentProps<typeof ModalPresentationStack.Navigator>;
@@ -95,16 +86,20 @@ export default function SimpleStackScreen({ navigation, options }: Props) {
   return (
     <ModalPresentationStack.Navigator
       mode="modal"
-      headerMode="none"
-      screenOptions={{
+      headerMode="screen"
+      screenOptions={({ route, navigation }) => ({
         ...TransitionPresets.ModalPresentationIOS,
         cardOverlayEnabled: true,
         gestureEnabled: true,
-      }}
+        headerStatusBarHeight:
+          navigation.dangerouslyGetState().routes.indexOf(route) > 0
+            ? 0
+            : undefined,
+      })}
       {...options}
     >
       <ModalPresentationStack.Screen
-        name="article"
+        name="Article"
         component={ArticleScreen}
         options={({ route }) => ({
           title: `Article by ${route.params.author}`,
@@ -112,7 +107,7 @@ export default function SimpleStackScreen({ navigation, options }: Props) {
         initialParams={{ author: 'Gandalf' }}
       />
       <ModalPresentationStack.Screen
-        name="album"
+        name="Album"
         component={AlbumsScreen}
         options={{ title: 'Album' }}
       />

example/src/Screens/NativeStack.tsx

@@ -7,7 +7,8 @@ import {
   RouteProp,
   ParamListBase,
   useFocusEffect,
-} from '@react-navigation/core';
+  useTheme,
+} from '@react-navigation/native';
 import { DrawerNavigationProp } from '@react-navigation/drawer';
 import { StackNavigationProp } from '@react-navigation/stack';
 import {
@@ -17,107 +18,130 @@ import {
 import Albums from '../Shared/Albums';
 
 type NativeStackParams = {
-  article: { author: string };
-  album: undefined;
+  Article: { author: string };
+  Album: undefined;
 };
 
 type NativeStackNavigation = NativeStackNavigationProp<NativeStackParams>;
 
+const Title = ({ children }: { children: React.ReactNode }) => {
+  const { colors } = useTheme();
+
+  return <Text style={[styles.title, { color: colors.text }]}>{children}</Text>;
+};
+
+const Paragraph = ({ children }: { children: React.ReactNode }) => {
+  const { colors } = useTheme();
+
+  return (
+    <Text style={[styles.paragraph, { color: colors.text }]}>{children}</Text>
+  );
+};
+
 const ArticleScreen = ({
   navigation,
 }: {
   navigation: NativeStackNavigation;
-  route: RouteProp<NativeStackParams, 'article'>;
-}) => (
-  <ScrollView style={styles.container} contentContainerStyle={styles.content}>
-    <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>
-    <Text style={styles.title}>What is Lorem Ipsum?</Text>
-    <Text style={styles.paragraph}>
-      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
-      Lorem Ipsum has been the industry&apos;s standard dummy text ever since
-      the 1500s, when an unknown printer took a galley of type and scrambled it
-      to make a type specimen book. It has survived not only five centuries, but
-      also the leap into electronic typesetting, remaining essentially
-      unchanged. It was popularised in the 1960s with the release of Letraset
-      sheets containing Lorem Ipsum passages, and more recently with desktop
-      publishing software like Aldus PageMaker including versions of Lorem
-      Ipsum.
-    </Text>
-    <Text style={styles.title}>Where does it come from?</Text>
-    <Text style={styles.paragraph}>
-      Contrary to popular belief, Lorem Ipsum is not simply random text. It has
-      roots in a piece of classical Latin literature from 45 BC, making it over
-      2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney
-      College in Virginia, looked up one of the more obscure Latin words,
-      consectetur, from a Lorem Ipsum passage, and going through the cites of
-      the word in classical literature, discovered the undoubtable source. Lorem
-      Ipsum comes from sections 1.10.32 and 1.10.33 of &quot;de Finibus Bonorum
-      et Malorum&quot; (The Extremes of Good and Evil) by Cicero, written in 45
-      BC. This book is a treatise on the theory of ethics, very popular during
-      the Renaissance. The first line of Lorem Ipsum, &quot;Lorem ipsum dolor
-      sit amet..&quot;, comes from a line in section 1.10.32.
-    </Text>
-    <Text style={styles.paragraph}>
-      The standard chunk of Lorem Ipsum used since the 1500s is reproduced below
-      for those interested. Sections 1.10.32 and 1.10.33 from &quot;de Finibus
-      Bonorum et Malorum&quot; by Cicero are also reproduced in their exact
-      original form, accompanied by English versions from the 1914 translation
-      by H. Rackham.
-    </Text>
-    <Text style={styles.title}>Why do we use it?</Text>
-    <Text style={styles.paragraph}>
-      It is a long established fact that a reader will be distracted by the
-      readable content of a page when looking at its layout. The point of using
-      Lorem Ipsum is that it has a more-or-less normal distribution of letters,
-      as opposed to using &quot;Content here, content here&quot;, making it look
-      like readable English. Many desktop publishing packages and web page
-      editors now use Lorem Ipsum as their default model text, and a search for
-      &quot;lorem ipsum&quot; will uncover many web sites still in their
-      infancy. Various versions have evolved over the years, sometimes by
-      accident, sometimes on purpose (injected humour and the like).
-    </Text>
-    <Text style={styles.title}>Where can I get some?</Text>
-    <Text style={styles.paragraph}>
-      There are many variations of passages of Lorem Ipsum available, but the
-      majority have suffered alteration in some form, by injected humour, or
-      randomised words which don&apos;t look even slightly believable. If you
-      are going to use a passage of Lorem Ipsum, you need to be sure there
-      isn&apos;t anything embarrassing hidden in the middle of text. All the
-      Lorem Ipsum generators on the Internet tend to repeat predefined chunks as
-      necessary, making this the first true generator on the Internet. It uses a
-      dictionary of over 200 Latin words, combined with a handful of model
-      sentence structures, to generate Lorem Ipsum which looks reasonable. The
-      generated Lorem Ipsum is therefore always free from repetition, injected
-      humour, or non-characteristic words etc.
-    </Text>
-  </ScrollView>
-);
+  route: RouteProp<NativeStackParams, 'Article'>;
+}) => {
+  const { colors } = useTheme();
+
+  return (
+    <ScrollView
+      style={{ backgroundColor: colors.card }}
+      contentContainerStyle={styles.content}
+    >
+      <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>
+      <Title>What is Lorem Ipsum?</Title>
+      <Paragraph>
+        Lorem Ipsum is simply dummy text of the printing and typesetting
+        industry. Lorem Ipsum has been the industry&apos;s standard dummy text
+        ever since the 1500s, when an unknown printer took a galley of type and
+        scrambled it to make a type specimen book. It has survived not only five
+        centuries, but also the leap into electronic typesetting, remaining
+        essentially unchanged. It was popularised in the 1960s with the release
+        of Letraset sheets containing Lorem Ipsum passages, and more recently
+        with desktop publishing software like Aldus PageMaker including versions
+        of Lorem Ipsum.
+      </Paragraph>
+      <Title>Where does it come from?</Title>
+      <Paragraph>
+        Contrary to popular belief, Lorem Ipsum is not simply random text. It
+        has roots in a piece of classical Latin literature from 45 BC, making it
+        over 2000 years old. Richard McClintock, a Latin professor at
+        Hampden-Sydney College in Virginia, looked up one of the more obscure
+        Latin words, consectetur, from a Lorem Ipsum passage, and going through
+        the cites of the word in classical literature, discovered the
+        undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33
+        of &quot;de Finibus Bonorum et Malorum&quot; (The Extremes of Good and
+        Evil) by Cicero, written in 45 BC. This book is a treatise on the theory
+        of ethics, very popular during the Renaissance. The first line of Lorem
+        Ipsum, &quot;Lorem ipsum dolor sit amet..&quot;, comes from a line in
+        section 1.10.32.
+      </Paragraph>
+      <Paragraph>
+        The standard chunk of Lorem Ipsum used since the 1500s is reproduced
+        below for those interested. Sections 1.10.32 and 1.10.33 from &quot;de
+        Finibus Bonorum et Malorum&quot; by Cicero are also reproduced in their
+        exact original form, accompanied by English versions from the 1914
+        translation by H. Rackham.
+      </Paragraph>
+      <Title>Why do we use it?</Title>
+      <Paragraph>
+        It is a long established fact that a reader will be distracted by the
+        readable content of a page when looking at its layout. The point of
+        using Lorem Ipsum is that it has a more-or-less normal distribution of
+        letters, as opposed to using &quot;Content here, content here&quot;,
+        making it look like readable English. Many desktop publishing packages
+        and web page editors now use Lorem Ipsum as their default model text,
+        and a search for &quot;lorem ipsum&quot; will uncover many web sites
+        still in their infancy. Various versions have evolved over the years,
+        sometimes by accident, sometimes on purpose (injected humour and the
+        like).
+      </Paragraph>
+      <Title>Where can I get some?</Title>
+      <Paragraph>
+        There are many variations of passages of Lorem Ipsum available, but the
+        majority have suffered alteration in some form, by injected humour, or
+        randomised words which don&apos;t look even slightly believable. If you
+        are going to use a passage of Lorem Ipsum, you need to be sure there
+        isn&apos;t anything embarrassing hidden in the middle of text. All the
+        Lorem Ipsum generators on the Internet tend to repeat predefined chunks
+        as necessary, making this the first true generator on the Internet. It
+        uses a dictionary of over 200 Latin words, combined with a handful of
+        model sentence structures, to generate Lorem Ipsum which looks
+        reasonable. The generated Lorem Ipsum is therefore always free from
+        repetition, injected humour, or non-characteristic words etc.
+      </Paragraph>
+    </ScrollView>
+  );
+};
 
 const AlbumsScreen = ({
   navigation,
 }: {
   navigation: NativeStackNavigation;
 }) => (
-  <React.Fragment>
+  <ScrollView>
     <View style={styles.buttons}>
       <Button
         mode="contained"
-        onPress={() => navigation.push('article', { author: 'Babel fish' })}
+        onPress={() => navigation.push('Article', { author: 'Babel fish' })}
         style={styles.button}
       >
         Push article
@@ -130,8 +154,8 @@ const AlbumsScreen = ({
         Go back
       </Button>
     </View>
-    <Albums />
-  </React.Fragment>
+    <Albums scrollEnabled={false} />
+  </ScrollView>
 );
 
 const NativeStack = createNativeStackNavigator<NativeStackParams>();
@@ -164,7 +188,7 @@ export default function NativeStackScreen({ navigation }: Props) {
   return (
     <NativeStack.Navigator>
       <NativeStack.Screen
-        name="article"
+        name="Article"
         component={ArticleScreen}
         options={{
           title: 'Lorem Ipsum',
@@ -173,7 +197,7 @@ export default function NativeStackScreen({ navigation }: Props) {
         }}
       />
       <NativeStack.Screen
-        name="album"
+        name="Album"
         component={AlbumsScreen}
         options={{ title: 'Album' }}
       />
@@ -191,21 +215,16 @@ const styles = StyleSheet.create({
   button: {
     margin: 8,
   },
-  container: {
-    backgroundColor: 'white',
-  },
   content: {
     paddingVertical: 16,
   },
   title: {
-    color: '#000',
     fontWeight: 'bold',
     fontSize: 24,
     marginVertical: 8,
     marginHorizontal: 16,
   },
   paragraph: {
-    color: '#000',
     fontSize: 16,
     lineHeight: 24,
     marginVertical: 8,

example/src/Screens/SimpleStack.tsx

@@ -1,17 +1,19 @@
 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/core';
+import { RouteProp, ParamListBase } from '@react-navigation/native';
 import {
   createStackNavigator,
   StackNavigationProp,
 } from '@react-navigation/stack';
 import Article from '../Shared/Article';
 import Albums from '../Shared/Albums';
+import NewsFeed from '../Shared/NewsFeed';
 
 type SimpleStackParams = {
-  article: { author: string };
-  album: undefined;
+  Article: { author: string };
+  NewsFeed: undefined;
+  Album: undefined;
 };
 
 type SimpleStackNavigation = StackNavigationProp<SimpleStackParams>;
@@ -21,17 +23,45 @@ const ArticleScreen = ({
   route,
 }: {
   navigation: SimpleStackNavigation;
-  route: RouteProp<SimpleStackParams, 'article'>;
+  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,25 +82,25 @@ const AlbumsScreen = ({
   navigation: SimpleStackNavigation;
 }) => {
   return (
-    <React.Fragment>
+    <ScrollView>
       <View style={styles.buttons}>
         <Button
           mode="contained"
-          onPress={() => navigation.push('article', { author: 'Babel fish' })}
+          onPress={() => navigation.push('Article', { author: 'Babel fish' })}
           style={styles.button}
         >
           Push article
         </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>
   );
 };
 
@@ -88,7 +118,7 @@ export default function SimpleStackScreen({ navigation, ...rest }: Props) {
   return (
     <SimpleStack.Navigator {...rest}>
       <SimpleStack.Screen
-        name="article"
+        name="Article"
         component={ArticleScreen}
         options={({ route }) => ({
           title: `Article by ${route.params.author}`,
@@ -96,7 +126,12 @@ export default function SimpleStackScreen({ navigation, ...rest }: Props) {
         initialParams={{ author: 'Gandalf' }}
       />
       <SimpleStack.Screen
-        name="album"
+        name="NewsFeed"
+        component={NewsFeedScreen}
+        options={{ title: 'Feed' }}
+      />
+      <SimpleStack.Screen
+        name="Album"
         component={AlbumsScreen}
         options={{ title: 'Album' }}
       />

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,5 +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 = [
@@ -13,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);
@@ -23,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
@@ -38,7 +47,7 @@ export default function Albums() {
 
 const styles = StyleSheet.create({
   container: {
-    backgroundColor: '#343C46',
+    backgroundColor: '#000',
   },
   content: {
     flexDirection: 'row',

example/src/Shared/Article.tsx

@@ -1,8 +1,15 @@
 import * as React from 'react';
-import { View, Text, Image, ScrollView, StyleSheet } from 'react-native';
-import { useScrollToTop } from '@react-navigation/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,16 +21,20 @@ export default function Article({
   author = {
     name: 'Knowledge Bot',
   },
+  ...rest
 }: Props) {
   const ref = React.useRef<ScrollView>(null);
 
   useScrollToTop(ref);
 
+  const { colors } = useTheme();
+
   return (
     <ScrollView
       ref={ref}
-      style={styles.container}
+      style={{ backgroundColor: colors.card }}
       contentContainerStyle={styles.content}
+      {...rest}
     >
       <View style={styles.author}>
         <Image
@@ -31,24 +42,26 @@ export default function Article({
           source={require('../../assets/avatar-1.png')}
         />
         <View style={styles.meta}>
-          <Text style={styles.name}>{author.name}</Text>
-          <Text style={styles.timestamp}>{date}</Text>
+          <Text style={[styles.name, { color: colors.text }]}>
+            {author.name}
+          </Text>
+          <Text style={[styles.timestamp, { color: colors.text }]}>{date}</Text>
         </View>
       </View>
-      <Text style={styles.title}>Lorem Ipsum</Text>
-      <Text style={styles.paragraph}>
+      <Text style={[styles.title, { color: colors.text }]}>Lorem Ipsum</Text>
+      <Text style={[styles.paragraph, { color: colors.text }]}>
         Contrary to popular belief, Lorem Ipsum is not simply random text. It
         has roots in a piece of classical Latin literature from 45 BC, making it
         over 2000 years old.
       </Text>
       <Image style={styles.image} source={require('../../assets/book.jpg')} />
-      <Text style={styles.paragraph}>
+      <Text style={[styles.paragraph, { color: colors.text }]}>
         Richard McClintock, a Latin professor at Hampden-Sydney College in
         Virginia, looked up one of the more obscure Latin words, consectetur,
         from a Lorem Ipsum passage, and going through the cites of the word in
         classical literature, discovered the undoubtable source.
       </Text>
-      <Text style={styles.paragraph}>
+      <Text style={[styles.paragraph, { color: colors.text }]}>
         Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of &quot;de Finibus
         Bonorum et Malorum&quot; (The Extremes of Good and Evil) by Cicero,
         written in 45 BC. This book is a treatise on the theory of ethics, very
@@ -61,9 +74,6 @@ export default function Article({
 }
 
 const styles = StyleSheet.create({
-  container: {
-    backgroundColor: 'white',
-  },
   content: {
     paddingVertical: 16,
   },
@@ -77,13 +87,12 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
   },
   name: {
-    color: '#000',
     fontWeight: 'bold',
     fontSize: 16,
     lineHeight: 24,
   },
   timestamp: {
-    color: '#999',
+    opacity: 0.5,
     fontSize: 14,
     lineHeight: 21,
   },
@@ -93,14 +102,12 @@ const styles = StyleSheet.create({
     borderRadius: 24,
   },
   title: {
-    color: '#000',
     fontWeight: 'bold',
     fontSize: 36,
     marginVertical: 8,
     marginHorizontal: 16,
   },
   paragraph: {
-    color: '#000',
     fontSize: 16,
     lineHeight: 24,
     marginVertical: 8,

example/src/Shared/Chat.tsx

@@ -6,8 +6,10 @@ import {
   TextInput,
   ScrollView,
   StyleSheet,
+  ScrollViewProps,
 } from 'react-native';
-import { useScrollToTop } from '@react-navigation/native';
+import { useScrollToTop, useTheme } from '@react-navigation/native';
+import Color from 'color';
 
 const MESSAGES = [
   'okay',
@@ -16,16 +18,19 @@ 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);
 
+  const { colors } = useTheme();
+
   return (
     <View style={styles.container}>
       <ScrollView
         style={styles.inverted}
         contentContainerStyle={styles.content}
+        {...props}
       >
         {MESSAGES.map((text, i) => {
           const odd = i % 2;
@@ -45,9 +50,12 @@ export default function Chat() {
                 }
               />
               <View
-                style={[styles.bubble, odd ? styles.received : styles.sent]}
+                style={[
+                  styles.bubble,
+                  { backgroundColor: odd ? colors.primary : colors.card },
+                ]}
               >
-                <Text style={odd ? styles.receivedText : styles.sentText}>
+                <Text style={{ color: odd ? 'white' : colors.text }}>
                   {text}
                 </Text>
               </View>
@@ -56,7 +64,14 @@ export default function Chat() {
         })}
       </ScrollView>
       <TextInput
-        style={styles.input}
+        style={[
+          styles.input,
+          { backgroundColor: colors.card, color: colors.text },
+        ]}
+        placeholderTextColor={Color(colors.text)
+          .alpha(0.5)
+          .rgb()
+          .string()}
         placeholder="Write a message"
         underlineColorAndroid="transparent"
       />
@@ -67,7 +82,6 @@ export default function Chat() {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: '#eceff1',
   },
   inverted: {
     transform: [{ scaleY: -1 }],
@@ -97,22 +111,9 @@ const styles = StyleSheet.create({
     paddingHorizontal: 16,
     borderRadius: 20,
   },
-  sent: {
-    backgroundColor: '#cfd8dc',
-  },
-  received: {
-    backgroundColor: '#2196F3',
-  },
-  sentText: {
-    color: 'black',
-  },
-  receivedText: {
-    color: 'white',
-  },
   input: {
     height: 48,
     paddingVertical: 12,
     paddingHorizontal: 24,
-    backgroundColor: 'white',
   },
 });

example/src/Shared/Contacts.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { View, Text, FlatList, StyleSheet } from 'react-native';
-import { useScrollToTop } from '@react-navigation/native';
+import { useScrollToTop, useTheme } from '@react-navigation/native';
 
 type Item = { name: string; number: number };
 
@@ -57,27 +57,35 @@ const CONTACTS: Item[] = [
   { name: 'Vincent Sandoval', number: 2606111495 },
 ];
 
-class ContactItem extends React.PureComponent<{
-  item: { name: string; number: number };
-}> {
-  render() {
-    const { item } = this.props;
+const ContactItem = React.memo(
+  ({ item }: { item: { name: string; number: number } }) => {
+    const { colors } = useTheme();
 
     return (
-      <View style={styles.item}>
+      <View style={[styles.item, { backgroundColor: colors.card }]}>
         <View style={styles.avatar}>
           <Text style={styles.letter}>
             {item.name.slice(0, 1).toUpperCase()}
           </Text>
         </View>
         <View style={styles.details}>
-          <Text style={styles.name}>{item.name}</Text>
-          <Text style={styles.number}>{item.number}</Text>
+          <Text style={[styles.name, { color: colors.text }]}>{item.name}</Text>
+          <Text style={[styles.number, { color: colors.text, opacity: 0.5 }]}>
+            {item.number}
+          </Text>
         </View>
       </View>
     );
   }
-}
+);
+
+const ItemSeparator = () => {
+  const { colors } = useTheme();
+
+  return (
+    <View style={[styles.separator, { backgroundColor: colors.border }]} />
+  );
+};
 
 export default function Contacts() {
   const ref = React.useRef<FlatList<Item>>(null);
@@ -86,8 +94,6 @@ export default function Contacts() {
 
   const renderItem = ({ item }: { item: Item }) => <ContactItem item={item} />;
 
-  const ItemSeparator = () => <View style={styles.separator} />;
-
   return (
     <FlatList
       ref={ref}
@@ -101,7 +107,6 @@ export default function Contacts() {
 
 const styles = StyleSheet.create({
   item: {
-    backgroundColor: 'white',
     flexDirection: 'row',
     alignItems: 'center',
     padding: 8,
@@ -124,14 +129,11 @@ const styles = StyleSheet.create({
   name: {
     fontWeight: 'bold',
     fontSize: 14,
-    color: 'black',
   },
   number: {
     fontSize: 12,
-    color: '#999',
   },
   separator: {
     height: StyleSheet.hairlineWidth,
-    backgroundColor: 'rgba(0, 0, 0, .08)',
   },
 });

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,16 +1,29 @@
 import * as React from 'react';
-import { ScrollView, AsyncStorage, YellowBox } from 'react-native';
+import {
+  ScrollView,
+  AsyncStorage,
+  YellowBox,
+  Platform,
+  StatusBar,
+  I18nManager,
+} from 'react-native';
 import { MaterialIcons } from '@expo/vector-icons';
-import { Appbar, List } from 'react-native-paper';
+import {
+  Provider as PaperProvider,
+  DefaultTheme as PaperLightTheme,
+  DarkTheme as PaperDarkTheme,
+  Appbar,
+  List,
+  Divider,
+} from 'react-native-paper';
 import { Asset } from 'expo-asset';
 import {
   InitialState,
-  getStateFromPath,
-  NavigationContainerRef,
-} from '@react-navigation/core';
-import {
   useLinking,
+  NavigationContainerRef,
   NavigationNativeContainer,
+  DefaultTheme,
+  DarkTheme,
 } from '@react-navigation/native';
 import {
   createDrawerNavigator,
@@ -20,17 +33,22 @@ import {
   createStackNavigator,
   Assets as StackAssets,
   StackNavigationProp,
+  HeaderStyleInterpolators,
 } from '@react-navigation/stack';
 
 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']);
 
@@ -52,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',
@@ -61,6 +83,10 @@ const SCREENS = {
     title: 'Material Bottom Tabs',
     component: MaterialBottomTabs,
   },
+  DynamicTabs: {
+    title: 'Dynamic Tabs',
+    component: DynamicTabs,
+  },
   AuthFlow: {
     title: 'Auth Flow',
     component: AuthFlow,
@@ -74,7 +100,8 @@ const SCREENS = {
 const Drawer = createDrawerNavigator<RootDrawerParamList>();
 const Stack = createStackNavigator<RootStackParamList>();
 
-const PERSISTENCE_KEY = 'NAVIGATION_STATE';
+const NAVIGATION_PERSISTENCE_KEY = 'NAVIGATION_STATE';
+const THEME_PERSISTENCE_KEY = 'THEME_TYPE';
 
 Asset.loadAsync(StackAssets);
 
@@ -87,23 +114,24 @@ export default function App() {
   // The first segment of the link is the the scheme + host (returned by `Linking.makeUrl`)
   const { getInitialState } = useLinking(containerRef, {
     prefixes: LinkingPrefixes,
-    getStateFromPath: path => {
-      const state = getStateFromPath(path);
+    config: {
+      Root: Object.keys(SCREENS).reduce<{ [key: string]: string }>(
+        (acc, name) => {
+          // Convert screen names such as SimpleStack to kebab case (simple-stack)
+          acc[name] = name
+            .replace(/([A-Z]+)/g, '-$1')
+            .replace(/^-/, '')
+            .toLowerCase();
 
-      return {
-        routes: [
-          {
-            name: 'root',
-            state: {
-              ...state,
-              routes: [{ name: 'home' }, ...(state ? state.routes : [])],
-            },
-          },
-        ],
-      };
+          return acc;
+        },
+        {}
+      ),
     },
   });
 
+  const [theme, setTheme] = React.useState(DefaultTheme);
+
   const [isReady, setIsReady] = React.useState(false);
   const [initialState, setInitialState] = React.useState<
     InitialState | undefined
@@ -115,7 +143,9 @@ export default function App() {
         let state = await getInitialState();
 
         if (state === undefined) {
-          const savedState = await AsyncStorage.getItem(PERSISTENCE_KEY);
+          const savedState = await AsyncStorage.getItem(
+            NAVIGATION_PERSISTENCE_KEY
+          );
           state = savedState ? JSON.parse(savedState) : undefined;
         }
 
@@ -123,6 +153,14 @@ export default function App() {
           setInitialState(state);
         }
       } finally {
+        try {
+          const themeName = await AsyncStorage.getItem(THEME_PERSISTENCE_KEY);
+
+          setTheme(themeName === 'dark' ? DarkTheme : DefaultTheme);
+        } catch (e) {
+          // Ignore
+        }
+
         setIsReady(true);
       }
     };
@@ -130,78 +168,130 @@ export default function App() {
     restoreState();
   }, [getInitialState]);
 
+  const paperTheme = React.useMemo(() => {
+    const t = theme.dark ? PaperDarkTheme : PaperLightTheme;
+
+    return {
+      ...t,
+      colors: {
+        ...t.colors,
+        ...theme.colors,
+        surface: theme.colors.card,
+        accent: theme.dark ? 'rgb(255, 55, 95)' : 'rgb(255, 45, 85)',
+      },
+    };
+  }, [theme.colors, theme.dark]);
+
   if (!isReady) {
     return null;
   }
 
   return (
-    <NavigationNativeContainer
-      ref={containerRef}
-      initialState={initialState}
-      onStateChange={state =>
-        AsyncStorage.setItem(PERSISTENCE_KEY, JSON.stringify(state))
-      }
-    >
-      <Drawer.Navigator>
-        <Drawer.Screen
-          name="Root"
-          options={{
-            title: 'Examples',
-            drawerIcon: ({ size, color }) => (
-              <MaterialIcons size={size} color={color} name="folder" />
-            ),
-          }}
-        >
-          {({
-            navigation,
-          }: {
-            navigation: DrawerNavigationProp<RootDrawerParamList>;
-          }) => (
-            <Stack.Navigator>
-              <Stack.Screen
-                name="Home"
-                options={{
-                  title: 'Examples',
-                  headerLeft: () => (
-                    <Appbar.Action
-                      icon="menu"
-                      onPress={() => navigation.toggleDrawer()}
-                    />
-                  ),
+    <PaperProvider theme={paperTheme}>
+      {Platform.OS === 'ios' && (
+        <StatusBar barStyle={theme.dark ? 'light-content' : 'dark-content'} />
+      )}
+      <NavigationNativeContainer
+        ref={containerRef}
+        initialState={initialState}
+        onStateChange={state =>
+          AsyncStorage.setItem(
+            NAVIGATION_PERSISTENCE_KEY,
+            JSON.stringify(state)
+          )
+        }
+        theme={theme}
+      >
+        <Drawer.Navigator>
+          <Drawer.Screen
+            name="Root"
+            options={{
+              title: 'Examples',
+              drawerIcon: ({ size, color }) => (
+                <MaterialIcons size={size} color={color} name="folder" />
+              ),
+            }}
+          >
+            {({
+              navigation,
+            }: {
+              navigation: DrawerNavigationProp<RootDrawerParamList>;
+            }) => (
+              <Stack.Navigator
+                screenOptions={{
+                  headerStyleInterpolator: HeaderStyleInterpolators.forUIKit,
                 }}
               >
-                {({
-                  navigation,
-                }: {
-                  navigation: StackNavigationProp<RootStackParamList>;
-                }) => (
-                  <ScrollView>
-                    {(Object.keys(SCREENS) as Array<keyof typeof SCREENS>).map(
-                      name => (
-                        <List.Item
-                          key={name}
-                          title={SCREENS[name].title}
-                          onPress={() => navigation.push(name)}
-                        />
-                      )
-                    )}
-                  </ScrollView>
+                <Stack.Screen
+                  name="Home"
+                  options={{
+                    title: 'Examples',
+                    headerLeft: () => (
+                      <Appbar.Action
+                        color={theme.colors.text}
+                        icon="menu"
+                        onPress={() => navigation.toggleDrawer()}
+                      />
+                    ),
+                  }}
+                >
+                  {({
+                    navigation,
+                  }: {
+                    navigation: StackNavigationProp<RootStackParamList>;
+                  }) => (
+                    <ScrollView
+                      style={{ backgroundColor: theme.colors.background }}
+                    >
+                      <SettingsItem
+                        label="Right to left"
+                        value={I18nManager.isRTL}
+                        onValueChange={() => {
+                          I18nManager.forceRTL(!I18nManager.isRTL);
+                          Updates.reloadFromCache();
+                        }}
+                      />
+                      <Divider />
+                      <SettingsItem
+                        label="Dark theme"
+                        value={theme.dark}
+                        onValueChange={() => {
+                          AsyncStorage.setItem(
+                            THEME_PERSISTENCE_KEY,
+                            theme.dark ? 'light' : 'dark'
+                          );
+
+                          setTheme(t => (t.dark ? DefaultTheme : DarkTheme));
+                        }}
+                      />
+                      <Divider />
+                      {(Object.keys(SCREENS) as (keyof typeof SCREENS)[]).map(
+                        name => (
+                          <List.Item
+                            key={name}
+                            title={SCREENS[name].title}
+                            onPress={() => navigation.push(name)}
+                          />
+                        )
+                      )}
+                    </ScrollView>
+                  )}
+                </Stack.Screen>
+                {(Object.keys(SCREENS) as (keyof typeof SCREENS)[]).map(
+                  name => (
+                    <Stack.Screen
+                      key={name}
+                      name={name}
+                      component={SCREENS[name].component}
+                      options={{ title: SCREENS[name].title }}
+                    />
+                  )
                 )}
-              </Stack.Screen>
-              {(Object.keys(SCREENS) as Array<keyof typeof SCREENS>).map(
-                name => (
-                  <Stack.Screen
-                    key={name}
-                    name={name}
-                    component={SCREENS[name].component}
-                    options={{ title: SCREENS[name].title }}
-                  />
-                )
-              )}
-            </Stack.Navigator>
-          )}
-        </Drawer.Screen>
-      </Drawer.Navigator>
-    </NavigationNativeContainer>
+              </Stack.Navigator>
+            )}
+          </Drawer.Screen>
+        </Drawer.Navigator>
+      </NavigationNativeContainer>
+    </PaperProvider>
   );
 }

example/webpack.config.js

@@ -4,6 +4,9 @@ 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 packages = path.resolve(__dirname, '..', 'packages');
+
 module.exports = async function(env, argv) {
   const config = await createExpoWebpackConfigAsync(env, argv);
 
@@ -19,28 +22,15 @@ module.exports = async function(env, argv) {
   );
 
   Object.assign(config.resolve.alias, {
-    react: path.resolve(__dirname, 'node_modules', 'react'),
-    'react-native': path.resolve(__dirname, 'node_modules', 'react-native-web'),
-    'react-native-web': path.resolve(
-      __dirname,
-      'node_modules',
-      'react-native-web'
-    ),
-    'react-native-reanimated': path.resolve(
-      __dirname,
-      'node_modules',
-      'react-native-reanimated-web'
-    ),
-    '@expo/vector-icons/MaterialCommunityIcons': require.resolve(
-      '@expo/vector-icons/MaterialCommunityIcons'
-    ),
+    react: path.resolve(node_modules, 'react'),
+    'react-native': path.resolve(node_modules, 'react-native-web'),
+    'react-native-web': path.resolve(node_modules, 'react-native-web'),
+    '@expo/vector-icons': path.resolve(node_modules, '@expo/vector-icons'),
   });
 
-  fs.readdirSync(path.join(__dirname, '..')).forEach(name => {
+  fs.readdirSync(packages).forEach(name => {
     config.resolve.alias[`@react-navigation/${name}`] = path.resolve(
-      __dirname,
-      '..',
-      'packages',
+      packages,
       name,
       'src'
     );

jest/setup.js

@@ -2,7 +2,7 @@ const error = console.error;
 
 console.error = (...args) =>
   // Supress error messages regarding error boundary in tests
-  /Consider adding an error boundary to your tree to customize error handling behavior/m.test(
+  /(Consider adding an error boundary to your tree to customize error handling behavior|React will try to recreate this component tree from scratch using the error boundary you provided|Error boundaries should implement getDerivedStateFromError)/m.test(
     args[0]
   )
     ? void 0

package.json

@@ -24,22 +24,24 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-class-properties": "^7.7.0",
-    "@babel/preset-env": "^7.7.1",
+    "@babel/plugin-proposal-optional-chaining": "^7.7.5",
+    "@babel/preset-env": "^7.7.7",
     "@babel/preset-react": "^7.7.0",
-    "@babel/preset-typescript": "^7.7.2",
-    "@babel/runtime": "^7.7.2",
-    "@commitlint/config-conventional": "^8.2.0",
-    "@types/jest": "^24.0.23",
+    "@babel/preset-typescript": "^7.7.7",
+    "@babel/runtime": "^7.7.7",
+    "@commitlint/config-conventional": "^8.3.4",
+    "@types/jest": "^24.0.25",
     "codecov": "^3.6.1",
-    "commitlint": "^8.2.0",
-    "core-js": "^3.4.1",
-    "eslint": "^6.6.0",
-    "eslint-config-satya164": "^3.1.2",
-    "husky": "^3.0.9",
-    "jest": "^24.8.0",
-    "lerna": "^3.18.4",
+    "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",
+    "jest": "^24.9.0",
+    "lerna": "^3.20.2",
     "prettier": "^1.19.1",
-    "typescript": "^3.7.2"
+    "typescript": "^3.7.4"
   },
   "resolutions": {
     "react": "~16.9.0",
@@ -69,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,146 @@
 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
+
+
+
+
+
+# [5.0.0-alpha.33](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.33) (2020-01-09)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
+# [5.0.0-alpha.32](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/bottom-tabs@5.0.0-alpha.31...@react-navigation/bottom-tabs@5.0.0-alpha.32) (2020-01-05)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
+# [5.0.0-alpha.31](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/bottom-tabs@5.0.0-alpha.30...@react-navigation/bottom-tabs@5.0.0-alpha.31) (2020-01-03)
+
+
+### Bug Fixes
+
+* provide initial values for safe area to prevent blank screen ([#238](https://github.com/react-navigation/navigation-ex/issues/238)) ([77b7570](https://github.com/react-navigation/navigation-ex/commit/77b757091c0451e20bca01138629669c7da544a8))
+
+
+
+
+
+# [5.0.0-alpha.30](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/bottom-tabs@5.0.0-alpha.29...@react-navigation/bottom-tabs@5.0.0-alpha.30) (2020-01-03)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
+# [5.0.0-alpha.29](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/bottom-tabs@5.0.0-alpha.28...@react-navigation/bottom-tabs@5.0.0-alpha.29) (2020-01-01)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
+# [5.0.0-alpha.28](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/bottom-tabs@5.0.0-alpha.27...@react-navigation/bottom-tabs@5.0.0-alpha.28) (2019-12-19)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
+# [5.0.0-alpha.27](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/bottom-tabs@5.0.0-alpha.26...@react-navigation/bottom-tabs@5.0.0-alpha.27) (2019-12-16)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
+# [5.0.0-alpha.26](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/bottom-tabs@5.0.0-alpha.25...@react-navigation/bottom-tabs@5.0.0-alpha.26) (2019-12-14)
+
+
+### Features
+
+* add custom theme support ([#211](https://github.com/react-navigation/navigation-ex/issues/211)) ([00fc616](https://github.com/react-navigation/navigation-ex/commit/00fc616de0572bade8aa85052cdc8290360b1d7f))
+
+
+
+
+
+# [5.0.0-alpha.25](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/bottom-tabs@5.0.0-alpha.24...@react-navigation/bottom-tabs@5.0.0-alpha.25) (2019-12-11)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
 # [5.0.0-alpha.24](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/bottom-tabs@5.0.0-alpha.23...@react-navigation/bottom-tabs@5.0.0-alpha.24) (2019-12-10)
 
 

packages/bottom-tabs/README.md

@@ -2,12 +2,14 @@
 
 Bottom tab navigator for React Navigation following iOS design guidelines.
 
+Documentation can be found on the [React Navigation website](https://reactnavigation.org/docs/en/next/bottom-tab-navigator.html).
+
 ## Installation
 
 Open a Terminal in your project's folder and run,
 
 ```sh
-yarn add @react-navigation/core @react-navigation/bottom-tabs
+yarn add @react-navigation/native @react-navigation/bottom-tabs
 ```
 
 Now we need to install [`react-native-safe-area-context`](https://github.com/th3rdwave/react-native-safe-area-context).

packages/bottom-tabs/package.json

@@ -10,21 +10,18 @@
     "android",
     "tab"
   ],
-  "version": "5.0.0-alpha.24",
+  "version": "5.0.0-alpha.39",
   "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/react-navigation/navigation-ex.git",
-    "directory": "packages/bottom-tabs"
-  },
+  "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"
   },
@@ -33,23 +30,26 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/routers": "^5.0.0-alpha.15"
+    "@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",
-    "@types/react": "^16.9.11",
-    "@types/react-native": "^0.60.22",
+    "@react-native-community/bob": "^0.8.0",
+    "@types/color": "^3.0.1",
+    "@types/react": "^16.9.17",
+    "@types/react-native": "^0.60.30",
     "del-cli": "^3.0.0",
     "react": "~16.9.0",
     "react-native": "~0.61.5",
-    "react-native-safe-area-context": "^0.6.0",
-    "typescript": "^3.7.2"
+    "react-native-safe-area-context": "^0.6.2",
+    "typescript": "^3.7.4"
   },
   "peerDependencies": {
-    "@react-navigation/core": "^5.0.0-alpha.0",
+    "@react-navigation/native": "^5.0.0-alpha.0",
     "react": "*",
     "react-native": "*",
-    "react-native-safe-area-context": "^0.3.6"
+    "react-native-safe-area-context": "^0.6.0"
   },
   "@react-native-community/bob": {
     "source": "src",
@@ -57,7 +57,12 @@
     "targets": [
       "commonjs",
       "module",
-      "typescript"
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
     ]
   }
 }

packages/bottom-tabs/src/navigators/createBottomTabNavigator.tsx

@@ -3,7 +3,7 @@ import {
   useNavigationBuilder,
   createNavigatorFactory,
   DefaultNavigatorOptions,
-} from '@react-navigation/core';
+} from '@react-navigation/native';
 import {
   TabRouter,
   TabRouterOptions,

packages/bottom-tabs/src/types.tsx

@@ -10,18 +10,18 @@ import {
   NavigationProp,
   ParamListBase,
   Descriptor,
-} from '@react-navigation/core';
+} from '@react-navigation/native';
 import { TabNavigationState } from '@react-navigation/routers';
 
 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

@@ -10,22 +10,15 @@ import {
   Dimensions,
 } from 'react-native';
 import {
-  Route,
   NavigationContext,
   CommonActions,
-} from '@react-navigation/core';
+  useTheme,
+} from '@react-navigation/native';
 import { SafeAreaConsumer } from 'react-native-safe-area-context';
 
 import BottomTabItem from './BottomTabItem';
 import { BottomTabBarProps } from '../types';
 
-type State = {
-  dimensions: { height: number; width: number };
-  layout: { height: number; width: number };
-  keyboard: boolean;
-  visible: Animated.Value;
-};
-
 type Props = BottomTabBarProps & {
   activeTintColor?: string;
   inactiveTintColor?: string;
@@ -34,118 +27,115 @@ type Props = BottomTabBarProps & {
 const DEFAULT_TABBAR_HEIGHT = 50;
 const DEFAULT_MAX_TAB_ITEM_WIDTH = 125;
 
-export default class BottomTabBar extends React.Component<Props, State> {
-  static defaultProps = {
-    keyboardHidesTabBar: false,
-    adaptive: true,
-  };
+const useNativeDriver = Platform.OS !== 'web';
 
-  state = {
-    dimensions: Dimensions.get('window'),
-    layout: { height: 0, width: 0 },
-    keyboard: false,
-    visible: new Animated.Value(1),
-  };
+export default function BottomTabBar({
+  state,
+  navigation,
+  descriptors,
+  activeBackgroundColor,
+  activeTintColor,
+  adaptive = true,
+  allowFontScaling,
+  inactiveBackgroundColor,
+  inactiveTintColor,
+  keyboardHidesTabBar = false,
+  labelPosition,
+  labelStyle,
+  showIcon,
+  showLabel,
+  style,
+  tabStyle,
+}: Props) {
+  const { colors } = useTheme();
 
-  componentDidMount() {
-    Dimensions.addEventListener('change', this.handleOrientationChange);
+  const [dimensions, setDimensions] = React.useState(Dimensions.get('window'));
+  const [layout, setLayout] = React.useState({
+    height: 0,
+    width: dimensions.width,
+  });
+  const [keyboardShown, setKeyboardShown] = React.useState(false);
 
-    if (Platform.OS === 'ios') {
-      Keyboard.addListener('keyboardWillShow', this.handleKeyboardShow);
-      Keyboard.addListener('keyboardWillHide', this.handleKeyboardHide);
-    } else {
-      Keyboard.addListener('keyboardDidShow', this.handleKeyboardShow);
-      Keyboard.addListener('keyboardDidHide', this.handleKeyboardHide);
-    }
-  }
+  const [visible] = React.useState(() => new Animated.Value(0));
 
-  componentWillUnmount() {
-    Dimensions.removeEventListener('change', this.handleOrientationChange);
+  const { routes } = state;
 
-    if (Platform.OS === 'ios') {
-      Keyboard.removeListener('keyboardWillShow', this.handleKeyboardShow);
-      Keyboard.removeListener('keyboardWillHide', this.handleKeyboardHide);
-    } else {
-      Keyboard.removeListener('keyboardDidShow', this.handleKeyboardShow);
-      Keyboard.removeListener('keyboardDidHide', this.handleKeyboardHide);
-    }
-  }
-
-  private handleOrientationChange = ({ window }: { window: ScaledSize }) => {
-    this.setState({ dimensions: window });
-  };
-
-  private handleKeyboardShow = () =>
-    this.setState({ keyboard: true }, () =>
-      Animated.timing(this.state.visible, {
+  React.useEffect(() => {
+    if (keyboardShown) {
+      Animated.timing(visible, {
         toValue: 0,
         duration: 200,
-        useNativeDriver: true,
-      }).start()
-    );
+        useNativeDriver,
+      }).start();
+    }
+  }, [keyboardShown, visible]);
 
-  private handleKeyboardHide = () =>
-    Animated.timing(this.state.visible, {
-      toValue: 1,
-      duration: 250,
-      useNativeDriver: true,
-    }).start(({ finished }) => {
-      if (finished) {
-        this.setState({ keyboard: false });
-      }
-    });
+  React.useEffect(() => {
+    const handleOrientationChange = ({ window }: { window: ScaledSize }) => {
+      setDimensions(window);
+    };
 
-  private handleLayout = (e: LayoutChangeEvent) => {
-    const { layout } = this.state;
-    const { height, width } = e.nativeEvent.layout;
+    const handleKeyboardShow = () => setKeyboardShown(true);
 
-    if (height === layout.height && width === layout.width) {
-      return;
+    const handleKeyboardHide = () =>
+      Animated.timing(visible, {
+        toValue: 1,
+        duration: 250,
+        useNativeDriver,
+      }).start(({ finished }) => {
+        if (finished) {
+          setKeyboardShown(false);
+        }
+      });
+
+    Dimensions.addEventListener('change', handleOrientationChange);
+
+    if (Platform.OS === 'ios') {
+      Keyboard.addListener('keyboardWillShow', handleKeyboardShow);
+      Keyboard.addListener('keyboardWillHide', handleKeyboardHide);
+    } else {
+      Keyboard.addListener('keyboardDidShow', handleKeyboardShow);
+      Keyboard.addListener('keyboardDidHide', handleKeyboardHide);
     }
 
-    this.setState({
-      layout: {
-        height,
-        width,
-      },
+    return () => {
+      Dimensions.removeEventListener('change', handleOrientationChange);
+
+      if (Platform.OS === 'ios') {
+        Keyboard.removeListener('keyboardWillShow', handleKeyboardShow);
+        Keyboard.removeListener('keyboardWillHide', handleKeyboardHide);
+      } else {
+        Keyboard.removeListener('keyboardDidShow', handleKeyboardShow);
+        Keyboard.removeListener('keyboardDidHide', handleKeyboardHide);
+      }
+    };
+  }, [visible]);
+
+  const handleLayout = (e: LayoutChangeEvent) => {
+    const { height, width } = e.nativeEvent.layout;
+
+    setLayout(layout => {
+      if (height === layout.height && width === layout.width) {
+        return layout;
+      } else {
+        return {
+          height,
+          width,
+        };
+      }
     });
   };
 
-  private getLabelText = ({ route }: { route: Route<string> }) => {
-    const { options } = this.props.descriptors[route.key];
-
-    return options.tabBarLabel !== undefined
-      ? options.tabBarLabel
-      : options.title !== undefined
-      ? options.title
-      : route.name;
-  };
-
-  private shouldUseHorizontalLabels = () => {
-    const { state, adaptive, tabStyle, labelPosition } = this.props;
-    const { dimensions } = this.state;
-    const { routes } = state;
-    const isLandscape = dimensions.width > dimensions.height;
-
+  const shouldUseHorizontalLabels = () => {
     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;
 
@@ -159,132 +149,123 @@ export default class BottomTabBar extends React.Component<Props, State> {
         }
       }
 
-      return routes.length * maxTabItemWidth <= dimensions.width;
+      return routes.length * maxTabItemWidth <= layout.width;
     } else {
+      const isLandscape = dimensions.width > dimensions.height;
+
       return isLandscape;
     }
   };
 
-  render() {
-    const {
-      state,
-      navigation,
-      descriptors,
-      keyboardHidesTabBar,
-      activeTintColor,
-      inactiveTintColor,
-      activeBackgroundColor,
-      inactiveBackgroundColor,
-      labelStyle,
-      showIcon,
-      showLabel,
-      allowFontScaling,
-      style,
-      tabStyle,
-    } = this.props;
-    const { routes } = state;
+  return (
+    <SafeAreaConsumer>
+      {insets => (
+        <Animated.View
+          style={[
+            styles.tabBar,
+            {
+              backgroundColor: colors.card,
+              borderTopColor: colors.border,
+            },
+            keyboardHidesTabBar
+              ? {
+                  // When the keyboard is shown, slide down the tab bar
+                  transform: [
+                    {
+                      translateY: visible.interpolate({
+                        inputRange: [0, 1],
+                        outputRange: [layout.height, 0],
+                      }),
+                    },
+                  ],
+                  // Absolutely position the tab bar so that the content is below it
+                  // This is needed to avoid gap at bottom when the tab bar is hidden
+                  position: keyboardShown ? 'absolute' : null,
+                }
+              : null,
+            {
+              height: DEFAULT_TABBAR_HEIGHT + (insets ? insets.bottom : 0),
+              paddingBottom: insets ? insets.bottom : 0,
+            },
+            style,
+          ]}
+          pointerEvents={keyboardHidesTabBar && keyboardShown ? 'none' : 'auto'}
+        >
+          <View style={styles.content} onLayout={handleLayout}>
+            {routes.map((route, index) => {
+              const focused = index === state.index;
+              const { options } = descriptors[route.key];
 
-    return (
-      <SafeAreaConsumer>
-        {insets => (
-          <Animated.View
-            style={[
-              styles.tabBar,
-              keyboardHidesTabBar
-                ? {
-                    // When the keyboard is shown, slide down the tab bar
-                    transform: [
-                      {
-                        translateY: this.state.visible.interpolate({
-                          inputRange: [0, 1],
-                          outputRange: [this.state.layout.height, 0],
-                        }),
-                      },
-                    ],
-                    // Absolutely position the tab bar so that the content is below it
-                    // This is needed to avoid gap at bottom when the tab bar is hidden
-                    position: this.state.keyboard ? 'absolute' : null,
-                  }
-                : null,
-              {
-                height: DEFAULT_TABBAR_HEIGHT + (insets ? insets.bottom : 0),
-                paddingBottom: insets ? insets.bottom : 0,
-              },
-              style,
-            ]}
-            pointerEvents={
-              keyboardHidesTabBar && this.state.keyboard ? 'none' : 'auto'
-            }
-          >
-            <View style={styles.content} onLayout={this.handleLayout}>
-              {routes.map((route, index) => {
-                const focused = index === state.index;
-                const { options } = descriptors[route.key];
+              const onPress = () => {
+                const event = navigation.emit({
+                  type: 'tabPress',
+                  target: route.key,
+                  canPreventDefault: true,
+                });
 
-                const onPress = () => {
-                  const event = navigation.emit({
-                    type: 'tabPress',
-                    target: route.key,
+                if (!focused && !event.defaultPrevented) {
+                  navigation.dispatch({
+                    ...CommonActions.navigate(route.name),
+                    target: state.key,
                   });
+                }
+              };
 
-                  if (!focused && !event.defaultPrevented) {
-                    navigation.dispatch({
-                      ...CommonActions.navigate(route.name),
-                      target: state.key,
-                    });
-                  }
-                };
+              const onLongPress = () => {
+                navigation.emit({
+                  type: 'tabLongPress',
+                  target: route.key,
+                });
+              };
 
-                const onLongPress = () => {
-                  navigation.emit({
-                    type: 'tabLongPress',
-                    target: route.key,
-                  });
-                };
+              const label =
+                options.tabBarLabel !== undefined
+                  ? options.tabBarLabel
+                  : options.title !== undefined
+                  ? options.title
+                  : route.name;
 
-                const label = this.getLabelText({ route });
-                const accessibilityLabel =
-                  options.tabBarAccessibilityLabel !== undefined
-                    ? options.tabBarAccessibilityLabel
-                    : typeof label === 'string'
-                    ? `${label}, tab, ${index + 1} of ${routes.length}`
-                    : undefined;
+              const accessibilityLabel =
+                options.tabBarAccessibilityLabel !== undefined
+                  ? options.tabBarAccessibilityLabel
+                  : typeof label === 'string'
+                  ? `${label}, tab, ${index + 1} of ${routes.length}`
+                  : undefined;
 
-                return (
-                  <NavigationContext.Provider
-                    key={route.key}
-                    value={descriptors[route.key].navigation}
-                  >
-                    <BottomTabItem
-                      route={route}
-                      focused={focused}
-                      horizontal={this.shouldUseHorizontalLabels()}
-                      onPress={onPress}
-                      onLongPress={onLongPress}
-                      accessibilityLabel={accessibilityLabel}
-                      testID={options.tabBarTestID}
-                      allowFontScaling={allowFontScaling}
-                      activeTintColor={activeTintColor}
-                      inactiveTintColor={inactiveTintColor}
-                      activeBackgroundColor={activeBackgroundColor}
-                      inactiveBackgroundColor={inactiveBackgroundColor}
-                      button={options.tabBarButton}
-                      icon={options.tabBarIcon}
-                      label={label}
-                      showIcon={showIcon}
-                      showLabel={showLabel}
-                      labelStyle={labelStyle}
-                      style={tabStyle}
-                    />
-                  </NavigationContext.Provider>
-                );
-              })}
-            </View>
-          </Animated.View>
-        )}
-      </SafeAreaConsumer>
-    );
-  }
+              return (
+                <NavigationContext.Provider
+                  key={route.key}
+                  value={descriptors[route.key].navigation}
+                >
+                  <BottomTabItem
+                    route={route}
+                    focused={focused}
+                    horizontal={shouldUseHorizontalLabels()}
+                    onPress={onPress}
+                    onLongPress={onLongPress}
+                    accessibilityLabel={accessibilityLabel}
+                    testID={options.tabBarTestID}
+                    allowFontScaling={allowFontScaling}
+                    activeTintColor={activeTintColor}
+                    inactiveTintColor={inactiveTintColor}
+                    activeBackgroundColor={activeBackgroundColor}
+                    inactiveBackgroundColor={inactiveBackgroundColor}
+                    button={options.tabBarButton}
+                    icon={options.tabBarIcon}
+                    label={label}
+                    showIcon={showIcon}
+                    showLabel={showLabel}
+                    labelStyle={labelStyle}
+                    style={tabStyle}
+                  />
+                </NavigationContext.Provider>
+              );
+            })}
+          </View>
+        </Animated.View>
+      )}
+    </SafeAreaConsumer>
+  );
 }
 
 const styles = StyleSheet.create({
@@ -292,9 +273,7 @@ const styles = StyleSheet.create({
     left: 0,
     right: 0,
     bottom: 0,
-    backgroundColor: '#fff',
     borderTopWidth: StyleSheet.hairlineWidth,
-    borderTopColor: 'rgba(0, 0, 0, .3)',
     elevation: 8,
   },
   content: {

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

@@ -8,7 +8,8 @@ import {
   ViewStyle,
   TextStyle,
 } from 'react-native';
-import { Route } from '@react-navigation/core';
+import { Route, useTheme } from '@react-navigation/native';
+import Color from 'color';
 
 import TabBarIcon from './TabBarIcon';
 import { BottomTabBarButtonProps } from '../types';
@@ -113,8 +114,8 @@ export default function BottomTabBarItem({
   onPress,
   onLongPress,
   horizontal,
-  activeTintColor = '#007AFF',
-  inactiveTintColor = '#8E8E93',
+  activeTintColor: customActiveTintColor,
+  inactiveTintColor: customInactiveTintColor,
   activeBackgroundColor = 'transparent',
   inactiveBackgroundColor = 'transparent',
   showLabel = true,
@@ -123,6 +124,20 @@ export default function BottomTabBarItem({
   labelStyle,
   style,
 }: Props) {
+  const { colors } = useTheme();
+
+  const activeTintColor =
+    customActiveTintColor === undefined
+      ? colors.primary
+      : customActiveTintColor;
+
+  const inactiveTintColor =
+    customInactiveTintColor === undefined
+      ? Color(colors.text)
+          .mix(Color(colors.card), 0.5)
+          .hex()
+      : customInactiveTintColor;
+
   const renderLabel = ({ focused }: { focused: boolean }) => {
     if (showLabel === false) {
       return null;

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

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { View, StyleSheet } from 'react-native';
 
 import { TabNavigationState } from '@react-navigation/routers';
+import { useTheme } from '@react-navigation/native';
 // eslint-disable-next-line import/no-unresolved
 import { ScreenContainer } from 'react-native-screens';
 
@@ -25,6 +26,26 @@ type State = {
   loaded: number[];
 };
 
+function SceneContent({
+  isFocused,
+  children,
+}: {
+  isFocused: boolean;
+  children: React.ReactNode;
+}) {
+  const { colors } = useTheme();
+
+  return (
+    <View
+      accessibilityElementsHidden={!isFocused}
+      importantForAccessibility={isFocused ? 'auto' : 'no-hide-descendants'}
+      style={[styles.content, { backgroundColor: colors.background }]}
+    >
+      {children}
+    </View>
+  );
+}
+
 export default class BottomTabView extends React.Component<Props, State> {
   static defaultProps = {
     lazy: true,
@@ -97,15 +118,9 @@ export default class BottomTabView extends React.Component<Props, State> {
                   style={StyleSheet.absoluteFill}
                   isVisible={isFocused}
                 >
-                  <View
-                    accessibilityElementsHidden={!isFocused}
-                    importantForAccessibility={
-                      isFocused ? 'auto' : 'no-hide-descendants'
-                    }
-                    style={styles.content}
-                  >
+                  <SceneContent isFocused={isFocused}>
                     {descriptors[route.key].render()}
-                  </View>
+                  </SceneContent>
                 </ResourceSavingScene>
               );
             })}

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

@@ -14,7 +14,7 @@ const FAR_FAR_AWAY = 3000; // this should be big enough to move the whole view o
 
 export default class ResourceSavingScene extends React.Component<Props> {
   render() {
-    if (screensEnabled && screensEnabled()) {
+    if (screensEnabled?.()) {
       const { isVisible, ...rest } = this.props;
       // @ts-ignore
       return <Screen active={isVisible ? 1 : 0} {...rest} />;

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

@@ -3,6 +3,17 @@ import {
   SafeAreaProvider,
   SafeAreaConsumer,
 } from 'react-native-safe-area-context';
+import {
+  getStatusBarHeight,
+  getBottomSpace,
+} from 'react-native-iphone-x-helper';
+
+const initialSafeAreaInsets = {
+  top: getStatusBarHeight(true),
+  bottom: getBottomSpace(),
+  right: 0,
+  left: 0,
+};
 
 type Props = {
   children: React.ReactNode;
@@ -19,7 +30,11 @@ export default function SafeAreaProviderCompat({ children }: Props) {
           return children;
         }
 
-        return <SafeAreaProvider>{children}</SafeAreaProvider>;
+        return (
+          <SafeAreaProvider initialSafeAreaInsets={initialSafeAreaInsets}>
+            {children}
+          </SafeAreaProvider>
+        );
       }}
     </SafeAreaConsumer>
   );

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { View, StyleSheet, StyleProp, ViewStyle } from 'react-native';
-import { Route } from '@react-navigation/core';
+import { Route } from '@react-navigation/native';
 
 type Props = {
   route: Route<string>;

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,109 @@
 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
+
+
+
+
+
+# [5.0.0-alpha.22](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.22) (2020-01-09)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
+# [5.0.0-alpha.21](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/compat@5.0.0-alpha.20...@react-navigation/compat@5.0.0-alpha.21) (2020-01-05)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
+# [5.0.0-alpha.20](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/compat@5.0.0-alpha.19...@react-navigation/compat@5.0.0-alpha.20) (2020-01-01)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
+# [5.0.0-alpha.19](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/compat@5.0.0-alpha.18...@react-navigation/compat@5.0.0-alpha.19) (2019-12-19)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
+# [5.0.0-alpha.18](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/compat@5.0.0-alpha.17...@react-navigation/compat@5.0.0-alpha.18) (2019-12-16)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
+# [5.0.0-alpha.17](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/compat@5.0.0-alpha.16...@react-navigation/compat@5.0.0-alpha.17) (2019-12-11)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
 # [5.0.0-alpha.16](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/compat@5.0.0-alpha.15...@react-navigation/compat@5.0.0-alpha.16) (2019-12-10)
 
 **Note:** Version bump only for package @react-navigation/compat

packages/compat/README.md

@@ -2,12 +2,14 @@
 
 Compatibility layer to write navigator definitions in static configuration format.
 
+Documentation can be found on the [React Navigation website](https://reactnavigation.org/docs/en/next/compatibility.html).
+
 ## Installation
 
 Open a Terminal in your project's folder and run,
 
 ```sh
-yarn add @react-navigation/core @react-navigation/compat
+yarn add @react-navigation/native @react-navigation/compat
 ```
 
 ## Usage

packages/compat/package.json

@@ -1,21 +1,18 @@
 {
   "name": "@react-navigation/compat",
   "description": "Compatibility layer to write navigator definitions in static configuration format",
-  "version": "5.0.0-alpha.16",
+  "version": "5.0.0-alpha.28",
   "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/react-navigation/navigation-ex.git",
-    "directory": "packages/compat"
-  },
+  "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"
   },
@@ -24,15 +21,15 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/routers": "^5.0.0-alpha.15"
+    "@react-navigation/routers": "^5.0.0-alpha.27"
   },
   "devDependencies": {
-    "@types/react": "^16.9.11",
+    "@types/react": "^16.9.17",
     "react": "~16.9.0",
-    "typescript": "^3.7.2"
+    "typescript": "^3.7.4"
   },
   "peerDependencies": {
-    "@react-navigation/core": "^5.0.0-alpha.0",
+    "@react-navigation/native": "^5.0.0-alpha.0",
     "react": "~16.9.0"
   },
   "@react-native-community/bob": {
@@ -41,7 +38,12 @@
     "targets": [
       "commonjs",
       "module",
-      "typescript"
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
     ]
   }
 }

packages/compat/src/CompatScreen.tsx

@@ -3,9 +3,9 @@ import {
   NavigationProp,
   ParamListBase,
   RouteProp,
-} from '@react-navigation/core';
+} 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/NavigationActions.tsx

@@ -1,4 +1,4 @@
-import { CommonActions, NavigationState } from '@react-navigation/core';
+import { CommonActions, NavigationState } from '@react-navigation/native';
 
 export function navigate({
   routeName,
@@ -25,7 +25,7 @@ export function navigate({
 }
 
 export function back(options?: { key?: null | string }) {
-  return options && options.key != null
+  return options?.key != null
     ? (state: NavigationState) => ({
         ...CommonActions.goBack(),
         source: options.key,

packages/compat/src/StackActions.tsx

@@ -1,4 +1,4 @@
-import { CommonActions } from '@react-navigation/core';
+import { CommonActions } from '@react-navigation/native';
 import { StackActions, StackActionType } from '@react-navigation/routers';
 
 export function reset(): CommonActions.Action {
@@ -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

@@ -4,15 +4,21 @@ import {
   ParamListBase,
   NavigationProp,
   RouteProp,
-} from '@react-navigation/core';
+} from '@react-navigation/native';
 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);
-          unsubscribe && unsubscribe();
+          const unsubscribe = context.subscriptions.didFocus.get(callback);
+          unsubscribe?.();
           break;
         }
         case 'didBlur': {
-          const unsubscribe = blurSubscriptions.get(callback);
-          unsubscribe && unsubscribe();
+          const unsubscribe = context.subscriptions.didBlur.get(callback);
+          unsubscribe?.();
           break;
         }
         case 'refocus': {
-          const unsubscribe = refocusSubscriptions.get(callback);
-          unsubscribe && unsubscribe();
+          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

@@ -6,7 +6,7 @@ import {
   TypedNavigator,
   NavigationProp,
   RouteProp,
-} from '@react-navigation/core';
+} from '@react-navigation/native';
 import CompatScreen from './CompatScreen';
 import ScreenPropsContext from './ScreenPropsContext';
 import createCompatNavigationProp from './createCompatNavigationProp';
@@ -47,7 +47,7 @@ export default function createCompatNavigatorFactory<
   >(
     routeConfig: CompatRouteConfig<NavigationPropType>,
     navigationConfig: Partial<Omit<NavigationConfig, 'screenOptions'>> & {
-      order?: Array<Extract<keyof ParamList, string>>;
+      order?: Extract<keyof ParamList, string>[];
       defaultNavigationOptions?: ScreenOptions;
       navigationOptions?: Record<string, any>;
     } = {}
@@ -110,7 +110,7 @@ export default function createCompatNavigatorFactory<
                   ? {
                       navigation: createCompatNavigationProp<
                         NavigationPropType
-                      >(navigation, route),
+                      >(navigation, route, {}),
                       navigationOptions: defaultNavigationOptions || {},
                       screenProps,
                     }

packages/compat/src/createSwitchNavigator.tsx

@@ -2,7 +2,7 @@ import {
   useNavigationBuilder,
   createNavigatorFactory,
   DefaultNavigatorOptions,
-} from '@react-navigation/core';
+} from '@react-navigation/native';
 import {
   TabRouter,
   TabRouterOptions,

packages/compat/src/types.tsx

@@ -1,4 +1,4 @@
-import { ParamListBase, NavigationProp, Route } from '@react-navigation/core';
+import { ParamListBase, NavigationProp, Route } from '@react-navigation/native';
 import * as helpers from './helpers';
 
 export type CompatNavigationProp<

packages/compat/src/useCompatNavigation.tsx

@@ -4,7 +4,8 @@ import {
   useRoute,
   NavigationProp,
   ParamListBase,
-} from '@react-navigation/core';
+  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/src/withNavigation.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { NavigationProp, ParamListBase } from '@react-navigation/core';
+import { NavigationProp, ParamListBase } from '@react-navigation/native';
 import useCompatNavigation from './useCompatNavigation';
 import { CompatNavigationProp } from './types';
 

packages/compat/src/withNavigationFocus.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useIsFocused } from '@react-navigation/core';
+import { useIsFocused } from '@react-navigation/native';
 
 type InjectedProps = {
   isFocused: boolean;

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,123 @@
 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
+
+
+
+
+
+# [5.0.0-alpha.31](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.31) (2020-01-09)
+
+**Note:** Version bump only for package @react-navigation/core
+
+
+
+
+
+# [5.0.0-alpha.30](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/core@5.0.0-alpha.29...@react-navigation/core@5.0.0-alpha.30) (2020-01-01)
+
+
+### Bug Fixes
+
+* cleanup transaction even if action wasn't handled ([f462d67](https://github.com/react-navigation/navigation-ex/commit/f462d672708cabfb0477c3a48505bd194ea626fd))
+* show error if an action was not handled ([0252bdc](https://github.com/react-navigation/navigation-ex/commit/0252bdc2222ebe7410a0ed593bf03b2bdf5dc7ca))
+
+
+
+
+
+# [5.0.0-alpha.29](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/core@5.0.0-alpha.28...@react-navigation/core@5.0.0-alpha.29) (2019-12-19)
+
+**Note:** Version bump only for package @react-navigation/core
+
+
+
+
+
+# [5.0.0-alpha.28](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/core@5.0.0-alpha.27...@react-navigation/core@5.0.0-alpha.28) (2019-12-16)
+
+
+### Bug Fixes
+
+* use Partial type for initialParam ([#206](https://github.com/react-navigation/navigation-ex/issues/206)) ([c3d3748](https://github.com/react-navigation/navigation-ex/commit/c3d374814308b0bd6d259099444f0f24593f4d7e))
+
+
+### Features
+
+* add nested config in deep linking ([#210](https://github.com/react-navigation/navigation-ex/issues/210)) ([8002d51](https://github.com/react-navigation/navigation-ex/commit/8002d5179524a7211c37760a4ed45e8c12af4358)), closes [#154](https://github.com/react-navigation/navigation-ex/issues/154)
+
+
+
+
+
 # [5.0.0-alpha.27](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/core@5.0.0-alpha.26...@react-navigation/core@5.0.0-alpha.27) (2019-12-10)
 
 **Note:** Version bump only for package @react-navigation/core

packages/core/package.json

@@ -6,17 +6,13 @@
     "react-native",
     "react-navigation"
   ],
-  "version": "5.0.0-alpha.27",
+  "version": "5.0.0-alpha.37",
   "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/react-navigation/navigation-ex.git",
-    "directory": "packages/core"
-  },
+  "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"
@@ -31,19 +27,22 @@
   "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.2",
-    "@react-native-community/bob": "^0.7.0",
-    "@types/react": "^16.9.11",
+    "@babel/core": "^7.7.7",
+    "@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.9.1",
-    "react-test-renderer": "~16.9.0",
-    "typescript": "^3.7.2"
+    "react-native-testing-library": "^1.12.0",
+    "react-test-renderer": "~16.12.0",
+    "typescript": "^3.7.4"
   },
   "peerDependencies": {
     "react": "~16.9.0"
@@ -54,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

@@ -1,4 +1,3 @@
-// eslint-disable-next-line import/no-cycle
 import { NavigationState, PartialState } from './types';
 
 export type Action =
@@ -15,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>;
@@ -60,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.
  *
@@ -123,9 +125,11 @@ const Container = React.forwardRef(function NavigationContainer(
       isTransactionActiveRef.current = true;
       transactionStateRef.current = navigationState;
 
-      callback();
-
-      isTransactionActiveRef.current = false;
+      try {
+        callback();
+      } finally {
+        isTransactionActiveRef.current = false;
+      }
 
       return transactionStateRef.current;
     });
@@ -202,7 +206,7 @@ const Container = React.forwardRef(function NavigationContainer(
   }, [getStateForRoute]);
 
   React.useImperativeHandle(ref, () => ({
-    ...(Object.keys(CommonActions) as Array<keyof typeof CommonActions>).reduce<
+    ...(Object.keys(CommonActions) as (keyof typeof CommonActions)[]).reduce<
       any
     >((acc, name) => {
       acc[name] = (...args: any[]) =>
@@ -240,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 {
@@ -259,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__/getActionFromState.test.tsx

@@ -0,0 +1,75 @@
+import getActionFromState from '../getActionFromState';
+
+it('gets navigate action from state', () => {
+  const state = {
+    routes: [
+      {
+        name: 'foo',
+        state: {
+          routes: [
+            {
+              name: 'bar',
+              params: { answer: 42 },
+              state: {
+                routes: [
+                  {
+                    name: 'qux',
+                    params: { author: 'jane' },
+                  },
+                ],
+              },
+            },
+          ],
+        },
+      },
+    ],
+  };
+
+  expect(getActionFromState(state)).toEqual({
+    payload: {
+      name: 'foo',
+      params: {
+        params: {
+          answer: 42,
+          params: {
+            author: 'jane',
+          },
+          screen: 'qux',
+        },
+        screen: 'bar',
+      },
+    },
+    type: 'NAVIGATE',
+  });
+});
+
+it('gets reset action from state', () => {
+  const state = {
+    routes: [
+      {
+        name: 'foo',
+        state: {
+          routes: [
+            {
+              name: 'bar',
+              state: {
+                routes: [
+                  {
+                    name: 'qux',
+                    params: { author: 'jane' },
+                  },
+                  { name: 'quz' },
+                ],
+              },
+            },
+          ],
+        },
+      },
+    ],
+  };
+
+  expect(getActionFromState(state)).toEqual({
+    payload: state,
+    type: 'RESET_ROOT',
+  });
+});

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,9 +134,276 @@ it('handles route without param', () => {
         },
       },
     ],
-  });
+  };
+
+  expect(getStateFromPath(path)).toEqual(state);
+  expect(getStateFromPath(getPathFromState(state))).toEqual(state);
 });
 
-it('returns undefined for invalid path', () => {
-  expect(getStateFromPath('//')).toBe(undefined);
+it('converts path string to initial state with config with nested screens', () => {
+  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',
+        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(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 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,
+      },
+    },
+  };
+
+  const state = {
+    routes: [
+      {
+        name: 'Foo',
+        state: {
+          routes: [
+            {
+              name: 'Foe',
+              state: {
+                routes: [
+                  {
+                    name: 'Baz',
+                    params: {
+                      author: 'Jane',
+                      count: 10,
+                      answer: '42',
+                      valid: true,
+                    },
+                  },
+                ],
+              },
+            },
+          ],
+        },
+      },
+    ],
+  };
+
+  expect(getStateFromPath(path, config)).toEqual(state);
+  expect(getStateFromPath(getPathFromState(state, config), config)).toEqual(
+    state
+  );
+});
+
+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,
+        },
+      },
+    },
+  };
+
+  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(getStateFromPath(path, config)).toEqual(state);
+  expect(getStateFromPath(getPathFromState(state, config), config)).toEqual(
+    state
+  );
+});
+
+it('handles parse in 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(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', () => {
+  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,
+        },
+        stringify: {
+          id: (id: number) => `id=${id}`,
+        },
+        Baz: 'baz',
+      },
+    },
+  };
+
+  const state = {
+    routes: [
+      {
+        name: 'Foo',
+        state: {
+          routes: [
+            {
+              name: 'Bar',
+              state: {
+                routes: [{ name: 'Baz' }],
+              },
+            },
+          ],
+        },
+      },
+    ],
+  };
+
+  expect(getStateFromPath(path, config)).toEqual(state);
+  expect(getStateFromPath(getPathFromState(state, config), config)).toEqual(
+    state
+  );
 });

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

@@ -357,6 +357,8 @@ it("doesn't update state if action wasn't handled", () => {
 
   const onStateChange = jest.fn();
 
+  const spy = jest.spyOn(console, 'error').mockImplementation();
+
   render(
     <NavigationContainer onStateChange={onStateChange}>
       <TestNavigator initialRouteName="foo">
@@ -367,6 +369,12 @@ it("doesn't update state if action wasn't handled", () => {
   );
 
   expect(onStateChange).toBeCalledTimes(0);
+
+  expect(spy.mock.calls[0][0]).toMatch(
+    "The action 'INVALID' with payload 'undefined' was not handled by any navigator."
+  );
+
+  spy.mockRestore();
 });
 
 it('cleans up state when the navigator unmounts', () => {
@@ -928,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

@@ -273,7 +273,7 @@ it('fires blur event when a route is removed with a delay', async () => {
     React.useImperativeHandle(ref, () => navigation, [navigation]);
 
     const [previous, dispatch] = React.useReducer(
-      (state, action) => {
+      (state: any, action: any) => {
         if (state.routes !== action.routes) {
           return { ...state, ...action };
         }
@@ -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 />);
+});