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
refactor: change signature of interpolation props
2026-01-13 22:42:25 +08:00 · 2019-08-31 10:22:57 +02:00 · 2019-08-31 10:21:36 +02:00 · 2019-08-30 19:15:54 +01:00 · 2019-08-30 15:34:34 +02:00 · 2019-08-30 15:30:18 +02:00
31 changed files with 441 additions and 93 deletions
--- a/packages/bottom-tabs/CHANGELOG.md
+++ b/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)


--- a/packages/bottom-tabs/package.json
+++ b/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": {
--- a/packages/core/CHANGELOG.md
+++ b/packages/core/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.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)


--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -6,7 +6,7 @@
    "react-native",
    "react-navigation"
  ],
-  "version": "5.0.0-alpha.4",
+  "version": "5.0.0-alpha.5",
  "license": "MIT",
  "repository": {
    "type": "git",
--- a/packages/core/src/tests/CommonActions.test.tsx
+++ b/packages/core/src/tests/CommonActions.test.tsx
--- a/packages/drawer/CHANGELOG.md
+++ b/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
--- a/packages/drawer/package.json
+++ b/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": {
--- a/packages/drawer/src/types.tsx
+++ b/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>;
 };

--- a/packages/drawer/src/views/Drawer.tsx
+++ b/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 })}
--- a/packages/drawer/src/views/DrawerView.tsx
+++ b/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,
--- a/packages/example/CHANGELOG.md
+++ b/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)


--- a/packages/example/package.json
+++ b/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": [
--- a/packages/example/src/Screens/AuthFlow.tsx
+++ b/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,
+  },
+});
--- a/packages/example/src/index.tsx
+++ b/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>();
--- a/packages/material-bottom-tabs/CHANGELOG.md
+++ b/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)


--- a/packages/material-bottom-tabs/package.json
+++ b/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",
--- a/packages/material-top-tabs/CHANGELOG.md
+++ b/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)


--- a/packages/material-top-tabs/package.json
+++ b/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",
--- a/packages/material-top-tabs/src/types.tsx
+++ b/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> }>;
  /**
--- a/packages/routers/CHANGELOG.md
+++ b/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)


--- a/packages/routers/tests/StackRouter.test.tsx
+++ b/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', () => {
--- a/packages/routers/package.json
+++ b/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",
--- a/packages/routers/src/StackRouter.tsx
+++ b/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,
--- a/packages/stack/CHANGELOG.md
+++ b/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)


--- a/packages/stack/package.json
+++ b/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": {
--- a/packages/stack/src/TransitionConfigs/CardStyleInterpolators.tsx
+++ b/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],
  });
--- a/packages/stack/src/TransitionConfigs/HeaderStyleInterpolators.tsx
+++ b/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
--- a/packages/stack/src/types.tsx
+++ b/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.
--- a/packages/stack/src/views/Header/HeaderSegment.tsx
+++ b/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,
--- a/packages/stack/src/views/Stack/Card.tsx
+++ b/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 ? (
--- a/packages/stack/src/views/Stack/Stack.tsx
+++ b/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 &&
Author	SHA1	Message	Date
satyajit.happy	4e0ebb05f9	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	2019-08-31 10:22:57 +02:00
satyajit.happy	bf0b408238	refactor: change signature of interpolation props	2019-08-31 10:21:36 +02:00
Satyajit Sahoo	1b2983eaa9	fix: handle route names change when all routes are removed (#86 )	2019-08-30 19:15:54 +01:00
satyajit.happy	b38ee1c162	chore: publish - @react-navigation/core@5.0.0-alpha.5 - @react-navigation/drawer@5.0.0-alpha.7 - @react-navigation/stack@5.0.0-alpha.9	2019-08-30 15:34:34 +02:00
satyajit.happy	fdc24d2523	fix: rename contentContainerStyle to sceneContainerStyle for drawer	2019-08-30 15:30:18 +02:00
satyajit.happy	6a8242c31a	fix: properly set animated node on gestureEnabled change	2019-08-29 19:55:42 +02:00
satyajit.happy	3ad2e6ebcf	fix: change interpolated style when idle to avoid messing up reanimated	2019-08-29 16:12:22 +02:00
satyajit.happy	5c8d183d68	chore: rename BaseActions -> CommonActions	2019-08-29 13:10:36 +02:00