chore: publish

- @react-navigation/core@5.0.0-alpha.7
 - @react-navigation/example@5.0.0-alpha.6
 - @react-navigation/native@5.0.0-alpha.7

packages/bottom-tabs/CHANGELOG.md

@@ -3,6 +3,14 @@
 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.7](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/bottom-tabs@5.0.0-alpha.6...@react-navigation/bottom-tabs@5.0.0-alpha.7) (2019-08-31)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
 # [5.0.0-alpha.6](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/bottom-tabs@5.0.0-alpha.5...@react-navigation/bottom-tabs@5.0.0-alpha.6) (2019-08-29)
 
 

packages/bottom-tabs/package.json

@@ -10,7 +10,7 @@
     "android",
     "tab"
   ],
-  "version": "5.0.0-alpha.6",
+  "version": "5.0.0-alpha.7",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -33,7 +33,7 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/routers": "^5.0.0-alpha.6",
+    "@react-navigation/routers": "^5.0.0-alpha.7",
     "react-native-safe-area-view": "^0.14.6"
   },
   "devDependencies": {

packages/core/CHANGELOG.md

@@ -3,6 +3,43 @@
 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.7](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/core@5.0.0-alpha.5...@react-navigation/core@5.0.0-alpha.7) (2019-08-31)
+
+
+### Bug Fixes
+
+* fix navigation object changing too often ([3c840bb](https://github.com/react-navigation/navigation-ex/commit/3c840bb))
+
+
+### Features
+
+* add useRoute ([#89](https://github.com/react-navigation/navigation-ex/issues/89)) ([b0a3756](https://github.com/react-navigation/navigation-ex/commit/b0a3756))
+* support function in screenOptions ([eff0c04](https://github.com/react-navigation/navigation-ex/commit/eff0c04))
+
+
+
+
+
+# [5.0.0-alpha.6](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/core@5.0.0-alpha.5...@react-navigation/core@5.0.0-alpha.6) (2019-08-31)
+
+
+### Features
+
+* add useRoute ([#89](https://github.com/react-navigation/navigation-ex/issues/89)) ([b0a3756](https://github.com/react-navigation/navigation-ex/commit/b0a3756))
+* support function in screenOptions ([eff0c04](https://github.com/react-navigation/navigation-ex/commit/eff0c04))
+
+
+
+
+
+# [5.0.0-alpha.5](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/core@5.0.0-alpha.4...@react-navigation/core@5.0.0-alpha.5) (2019-08-30)
+
+**Note:** Version bump only for package @react-navigation/core
+
+
+
+
+
 # [5.0.0-alpha.4](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/core@5.0.0-alpha.3...@react-navigation/core@5.0.0-alpha.4) (2019-08-29)
 
 

packages/core/package.json

@@ -6,7 +6,7 @@
     "react-native",
     "react-navigation"
   ],
-  "version": "5.0.0-alpha.4",
+  "version": "5.0.0-alpha.7",
   "license": "MIT",
   "repository": {
     "type": "git",

packages/core/src/NavigationContext.tsx

@@ -1,11 +1,22 @@
 import * as React from 'react';
-import { NavigationProp, ParamListBase } from './types';
+import {
+  NavigationProp,
+  ParamListBase,
+  PartialState,
+  Route,
+  NavigationState,
+} from './types';
 
 /**
  * Context which holds the navigation prop for a screen.
  */
-const NavigationContext = React.createContext<
-  NavigationProp<ParamListBase, string, any, any> | undefined
->(undefined);
+const NavigationContext = React.createContext<{
+  navigation: NavigationProp<ParamListBase, string, any, any> | undefined;
+  route:
+    | Route<string> & {
+        state?: NavigationState | PartialState<NavigationState>;
+      }
+    | undefined;
+}>({ navigation: undefined, route: undefined });
 
 export default NavigationContext;

packages/core/src/SceneView.tsx

@@ -56,7 +56,7 @@ export default function SceneView<
         ),
       });
     },
-    [getState, route, setState]
+    [getState, route.key, setState]
   );
 
   const context = React.useMemo(
@@ -76,8 +76,16 @@ export default function SceneView<
     ]
   );
 
+  const navigationContext = React.useMemo(
+    () => ({
+      navigation,
+      route,
+    }),
+    [navigation, route]
+  );
+
   return (
-    <NavigationContext.Provider value={navigation}>
+    <NavigationContext.Provider value={navigationContext}>
       <NavigationStateContext.Provider value={context}>
         <EnsureSingleNavigator>
           <StaticContainer

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

@@ -46,11 +46,320 @@ it('sets options with options prop as an object', () => {
     </NavigationContainer>
   );
 
+  expect(root).toMatchInlineSnapshot(`
+                    <main>
+                      <h1>
+                        Hello world
+                      </h1>
+                      <div>
+                        Test screen
+                      </div>
+                    </main>
+          `);
+});
+
+it('sets options with options prop as a fuction', () => {
+  const TestNavigator = (props: any) => {
+    const { state, descriptors } = useNavigationBuilder<
+      NavigationState,
+      any,
+      { title?: string },
+      any
+    >(MockRouter, props);
+    const { render, options } = descriptors[state.routes[state.index].key];
+
+    return (
+      <main>
+        <h1>{options.title}</h1>
+        <div>{render()}</div>
+      </main>
+    );
+  };
+
+  const TestScreen = (): any => 'Test screen';
+
+  const root = render(
+    <NavigationContainer>
+      <TestNavigator>
+        <Screen
+          name="foo"
+          component={TestScreen}
+          options={({ route }: any) => ({ title: route.params.author })}
+          initialParams={{ author: 'Jane' }}
+        />
+        <Screen name="bar" component={jest.fn()} />
+      </TestNavigator>
+    </NavigationContainer>
+  );
+
+  expect(root).toMatchInlineSnapshot(`
+                    <main>
+                      <h1>
+                        Jane
+                      </h1>
+                      <div>
+                        Test screen
+                      </div>
+                    </main>
+          `);
+});
+
+it('sets options with screenOptions prop as an object', () => {
+  const TestNavigator = (props: any) => {
+    const { state, descriptors } = useNavigationBuilder<
+      NavigationState,
+      any,
+      { title?: string },
+      any
+    >(MockRouter, props);
+
+    return (
+      <>
+        {state.routes.map(route => {
+          const { render, options } = descriptors[route.key];
+
+          return (
+            <main key={route.key}>
+              <h1>{options.title}</h1>
+              <div>{render()}</div>
+            </main>
+          );
+        })}
+      </>
+    );
+  };
+
+  const TestScreenA = (): any => 'Test screen A';
+
+  const TestScreenB = (): any => 'Test screen B';
+
+  const root = render(
+    <NavigationContainer>
+      <TestNavigator screenOptions={{ title: 'Hello world' }}>
+        <Screen name="foo" component={TestScreenA} />
+        <Screen name="bar" component={TestScreenB} />
+      </TestNavigator>
+    </NavigationContainer>
+  );
+
+  expect(root).toMatchInlineSnapshot(`
+        Array [
+          <main>
+            <h1>
+              Hello world
+            </h1>
+            <div>
+              Test screen A
+            </div>
+          </main>,
+          <main>
+            <h1>
+              Hello world
+            </h1>
+            <div>
+              Test screen B
+            </div>
+          </main>,
+        ]
+    `);
+});
+
+it('sets options with screenOptions prop as a fuction', () => {
+  const TestNavigator = (props: any) => {
+    const { state, descriptors } = useNavigationBuilder<
+      NavigationState,
+      any,
+      { title?: string },
+      any
+    >(MockRouter, props);
+
+    return (
+      <>
+        {state.routes.map(route => {
+          const { render, options } = descriptors[route.key];
+
+          return (
+            <main key={route.key}>
+              <h1>{options.title}</h1>
+              <div>{render()}</div>
+            </main>
+          );
+        })}
+      </>
+    );
+  };
+
+  const TestScreenA = (): any => 'Test screen A';
+
+  const TestScreenB = (): any => 'Test screen B';
+
+  const root = render(
+    <NavigationContainer>
+      <TestNavigator
+        screenOptions={({ route }: any) => ({
+          title: `${route.name}: ${route.params.author || route.params.fruit}`,
+        })}
+      >
+        <Screen
+          name="foo"
+          component={TestScreenA}
+          initialParams={{ author: 'Jane' }}
+        />
+        <Screen
+          name="bar"
+          component={TestScreenB}
+          initialParams={{ fruit: 'Apple' }}
+        />
+      </TestNavigator>
+    </NavigationContainer>
+  );
+
+  expect(root).toMatchInlineSnapshot(`
+    Array [
+      <main>
+        <h1>
+          foo: Jane
+        </h1>
+        <div>
+          Test screen A
+        </div>
+      </main>,
+      <main>
+        <h1>
+          bar: Apple
+        </h1>
+        <div>
+          Test screen B
+        </div>
+      </main>,
+    ]
+  `);
+});
+
+it('sets initial options with setOptions', () => {
+  const TestNavigator = (props: any) => {
+    const { state, descriptors } = useNavigationBuilder<
+      NavigationState,
+      any,
+      {
+        title?: string;
+        color?: string;
+      },
+      any
+    >(MockRouter, props);
+    const { render, options } = descriptors[state.routes[state.index].key];
+
+    return (
+      <main>
+        <h1 color={options.color}>{options.title}</h1>
+        <div>{render()}</div>
+      </main>
+    );
+  };
+
+  const TestScreen = ({ navigation }: any): any => {
+    navigation.setOptions({
+      title: 'Hello world',
+    });
+
+    return 'Test screen';
+  };
+
+  const root = render(
+    <NavigationContainer>
+      <TestNavigator>
+        <Screen name="foo" options={{ color: 'blue' }}>
+          {props => <TestScreen {...props} />}
+        </Screen>
+        <Screen name="bar" component={jest.fn()} />
+      </TestNavigator>
+    </NavigationContainer>
+  );
+
+  expect(root).toMatchInlineSnapshot(`
+                <main>
+                  <h1
+                    color="blue"
+                  >
+                    Hello world
+                  </h1>
+                  <div>
+                    Test screen
+                  </div>
+                </main>
+        `);
+});
+
+it('updates options with setOptions', () => {
+  const TestNavigator = (props: any) => {
+    const { state, descriptors } = useNavigationBuilder<
+      NavigationState,
+      any,
+      any,
+      any
+    >(MockRouter, props);
+    const { render, options } = descriptors[state.routes[state.index].key];
+
+    return (
+      <main>
+        <h1 color={options.color}>{options.title}</h1>
+        <p>{options.description}</p>
+        <caption>{options.author}</caption>
+        <div>{render()}</div>
+      </main>
+    );
+  };
+
+  const TestScreen = ({ navigation }: any): any => {
+    navigation.setOptions({
+      title: 'Hello world',
+      description: 'Something here',
+    });
+
+    React.useEffect(() => {
+      const timer = setTimeout(() =>
+        navigation.setOptions({
+          title: 'Hello again',
+          author: 'Jane',
+        })
+      );
+
+      return () => clearTimeout(timer);
+    });
+
+    return 'Test screen';
+  };
+
+  const element = (
+    <NavigationContainer>
+      <TestNavigator>
+        <Screen name="foo" options={{ color: 'blue' }}>
+          {props => <TestScreen {...props} />}
+        </Screen>
+        <Screen name="bar" component={jest.fn()} />
+      </TestNavigator>
+    </NavigationContainer>
+  );
+
+  const root = render(element);
+
+  act(() => jest.runAllTimers());
+
+  root.update(element);
+
   expect(root).toMatchInlineSnapshot(`
             <main>
-              <h1>
-                Hello world
+              <h1
+                color="blue"
+              >
+                Hello again
               </h1>
+              <p>
+                Something here
+              </p>
+              <caption>
+                Jane
+              </caption>
               <div>
                 Test screen
               </div>
@@ -295,180 +604,3 @@ it('returns true for canGoBack when parent router handles GO_BACK', () => {
 
   expect(result).toBe(false);
 });
-
-it('sets options with options prop as a fuction', () => {
-  const TestNavigator = (props: any) => {
-    const { state, descriptors } = useNavigationBuilder<
-      NavigationState,
-      any,
-      { title?: string },
-      any
-    >(MockRouter, props);
-    const { render, options } = descriptors[state.routes[state.index].key];
-
-    return (
-      <main>
-        <h1>{options.title}</h1>
-        <div>{render()}</div>
-      </main>
-    );
-  };
-
-  const TestScreen = (): any => 'Test screen';
-
-  const root = render(
-    <NavigationContainer>
-      <TestNavigator>
-        <Screen
-          name="foo"
-          component={TestScreen}
-          options={({ route }: any) => ({ title: route.params.author })}
-          initialParams={{ author: 'Jane' }}
-        />
-        <Screen name="bar" component={jest.fn()} />
-      </TestNavigator>
-    </NavigationContainer>
-  );
-
-  expect(root).toMatchInlineSnapshot(`
-            <main>
-              <h1>
-                Jane
-              </h1>
-              <div>
-                Test screen
-              </div>
-            </main>
-      `);
-});
-
-it('sets initial options with setOptions', () => {
-  const TestNavigator = (props: any) => {
-    const { state, descriptors } = useNavigationBuilder<
-      NavigationState,
-      any,
-      {
-        title?: string;
-        color?: string;
-      },
-      any
-    >(MockRouter, props);
-    const { render, options } = descriptors[state.routes[state.index].key];
-
-    return (
-      <main>
-        <h1 color={options.color}>{options.title}</h1>
-        <div>{render()}</div>
-      </main>
-    );
-  };
-
-  const TestScreen = ({ navigation }: any): any => {
-    navigation.setOptions({
-      title: 'Hello world',
-    });
-
-    return 'Test screen';
-  };
-
-  const root = render(
-    <NavigationContainer>
-      <TestNavigator>
-        <Screen name="foo" options={{ color: 'blue' }}>
-          {props => <TestScreen {...props} />}
-        </Screen>
-        <Screen name="bar" component={jest.fn()} />
-      </TestNavigator>
-    </NavigationContainer>
-  );
-
-  expect(root).toMatchInlineSnapshot(`
-        <main>
-          <h1
-            color="blue"
-          >
-            Hello world
-          </h1>
-          <div>
-            Test screen
-          </div>
-        </main>
-    `);
-});
-
-it('updates options with setOptions', () => {
-  const TestNavigator = (props: any) => {
-    const { state, descriptors } = useNavigationBuilder<
-      NavigationState,
-      any,
-      any,
-      any
-    >(MockRouter, props);
-    const { render, options } = descriptors[state.routes[state.index].key];
-
-    return (
-      <main>
-        <h1 color={options.color}>{options.title}</h1>
-        <p>{options.description}</p>
-        <caption>{options.author}</caption>
-        <div>{render()}</div>
-      </main>
-    );
-  };
-
-  const TestScreen = ({ navigation }: any): any => {
-    navigation.setOptions({
-      title: 'Hello world',
-      description: 'Something here',
-    });
-
-    React.useEffect(() => {
-      const timer = setTimeout(() =>
-        navigation.setOptions({
-          title: 'Hello again',
-          author: 'Jane',
-        })
-      );
-
-      return () => clearTimeout(timer);
-    });
-
-    return 'Test screen';
-  };
-
-  const element = (
-    <NavigationContainer>
-      <TestNavigator>
-        <Screen name="foo" options={{ color: 'blue' }}>
-          {props => <TestScreen {...props} />}
-        </Screen>
-        <Screen name="bar" component={jest.fn()} />
-      </TestNavigator>
-    </NavigationContainer>
-  );
-
-  const root = render(element);
-
-  act(() => jest.runAllTimers());
-
-  root.update(element);
-
-  expect(root).toMatchInlineSnapshot(`
-    <main>
-      <h1
-        color="blue"
-      >
-        Hello again
-      </h1>
-      <p>
-        Something here
-      </p>
-      <caption>
-        Jane
-      </caption>
-      <div>
-        Test screen
-      </div>
-    </main>
-  `);
-});

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

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { render } from 'react-native-testing-library';
+import useNavigationBuilder from '../useNavigationBuilder';
+import useRoute from '../useRoute';
+import NavigationContainer from '../NavigationContainer';
+import Screen from '../Screen';
+import MockRouter from './__fixtures__/MockRouter';
+import { RouteProp } from '../types';
+
+it('gets route prop from context', () => {
+  expect.assertions(1);
+
+  const TestNavigator = (props: any): any => {
+    const { state, descriptors } = useNavigationBuilder(MockRouter, props);
+
+    return state.routes.map(route => descriptors[route.key].render());
+  };
+
+  const Test = () => {
+    const route = useRoute<RouteProp<{ sample: { x: string } }, 'sample'>>();
+
+    expect(route && route.params && route.params.x).toEqual(1);
+
+    return null;
+  };
+
+  render(
+    <NavigationContainer>
+      <TestNavigator>
+        <Screen name="foo" component={Test} initialParams={{ x: 1 }} />
+      </TestNavigator>
+    </NavigationContainer>
+  );
+});

packages/core/src/index.tsx

@@ -10,6 +10,7 @@ export { default as NavigationContext } from './NavigationContext';
 
 export { default as useNavigationBuilder } from './useNavigationBuilder';
 export { default as useNavigation } from './useNavigation';
+export { default as useRoute } from './useRoute';
 export { default as useFocusEffect } from './useFocusEffect';
 export { default as useIsFocused } from './useIsFocused';
 

packages/core/src/types.tsx

@@ -96,7 +96,12 @@ export type DefaultNavigatorOptions<
   /**
    * Default options for all screens under this navigator.
    */
-  screenOptions?: ScreenOptions;
+  screenOptions?:
+    | ScreenOptions
+    | ((props: {
+        route: RouteProp<ParamListBase, string>;
+        navigation: any;
+      }) => ScreenOptions);
 };
 
 export type RouterFactory<
@@ -534,11 +539,24 @@ export type TypedNavigator<
    * Navigator component which manages the child screens.
    */
   Navigator: React.ComponentType<
-    React.ComponentProps<Navigator> & {
+    Omit<
+      React.ComponentProps<Navigator>,
+      'initialRouteName' | 'screenOptions'
+    > & {
       /**
-       * Route to focus on initial render.
+       * Name of the route to focus by on initial render.
+       * If not specified, usually the first route is used.
        */
       initialRouteName?: keyof ParamList;
+      /**
+       * Default options for all screens under this navigator.
+       */
+      screenOptions?:
+        | ScreenOptions
+        | ((props: {
+            route: RouteProp<ParamList, keyof ParamList>;
+            navigation: any;
+          }) => ScreenOptions);
     }
   >;
   /**

packages/core/src/useDescriptors.tsx

@@ -13,6 +13,7 @@ import {
   NavigationState,
   ParamListBase,
   RouteConfig,
+  RouteProp,
   Router,
 } from './types';
 
@@ -20,7 +21,12 @@ type Options<ScreenOptions extends object> = {
   state: NavigationState;
   screens: { [key: string]: RouteConfig<ParamListBase, string, ScreenOptions> };
   navigation: NavigationHelpers<ParamListBase>;
-  screenOptions?: ScreenOptions;
+  screenOptions?:
+    | ScreenOptions
+    | ((props: {
+        route: RouteProp<ParamListBase, string>;
+        navigation: any;
+      }) => ScreenOptions);
   onAction: (
     action: NavigationAction,
     visitedNavigators?: Set<string>
@@ -93,13 +99,15 @@ export default function useDescriptors<
   return state.routes.reduce(
     (acc, route) => {
       const screen = screens[route.name];
+      const navigation = navigations[route.key];
 
       acc[route.key] = {
+        navigation,
         render() {
           return (
             <NavigationBuilderContext.Provider key={route.key} value={context}>
               <SceneView
-                navigation={navigations[route.key]}
+                navigation={navigation}
                 route={route}
                 screen={screen}
                 getState={getState}
@@ -108,22 +116,30 @@ export default function useDescriptors<
             </NavigationBuilderContext.Provider>
           );
         },
-        options: {
-          // The default `screenOptions` passed to the navigator
-          ...screenOptions,
-          // The `options` prop passed to `Screen` elements
-          ...(typeof screen.options === 'object' || screen.options == null
-            ? screen.options
-            : screen.options({
-                // @ts-ignore
-                route,
-                navigation: navigations[route.key],
-              })),
-          // The options set via `navigation.setOptions`
-          ...options[route.key],
+        get options() {
+          return {
+            // The default `screenOptions` passed to the navigator
+            ...(typeof screenOptions === 'object' || screenOptions == null
+              ? screenOptions
+              : screenOptions({
+                  // @ts-ignore
+                  route,
+                  navigation,
+                })),
+            // The `options` prop passed to `Screen` elements
+            ...(typeof screen.options === 'object' || screen.options == null
+              ? screen.options
+              : screen.options({
+                  // @ts-ignore
+                  route,
+                  navigation,
+                })),
+            // The options set via `navigation.setOptions`
+            ...options[route.key],
+          };
         },
-        navigation: navigations[route.key],
       };
+
       return acc;
     },
     {} as {

packages/core/src/useFocusEvents.tsx

@@ -12,7 +12,7 @@ type Options = {
  * Hook to take care of emitting `focus` and `blur` events.
  */
 export default function useFocusEvents({ state, emitter }: Options) {
-  const navigation = React.useContext(NavigationContext);
+  const { navigation } = React.useContext(NavigationContext);
   const lastFocusedKeyRef = React.useRef<string | undefined>();
 
   const currentFocusedKey = state.routes[state.index].key;

packages/core/src/useNavigation.tsx

@@ -10,7 +10,7 @@ import { NavigationProp, ParamListBase } from './types';
 export default function useNavigation<
   T extends NavigationProp<ParamListBase>
 >(): T {
-  const navigation = React.useContext(NavigationContext);
+  const { navigation } = React.useContext(NavigationContext);
 
   if (navigation === undefined) {
     throw new Error(

packages/core/src/useNavigationCache.tsx

@@ -43,7 +43,7 @@ export default function useNavigationCache<
   // Cache object which holds navigation objects for each screen
   // We use `React.useMemo` instead of `React.useRef` coz we want to invalidate it when deps change
   // In reality, these deps will rarely change, if ever
-  const parentNavigation = React.useContext(NavigationContext);
+  const { navigation: parentNavigation } = React.useContext(NavigationContext);
 
   const cache = React.useMemo(
     () => ({ current: {} as NavigationCache<State, ScreenOptions> }),

packages/core/src/useNavigationHelpers.tsx

@@ -37,7 +37,9 @@ export default function useNavigationHelpers<
   Action extends NavigationAction,
   EventMap extends { [key: string]: any }
 >({ onAction, getState, setState, emitter, router }: Options<State, Action>) {
-  const parentNavigationHelpers = React.useContext(NavigationContext);
+  const { navigation: parentNavigationHelpers } = React.useContext(
+    NavigationContext
+  );
   const { performTransaction } = React.useContext(NavigationStateContext);
 
   return React.useMemo(() => {

packages/core/src/useRoute.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import NavigationContext from './NavigationContext';
+import { ParamListBase, RouteProp } from './types';
+
+/**
+ * Hook to access the route prop of the parent screen anywhere.
+ *
+ * @returns Route prop of the parent screen.
+ */
+export default function useRoute<
+  T extends RouteProp<ParamListBase, string>
+>(): T {
+  const { route } = React.useContext(NavigationContext);
+
+  if (route === undefined) {
+    throw new Error(
+      "We couldn't find a route object. Is your component inside a navigator?"
+    );
+  }
+
+  return route as T;
+}

packages/drawer/CHANGELOG.md

@@ -3,6 +3,25 @@
 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.8](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/drawer@5.0.0-alpha.7...@react-navigation/drawer@5.0.0-alpha.8) (2019-08-31)
+
+**Note:** Version bump only for package @react-navigation/drawer
+
+
+
+
+
+# [5.0.0-alpha.7](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/drawer@5.0.0-alpha.6...@react-navigation/drawer@5.0.0-alpha.7) (2019-08-30)
+
+
+### Bug Fixes
+
+* rename contentContainerStyle to sceneContainerStyle for drawer ([fdc24d2](https://github.com/react-navigation/navigation-ex/commit/fdc24d2))
+
+
+
+
+
 # [5.0.0-alpha.6](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/drawer@5.0.0-alpha.5...@react-navigation/drawer@5.0.0-alpha.6) (2019-08-29)
 
 **Note:** Version bump only for package @react-navigation/drawer

packages/drawer/package.json

@@ -11,7 +11,7 @@
     "material",
     "drawer"
   ],
-  "version": "5.0.0-alpha.6",
+  "version": "5.0.0-alpha.8",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -34,7 +34,7 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/routers": "^5.0.0-alpha.6",
+    "@react-navigation/routers": "^5.0.0-alpha.7",
     "react-native-safe-area-view": "^0.14.6"
   },
   "devDependencies": {

packages/drawer/src/types.tsx

@@ -75,7 +75,7 @@ export type DrawerNavigationConfig = {
   lazy: boolean;
   /**
    * Whether a screen should be unmounted when navigating away from it.
-   * Defaults to `false`..
+   * Defaults to `false`.
    */
   unmountInactiveRoutes?: boolean;
   /**
@@ -87,7 +87,10 @@ export type DrawerNavigationConfig = {
    * Options for the content component which will be passed as props.
    */
   contentOptions?: object;
-  contentContainerStyle?: StyleProp<ViewStyle>;
+  /**
+   * Style object for the component wrapping the screen content.
+   */
+  sceneContainerStyle?: StyleProp<ViewStyle>;
   style?: StyleProp<ViewStyle>;
 };
 

packages/drawer/src/views/Drawer.tsx

@@ -88,7 +88,7 @@ type Props = {
   statusBarAnimation: 'slide' | 'none' | 'fade';
   overlayStyle?: StyleProp<ViewStyle>;
   drawerStyle?: StyleProp<ViewStyle>;
-  contentContainerStyle?: StyleProp<ViewStyle>;
+  sceneContainerStyle?: StyleProp<ViewStyle>;
   renderDrawerContent: Renderer;
   renderSceneContent: Renderer;
   gestureHandlerProps?: React.ComponentProps<typeof PanGestureHandler>;
@@ -484,7 +484,7 @@ export default class DrawerView extends React.PureComponent<Props> {
       drawerPosition,
       drawerType,
       swipeEdgeWidth,
-      contentContainerStyle,
+      sceneContainerStyle,
       drawerStyle,
       overlayStyle,
       onGestureRef,
@@ -534,7 +534,7 @@ export default class DrawerView extends React.PureComponent<Props> {
               {
                 transform: [{ translateX: contentTranslateX }],
               },
-              contentContainerStyle as any,
+              sceneContainerStyle as any,
             ]}
           >
             {renderSceneContent({ progress: this.progress })}

packages/drawer/src/views/DrawerView.tsx

@@ -190,7 +190,7 @@ export default class DrawerView extends React.PureComponent<Props, State> {
       drawerPosition,
       drawerBackgroundColor,
       overlayColor,
-      contentContainerStyle,
+      sceneContainerStyle,
       edgeWidth,
       minSwipeDistance,
       hideStatusBar,
@@ -222,7 +222,7 @@ export default class DrawerView extends React.PureComponent<Props, State> {
           gestureHandlerProps={gestureHandlerProps}
           drawerType={drawerType}
           drawerPosition={drawerPosition}
-          contentContainerStyle={contentContainerStyle}
+          sceneContainerStyle={sceneContainerStyle}
           drawerStyle={{
             backgroundColor: drawerBackgroundColor || 'white',
             width: this.state.drawerWidth,

packages/example/CHANGELOG.md

@@ -3,6 +3,33 @@
 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.6](https://github.com/satya164/navigation-ex/compare/@react-navigation/example@5.0.0-alpha.4...@react-navigation/example@5.0.0-alpha.6) (2019-08-31)
+
+**Note:** Version bump only for package @react-navigation/example
+
+
+
+
+
+# [5.0.0-alpha.5](https://github.com/satya164/navigation-ex/compare/@react-navigation/example@5.0.0-alpha.4...@react-navigation/example@5.0.0-alpha.5) (2019-08-31)
+
+**Note:** Version bump only for package @react-navigation/example
+
+
+
+
+
+# [5.0.0-alpha.4](https://github.com/satya164/navigation-ex/compare/@react-navigation/example@5.0.0-alpha.3...@react-navigation/example@5.0.0-alpha.4) (2019-08-31)
+
+
+### Bug Fixes
+
+* handle route names change when all routes are removed ([#86](https://github.com/satya164/navigation-ex/issues/86)) ([1b2983e](https://github.com/satya164/navigation-ex/commit/1b2983e))
+
+
+
+
+
 # [5.0.0-alpha.3](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/example@5.0.0-alpha.2...@react-navigation/example@5.0.0-alpha.3) (2019-08-29)
 
 

packages/example/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/example",
   "description": "Demo app to showcase various functionality of React Navigation",
-  "version": "5.0.0-alpha.3",
+  "version": "5.0.0-alpha.6",
   "private": true,
   "workspaces": {
     "nohoist": [

packages/example/src/Screens/AuthFlow.tsx

@@ -0,0 +1,128 @@
+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 {
+  createStackNavigator,
+  HeaderBackButton,
+  StackNavigationProp,
+} from '@react-navigation/stack';
+
+type AuthStackParams = {
+  splash: undefined;
+  home: undefined;
+  'sign-in': undefined;
+};
+
+const SplashScreen = () => (
+  <View style={styles.content}>
+    <ActivityIndicator />
+  </View>
+);
+
+const SignInScreen = ({
+  setUserToken,
+}: {
+  setUserToken: (token: string) => void;
+}) => {
+  return (
+    <View style={styles.content}>
+      <TextInput placeholder="Username" style={styles.input} />
+      <TextInput placeholder="Password" secureTextEntry style={styles.input} />
+      <Button
+        mode="contained"
+        onPress={() => setUserToken('token')}
+        style={styles.button}
+      >
+        Sign in
+      </Button>
+    </View>
+  );
+};
+
+const HomeScreen = ({
+  setUserToken,
+}: {
+  setUserToken: (token: undefined) => void;
+}) => {
+  return (
+    <View style={styles.content}>
+      <Title style={styles.text}>Signed in successfully 🎉</Title>
+      <Button onPress={() => setUserToken(undefined)} style={styles.button}>
+        Sign out
+      </Button>
+    </View>
+  );
+};
+
+const SimpleStack = createStackNavigator<AuthStackParams>();
+
+type Props = {
+  navigation: StackNavigationProp<ParamListBase>;
+};
+
+export default function SimpleStackScreen({ navigation }: Props) {
+  const [isLoading, setIsLoading] = React.useState(true);
+  const [userToken, setUserToken] = React.useState<string | undefined>(
+    undefined
+  );
+
+  React.useEffect(() => {
+    const timer = setTimeout(() => setIsLoading(false), 1000);
+
+    return () => clearTimeout(timer);
+  }, []);
+
+  navigation.setOptions({
+    header: null,
+  });
+
+  return (
+    <SimpleStack.Navigator
+      screenOptions={{
+        headerLeft: () => (
+          <HeaderBackButton onPress={() => navigation.goBack()} />
+        ),
+      }}
+    >
+      {isLoading ? (
+        <SimpleStack.Screen
+          name="splash"
+          component={SplashScreen}
+          options={{ title: `Auth Flow` }}
+        />
+      ) : userToken === undefined ? (
+        <SimpleStack.Screen name="sign-in" options={{ title: `Sign in` }}>
+          {() => <SignInScreen setUserToken={setUserToken} />}
+        </SimpleStack.Screen>
+      ) : (
+        <SimpleStack.Screen name="home" options={{ title: 'Home' }}>
+          {() => <HomeScreen setUserToken={setUserToken} />}
+        </SimpleStack.Screen>
+      )}
+    </SimpleStack.Navigator>
+  );
+}
+
+const styles = StyleSheet.create({
+  content: {
+    flex: 1,
+    padding: 16,
+    justifyContent: 'center',
+  },
+  input: {
+    margin: 8,
+    padding: 10,
+    backgroundColor: 'white',
+    borderRadius: 3,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: 'rgba(0, 0, 0, 0.08)',
+  },
+  button: {
+    margin: 8,
+  },
+  text: {
+    textAlign: 'center',
+    margin: 8,
+  },
+});

packages/example/src/index.tsx

@@ -8,7 +8,10 @@ import {
   getStateFromPath,
   NavigationContainerRef,
 } from '@react-navigation/core';
-import { useLinking, NativeContainer } from '@react-navigation/native';
+import {
+  useLinking,
+  NavigationNativeContainer,
+} from '@react-navigation/native';
 import {
   createDrawerNavigator,
   DrawerNavigationProp,
@@ -23,6 +26,7 @@ import SimpleStackScreen from './Screens/SimpleStack';
 import BottomTabsScreen from './Screens/BottomTabs';
 import MaterialTopTabsScreen from './Screens/MaterialTopTabs';
 import MaterialBottomTabs from './Screens/MaterialBottomTabs';
+import AuthFlow from './Screens/AuthFlow';
 
 YellowBox.ignoreWarnings(['Require cycle:', 'Warning: Async Storage']);
 
@@ -47,6 +51,10 @@ const SCREENS = {
     title: 'Material Bottom Tabs',
     component: MaterialBottomTabs,
   },
+  'auth-flow': {
+    title: 'Auth Flow',
+    component: AuthFlow,
+  },
 };
 
 const Drawer = createDrawerNavigator<RootDrawerParamList>();
@@ -113,7 +121,7 @@ export default function App() {
   }
 
   return (
-    <NativeContainer
+    <NavigationNativeContainer
       ref={containerRef}
       initialState={initialState}
       onStateChange={state =>
@@ -172,6 +180,6 @@ export default function App() {
           )}
         </Drawer.Screen>
       </Drawer.Navigator>
-    </NativeContainer>
+    </NavigationNativeContainer>
   );
 }

packages/material-bottom-tabs/CHANGELOG.md

@@ -3,6 +3,14 @@
 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.7](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/material-bottom-tabs@5.0.0-alpha.6...@react-navigation/material-bottom-tabs@5.0.0-alpha.7) (2019-08-31)
+
+**Note:** Version bump only for package @react-navigation/material-bottom-tabs
+
+
+
+
+
 # [5.0.0-alpha.6](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/material-bottom-tabs@5.0.0-alpha.5...@react-navigation/material-bottom-tabs@5.0.0-alpha.6) (2019-08-29)
 
 

packages/material-bottom-tabs/package.json

@@ -11,7 +11,7 @@
     "material",
     "tab"
   ],
-  "version": "5.0.0-alpha.6",
+  "version": "5.0.0-alpha.7",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -34,7 +34,7 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/routers": "^5.0.0-alpha.6"
+    "@react-navigation/routers": "^5.0.0-alpha.7"
   },
   "devDependencies": {
     "@react-native-community/bob": "^0.7.0",

packages/material-top-tabs/CHANGELOG.md

@@ -3,6 +3,14 @@
 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.7](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/material-top-tabs@5.0.0-alpha.6...@react-navigation/material-top-tabs@5.0.0-alpha.7) (2019-08-31)
+
+**Note:** Version bump only for package @react-navigation/material-top-tabs
+
+
+
+
+
 # [5.0.0-alpha.6](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/material-top-tabs@5.0.0-alpha.5...@react-navigation/material-top-tabs@5.0.0-alpha.6) (2019-08-29)
 
 

packages/material-top-tabs/package.json

@@ -11,7 +11,7 @@
     "material",
     "tab"
   ],
-  "version": "5.0.0-alpha.6",
+  "version": "5.0.0-alpha.7",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -34,7 +34,7 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/routers": "^5.0.0-alpha.6"
+    "@react-navigation/routers": "^5.0.0-alpha.7"
   },
   "devDependencies": {
     "@react-native-community/bob": "^0.7.0",

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

@@ -125,7 +125,7 @@ export type MaterialTopTabNavigationConfig = Partial<
    *
    * This view is usually only shown for a split second. Keep it lightweight.
    *
-   * By default, this renders null..
+   * By default, this renders null.
    */
   lazyPlaceholderComponent?: React.ComponentType<{ route: Route<string> }>;
   /**

packages/native/CHANGELOG.md

@@ -3,6 +3,22 @@
 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.7](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native@5.0.0-alpha.5...@react-navigation/native@5.0.0-alpha.7) (2019-08-31)
+
+**Note:** Version bump only for package @react-navigation/native
+
+
+
+
+
+# [5.0.0-alpha.6](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native@5.0.0-alpha.5...@react-navigation/native@5.0.0-alpha.6) (2019-08-31)
+
+**Note:** Version bump only for package @react-navigation/native
+
+
+
+
+
 # [5.0.0-alpha.5](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native@5.0.0-alpha.4...@react-navigation/native@5.0.0-alpha.5) (2019-08-29)
 
 

packages/native/package.json

@@ -7,7 +7,7 @@
     "ios",
     "android"
   ],
-  "version": "5.0.0-alpha.5",
+  "version": "5.0.0-alpha.7",
   "license": "MIT",
   "repository": {
     "type": "git",

packages/native/src/NavigationNativeContainer.tsx

@@ -16,14 +16,14 @@ import useBackButton from './useBackButton';
  * @param props.children Child elements to render the content.
  * @param props.ref Ref object which refers to the navigation object containing helper methods.
  */
-
-const NativeContainer = React.forwardRef(function NativeContainer(
+const NavigationNativeContainer = React.forwardRef(function NativeContainer(
   props: NavigationContainerProps,
   ref: React.Ref<NavigationContainerRef>
 ) {
   const refContainer = React.useRef<NavigationContainerRef>(null);
 
   useBackButton(refContainer);
+
   React.useImperativeHandle(ref, () => refContainer.current);
 
   return (
@@ -35,4 +35,4 @@ const NativeContainer = React.forwardRef(function NativeContainer(
   );
 });
 
-export default NativeContainer;
+export default NavigationNativeContainer;

packages/native/src/index.tsx

@@ -1,4 +1,7 @@
-export { default as NativeContainer } from './NativeContainer';
+export {
+  default as NavigationNativeContainer,
+} from './NavigationNativeContainer';
+
 export { default as useBackButton } from './useBackButton';
 export { default as useLinking } from './useLinking';
 export { default as useScrollToTop } from './useScrollToTop';

packages/routers/CHANGELOG.md

@@ -3,6 +3,17 @@
 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.7](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/routers@5.0.0-alpha.6...@react-navigation/routers@5.0.0-alpha.7) (2019-08-31)
+
+
+### Bug Fixes
+
+* handle route names change when all routes are removed ([#86](https://github.com/react-navigation/navigation-ex/issues/86)) ([1b2983e](https://github.com/react-navigation/navigation-ex/commit/1b2983e))
+
+
+
+
+
 # [5.0.0-alpha.6](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/routers@5.0.0-alpha.5...@react-navigation/routers@5.0.0-alpha.6) (2019-08-29)
 
 

packages/routers/__tests__/StackRouter.test.tsx

@@ -138,7 +138,7 @@ it('gets state on route names change', () => {
   expect(
     router.getStateForRouteNamesChange(
       {
-        index: 0,
+        index: 2,
         key: 'stack-test',
         routeNames: ['bar', 'baz', 'qux'],
         routes: [
@@ -157,7 +157,7 @@ it('gets state on route names change', () => {
       }
     )
   ).toEqual({
-    index: 0,
+    index: 1,
     key: 'stack-test',
     routeNames: ['qux', 'baz', 'foo', 'fiz'],
     routes: [
@@ -166,6 +166,64 @@ it('gets state on route names change', () => {
     ],
     stale: false,
   });
+
+  expect(
+    router.getStateForRouteNamesChange(
+      {
+        index: 1,
+        key: 'stack-test',
+        routeNames: ['foo', 'bar'],
+        routes: [
+          { key: 'foo-test', name: 'foo' },
+          { key: 'bar-test', name: 'bar' },
+        ],
+        stale: false,
+      },
+      {
+        routeNames: ['baz', 'qux'],
+        routeParamList: {
+          baz: { name: 'John' },
+        },
+      }
+    )
+  ).toEqual({
+    index: 0,
+    key: 'stack-test',
+    routeNames: ['baz', 'qux'],
+    routes: [{ key: 'baz-test', name: 'baz', params: { name: 'John' } }],
+    stale: false,
+  });
+});
+
+it('gets state on route names change with initialRouteName', () => {
+  const router = StackRouter({ initialRouteName: 'qux' });
+
+  expect(
+    router.getStateForRouteNamesChange(
+      {
+        index: 1,
+        key: 'stack-test',
+        routeNames: ['foo', 'bar'],
+        routes: [
+          { key: 'foo-test', name: 'foo' },
+          { key: 'bar-test', name: 'bar' },
+        ],
+        stale: false,
+      },
+      {
+        routeNames: ['baz', 'qux'],
+        routeParamList: {
+          baz: { name: 'John' },
+        },
+      }
+    )
+  ).toEqual({
+    index: 0,
+    key: 'stack-test',
+    routeNames: ['baz', 'qux'],
+    routes: [{ key: 'qux-test', name: 'qux' }],
+    stale: false,
+  });
 });
 
 it('handles navigate action', () => {

packages/routers/package.json

@@ -6,7 +6,7 @@
     "react-native",
     "react-navigation"
   ],
-  "version": "5.0.0-alpha.6",
+  "version": "5.0.0-alpha.7",
   "license": "MIT",
   "repository": {
     "type": "git",

packages/routers/src/StackRouter.tsx

@@ -114,11 +114,25 @@ export default function StackRouter(options: StackRouterOptions) {
       };
     },
 
-    getStateForRouteNamesChange(state, { routeNames }) {
+    getStateForRouteNamesChange(state, { routeNames, routeParamList }) {
       const routes = state.routes.filter(route =>
         routeNames.includes(route.name)
       );
 
+      if (routes.length === 0) {
+        const initialRouteName =
+          options.initialRouteName !== undefined &&
+          routeNames.includes(options.initialRouteName)
+            ? options.initialRouteName
+            : routeNames[0];
+
+        routes.push({
+          key: `${initialRouteName}-${shortid()}`,
+          name: initialRouteName,
+          params: routeParamList[initialRouteName],
+        });
+      }
+
       return {
         ...state,
         routeNames,

packages/stack/CHANGELOG.md

@@ -3,6 +3,26 @@
 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.10](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/stack@5.0.0-alpha.9...@react-navigation/stack@5.0.0-alpha.10) (2019-08-31)
+
+**Note:** Version bump only for package @react-navigation/stack
+
+
+
+
+
+# [5.0.0-alpha.9](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/stack@5.0.0-alpha.8...@react-navigation/stack@5.0.0-alpha.9) (2019-08-30)
+
+
+### Bug Fixes
+
+* change interpolated style when idle to avoid messing up reanimated ([3ad2e6e](https://github.com/react-navigation/navigation-ex/commit/3ad2e6e))
+* properly set animated node on gestureEnabled change ([6a8242c](https://github.com/react-navigation/navigation-ex/commit/6a8242c))
+
+
+
+
+
 # [5.0.0-alpha.8](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/stack@5.0.0-alpha.7...@react-navigation/stack@5.0.0-alpha.8) (2019-08-29)
 
 

packages/stack/package.json

@@ -10,7 +10,7 @@
     "android",
     "stack"
   ],
-  "version": "5.0.0-alpha.8",
+  "version": "5.0.0-alpha.10",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -33,7 +33,7 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/routers": "^5.0.0-alpha.6",
+    "@react-navigation/routers": "^5.0.0-alpha.7",
     "react-native-safe-area-view": "^0.14.6"
   },
   "devDependencies": {

packages/stack/src/TransitionConfigs/CardStyleInterpolators.tsx

@@ -9,15 +9,16 @@ const { cond, add, multiply, interpolate } = Animated;
  * Standard iOS-style slide in from the right.
  */
 export function forHorizontalIOS({
-  progress: { current, next },
+  current,
+  next,
   layouts: { screen },
 }: CardInterpolationProps): CardInterpolatedStyle {
-  const translateFocused = interpolate(current, {
+  const translateFocused = interpolate(current.progress, {
     inputRange: [0, 1],
     outputRange: [I18nManager.isRTL ? -screen.width : screen.width, 0],
   });
   const translateUnfocused = next
-    ? interpolate(next, {
+    ? interpolate(next.progress, {
         inputRange: [0, 1],
         outputRange: [
           0,
@@ -26,12 +27,12 @@ export function forHorizontalIOS({
       })
     : 0;
 
-  const overlayOpacity = interpolate(current, {
+  const overlayOpacity = interpolate(current.progress, {
     inputRange: [0, 1],
     outputRange: [0, 0.07],
   });
 
-  const shadowOpacity = interpolate(current, {
+  const shadowOpacity = interpolate(current.progress, {
     inputRange: [0, 1],
     outputRange: [0, 0.3],
   });
@@ -54,10 +55,10 @@ export function forHorizontalIOS({
  * Standard iOS-style slide in from the bottom (used for modals).
  */
 export function forVerticalIOS({
-  progress: { current },
+  current,
   layouts: { screen },
 }: CardInterpolationProps): CardInterpolatedStyle {
-  const translateY = interpolate(current, {
+  const translateY = interpolate(current.progress, {
     inputRange: [0, 1],
     outputRange: [screen.height, 0],
   });
@@ -77,14 +78,15 @@ export function forVerticalIOS({
  */
 export function forModalPresentationIOS({
   index,
-  progress: { current, next },
+  current,
+  next,
   layouts: { screen },
 }: CardInterpolationProps): CardInterpolatedStyle {
   const topOffset = 10;
   const statusBarHeight = getStatusBarHeight(screen.width > screen.height);
   const aspectRatio = screen.height / screen.width;
 
-  const progress = add(current, next ? next : 0);
+  const progress = add(current.progress, next ? next.progress : 0);
 
   const translateY = interpolate(progress, {
     inputRange: [0, 1, 2],
@@ -129,19 +131,19 @@ export function forModalPresentationIOS({
  * Standard Android-style fade in from the bottom for Android Oreo.
  */
 export function forFadeFromBottomAndroid({
-  progress: { current },
+  current,
   layouts: { screen },
   closing,
 }: CardInterpolationProps): CardInterpolatedStyle {
-  const translateY = interpolate(current, {
+  const translateY = interpolate(current.progress, {
     inputRange: [0, 1],
     outputRange: [multiply(screen.height, 0.08), 0],
   });
 
   const opacity = cond(
     closing,
-    current,
-    interpolate(current, {
+    current.progress,
+    interpolate(current.progress, {
       inputRange: [0, 0.5, 0.9, 1],
       outputRange: [0, 0.25, 0.7, 1],
     })
@@ -159,24 +161,25 @@ export function forFadeFromBottomAndroid({
  * Standard Android-style reveal from the bottom for Android Pie.
  */
 export function forRevealFromBottomAndroid({
-  progress: { current, next },
+  current,
+  next,
   layouts: { screen },
 }: CardInterpolationProps): CardInterpolatedStyle {
-  const containerTranslateY = interpolate(current, {
+  const containerTranslateY = interpolate(current.progress, {
     inputRange: [0, 1],
     outputRange: [screen.height, 0],
   });
-  const cardTranslateYFocused = interpolate(current, {
+  const cardTranslateYFocused = interpolate(current.progress, {
     inputRange: [0, 1],
     outputRange: [multiply(screen.height, 95.9 / 100, -1), 0],
   });
   const cardTranslateYUnfocused = next
-    ? interpolate(next, {
+    ? interpolate(next.progress, {
         inputRange: [0, 1],
         outputRange: [0, multiply(screen.height, 2 / 100, -1)],
       })
     : 0;
-  const overlayOpacity = interpolate(current, {
+  const overlayOpacity = interpolate(current.progress, {
     inputRange: [0, 0.36, 1],
     outputRange: [0, 0.1, 0.1],
   });

packages/stack/src/TransitionConfigs/HeaderStyleInterpolators.tsx

@@ -8,7 +8,8 @@ const { interpolate, add } = Animated;
  * Standard UIKit style animation for the header where the title fades into the back button label.
  */
 export function forUIKit({
-  progress: { current, next },
+  current,
+  next,
   layouts,
 }: HeaderInterpolationProps): HeaderInterpolatedStyle {
   const defaultOffset = 100;
@@ -30,7 +31,7 @@ export function forUIKit({
   // The back title also animates in from this position
   const rightOffset = layouts.screen.width / 4;
 
-  const progress = add(current, next ? next : 0);
+  const progress = add(current.progress, next ? next.progress : 0);
 
   return {
     leftButtonStyle: {
@@ -92,9 +93,10 @@ export function forUIKit({
  * Simple fade animation for the header elements.
  */
 export function forFade({
-  progress: { current, next },
+  current,
+  next,
 }: HeaderInterpolationProps): HeaderInterpolatedStyle {
-  const progress = add(current, next ? next : 0);
+  const progress = add(current.progress, next ? next.progress : 0);
   const opacity = interpolate(progress, {
     inputRange: [0, 1, 2],
     outputRange: [0, 1, 0],
@@ -112,10 +114,11 @@ export function forFade({
  * Simple translate animation to translate the header along with the sliding screen.
  */
 export function forStatic({
-  progress: { current, next },
+  current,
+  next,
   layouts: { screen },
 }: HeaderInterpolationProps): HeaderInterpolatedStyle {
-  const progress = add(current, next ? next : 0);
+  const progress = add(current.progress, next ? next.progress : 0);
   const translateX = interpolate(progress, {
     inputRange: [0, 1, 2],
     outputRange: I18nManager.isRTL

packages/stack/src/types.tsx

@@ -409,24 +409,29 @@ export type TransitionSpec =
   | { animation: 'timing'; config: TimingConfig };
 
 export type CardInterpolationProps = {
+  /**
+   * Values for the current screen.
+   */
+  current: {
+    /**
+     * Animated node representing the progress value of the current screen.
+     */
+    progress: Animated.Node<number>;
+  };
+  /**
+   * Values for the current screen the screen after this one in the stack.
+   * This can be `undefined` in case the screen animating is the last one.
+   */
+  next?: {
+    /**
+     * Animated node representing the progress value of the next screen.
+     */
+    progress: Animated.Node<number>;
+  };
   /**
    * The index of the card in the stack.
    */
   index: number;
-  /**
-   * Animated nodes representing the progress of the animation.
-   */
-  progress: {
-    /**
-     * Progress value of the current screen.
-     */
-    current: Animated.Node<number>;
-    /**
-     * Progress value for the screen after this one in the stack.
-     * This can be `undefined` in case the screen animating is the last one.
-     */
-    next?: Animated.Node<number>;
-  };
   /**
    * Animated node representing whether the card is closing.
    */
@@ -467,18 +472,23 @@ export type CardStyleInterpolator = (
 
 export type HeaderInterpolationProps = {
   /**
-   * Animated nodes representing the progress of the animation.
+   * Values for the current screen (the screen which owns this header).
    */
-  progress: {
+  current: {
     /**
-     * Progress value of the current screen (the screen which owns this header).
+     * Animated node representing the progress value of the current screen.
      */
-    current: Animated.Node<number>;
+    progress: Animated.Node<number>;
+  };
+  /**
+   * Values for the current screen the screen after this one in the stack.
+   * This can be `undefined` in case the screen animating is the last one.
+   */
+  next?: {
     /**
-     * Progress value for the screen after this one in the stack.
-     * This can be `undefined` in case the screen animating is the last one.
+     * Animated node representing the progress value of the next screen.
      */
-    next?: Animated.Node<number>;
+    progress: Animated.Node<number>;
   };
   /**
    * Layout measurements for various items we use for animation.

packages/stack/src/views/Header/HeaderSegment.tsx

@@ -121,10 +121,8 @@ export default class HeaderSegment extends React.Component<Props, State> {
       leftLabelLayout: Layout | undefined
     ) =>
       styleInterpolator({
-        progress: {
-          current,
-          next,
-        },
+        current: { progress: current },
+        next: next && { progress: next },
         layouts: {
           screen: layout,
           title: titleLayout,

packages/stack/src/views/Stack/Card.tsx

@@ -202,7 +202,11 @@ export default class Card extends React.Component<Props> {
     }
 
     if (closing !== prevProps.closing) {
-      this.isClosing.setValue(closing ? TRUE : FALSE);
+      // If the style updates during render, setting the value here doesn't work
+      // We need to defer it a bit so the animation starts properly
+      requestAnimationFrame(() =>
+        this.isClosing.setValue(closing ? TRUE : FALSE)
+      );
     }
   }
 
@@ -267,6 +271,17 @@ export default class Card extends React.Component<Props> {
     finished: new Value(FALSE),
   };
 
+  private handleTransitionEnd = () => {
+    this.isRunningAnimation = false;
+    this.interpolatedStyle = this.getInterpolatedStyle(
+      this.props.styleInterpolator,
+      this.props.index,
+      this.props.current,
+      this.props.next,
+      this.props.layout
+    );
+  };
+
   private runTransition = (isVisible: Binary | Animated.Node<number>) => {
     const { open: openingSpec, close: closingSpec } = this.props.transitionSpec;
 
@@ -331,7 +346,9 @@ export default class Card extends React.Component<Props> {
         call([this.isVisible], ([value]: ReadonlyArray<Binary>) => {
           const isOpen = Boolean(value);
           const { onOpen, onClose } = this.props;
-          this.isRunningAnimation = false;
+
+          this.handleTransitionEnd();
+
           if (isOpen) {
             onOpen(true);
           } else {
@@ -357,7 +374,7 @@ export default class Card extends React.Component<Props> {
       cond(neq(this.nextIsVisible, UNSET), [
         // Stop any running animations
         cond(clockRunning(this.clock), [
-          call([], () => (this.isRunningAnimation = false)),
+          call([], this.handleTransitionEnd),
           stopClock(this.clock),
         ]),
         set(this.gesture, 0),
@@ -500,10 +517,8 @@ export default class Card extends React.Component<Props> {
     ) =>
       styleInterpolator({
         index,
-        progress: {
-          current,
-          next,
-        },
+        current: { progress: current },
+        next: next && { progress: next },
         closing: this.isClosing,
         layouts: {
           screen: layout,
@@ -511,6 +526,18 @@ export default class Card extends React.Component<Props> {
       })
   );
 
+  // Keep track of the style in a property to avoid changing the animated node when deps change
+  // The style shouldn't change in the middle of the animation and should refer to what was there at the start of it
+  // Which will be the last value when just before the render which started the animation
+  // We need to make sure to update this when the running animation ends
+  private interpolatedStyle = this.getInterpolatedStyle(
+    this.props.styleInterpolator,
+    this.props.index,
+    this.props.current,
+    this.props.next,
+    this.props.layout
+  );
+
   private gestureActivationCriteria() {
     const { layout, gestureDirection, gestureResponseDistance } = this.props;
 
@@ -551,35 +578,39 @@ export default class Card extends React.Component<Props> {
 
   render() {
     const {
-      index,
       active,
       transparent,
-      layout,
+      styleInterpolator,
+      index,
       current,
       next,
+      layout,
       overlayEnabled,
       shadowEnabled,
       gestureEnabled,
       gestureDirection,
       children,
-      styleInterpolator,
       containerStyle: customContainerStyle,
       contentStyle,
       ...rest
     } = this.props;
 
+    if (!this.isRunningAnimation) {
+      this.interpolatedStyle = this.getInterpolatedStyle(
+        styleInterpolator,
+        index,
+        current,
+        next,
+        layout
+      );
+    }
+
     const {
       containerStyle,
       cardStyle,
       overlayStyle,
       shadowStyle,
-    } = this.getInterpolatedStyle(
-      styleInterpolator,
-      index,
-      current,
-      next,
-      layout
-    );
+    } = this.interpolatedStyle;
 
     const handleGestureEvent = gestureEnabled
       ? gestureDirection === 'vertical'
@@ -592,6 +623,7 @@ export default class Card extends React.Component<Props> {
         <View pointerEvents="box-none" {...rest}>
           <Animated.Code exec={this.exec} />
           <Animated.Code
+            key={gestureEnabled ? 'gesture-code' : 'no-gesture-code'}
             exec={gestureEnabled ? this.execWithGesture : this.execNoGesture}
           />
           {overlayEnabled && overlayStyle ? (

packages/stack/src/views/Stack/Stack.tsx

@@ -167,11 +167,14 @@ export default class Stack extends React.Component<Props, State> {
           : undefined;
         const next = nextRoute ? progress[nextRoute.key] : undefined;
 
+        const oldScene = state.scenes[index];
         const scene = {
           route,
           previous: previousRoute,
           descriptor:
-            props.descriptors[route.key] || state.descriptors[route.key],
+            props.descriptors[route.key] ||
+            state.descriptors[route.key] ||
+            (oldScene ? oldScene.descriptor : { options: {} }),
           progress: {
             current,
             next,
@@ -179,8 +182,6 @@ export default class Stack extends React.Component<Props, State> {
           },
         };
 
-        const oldScene = state.scenes[index];
-
         if (
           oldScene &&
           scene.route === oldScene.route &&