chore: publish

- @react-navigation/bottom-tabs@5.0.0-alpha.7
 - @react-navigation/drawer@5.0.0-alpha.8
 - @react-navigation/example@5.0.0-alpha.4
 - @react-navigation/material-bottom-tabs@5.0.0-alpha.7
 - @react-navigation/material-top-tabs@5.0.0-alpha.7
 - @react-navigation/routers@5.0.0-alpha.7
 - @react-navigation/stack@5.0.0-alpha.10

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/drawer/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.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)
 
 

packages/drawer/package.json

@@ -11,7 +11,7 @@
     "material",
     "drawer"
   ],
-  "version": "5.0.0-alpha.7",
+  "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/example/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.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.4",
   "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

@@ -23,6 +23,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 +48,10 @@ const SCREENS = {
     title: 'Material Bottom Tabs',
     component: MaterialBottomTabs,
   },
+  'auth-flow': {
+    title: 'Auth Flow',
+    component: AuthFlow,
+  },
 };
 
 const Drawer = createDrawerNavigator<RootDrawerParamList>();

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/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,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.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)
 
 

packages/stack/package.json

@@ -10,7 +10,7 @@
     "android",
     "stack"
   ],
-  "version": "5.0.0-alpha.9",
+  "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,
+    current.progress,
-    interpolate(current, {
+    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.
+     * Animated node representing the progress value of the next screen.
-     * This can be `undefined` in case the screen animating is the last one.
      */
-    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: { progress: current },
-          current,
+        next: next && { progress: next },
-          next,
-        },
         layouts: {
           screen: layout,
           title: titleLayout,

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

@@ -517,10 +517,8 @@ export default class Card extends React.Component<Props> {
     ) =>
       styleInterpolator({
         index,
-        progress: {
+        current: { progress: current },
-          current,
+        next: next && { progress: next },
-          next,
-        },
         closing: this.isClosing,
         layouts: {
           screen: layout,