chore: publish

- @react-navigation/bottom-tabs@5.0.0-alpha.20 - @react-navigation/compat@5.0.0-alpha.13 - @react-navigation/core@5.0.0-alpha.21 - @react-navigation/drawer@5.0.0-alpha.21 - @react-navigation/example@5.0.0-alpha.20 - @react-navigation/material-bottom-tabs@5.0.0-alpha.19 - @react-navigation/material-top-tabs@5.0.0-alpha.16 - @react-navigation/native-stack@5.0.0-alpha.11 - @react-navigation/native@5.0.0-alpha.15 - @react-navigation/routers@5.0.0-alpha.13 - @react-navigation/stack@5.0.0-alpha.35
fix: don't call getNode if ref is already scrollable (#162 )
2026-01-13 22:42:25 +08:00 · 2019-11-08 15:07:35 +01:00 · 2019-11-08 15:03:48 +01:00 · 2019-11-07 16:00:24 +01:00 · 2019-11-07 15:48:40 +01:00 · 2019-11-07 15:43:51 +01:00
51 changed files with 558 additions and 205 deletions
--- a/package.json
+++ b/package.json
@@ -38,7 +38,7 @@
    "jest": "^24.8.0",
    "lerna": "^3.16.4",
    "prettier": "^1.18.2",
-    "typescript": "^3.6.3"
+    "typescript": "^3.7.2"
  },
  "resolutions": {
    "react": "~16.8.3",
--- a/packages/bottom-tabs/CHANGELOG.md
+++ b/packages/bottom-tabs/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.20](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/bottom-tabs@5.0.0-alpha.19...@react-navigation/bottom-tabs@5.0.0-alpha.20) (2019-11-08)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
+# [5.0.0-alpha.19](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/bottom-tabs@5.0.0-alpha.18...@react-navigation/bottom-tabs@5.0.0-alpha.19) (2019-11-04)
+
+
+### Bug Fixes
+
+* fix default BottomTabBar button ([#161](https://github.com/react-navigation/navigation-ex/issues/161)) ([22cb675](https://github.com/react-navigation/navigation-ex/commit/22cb675))
+
+
+
+
+
+# [5.0.0-alpha.18](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/bottom-tabs@5.0.0-alpha.17...@react-navigation/bottom-tabs@5.0.0-alpha.18) (2019-11-04)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
 # [5.0.0-alpha.17](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/bottom-tabs@5.0.0-alpha.16...@react-navigation/bottom-tabs@5.0.0-alpha.17) (2019-10-30)


--- a/packages/bottom-tabs/package.json
+++ b/packages/bottom-tabs/package.json
@@ -10,7 +10,7 @@
    "android",
    "tab"
  ],
-  "version": "5.0.0-alpha.17",
+  "version": "5.0.0-alpha.20",
  "license": "MIT",
  "repository": {
    "type": "git",
@@ -33,7 +33,7 @@
    "clean": "del lib"
  },
  "dependencies": {
-    "@react-navigation/routers": "^5.0.0-alpha.11"
+    "@react-navigation/routers": "^5.0.0-alpha.13"
  },
  "devDependencies": {
    "@react-native-community/bob": "^0.7.0",
@@ -43,7 +43,7 @@
    "react": "~16.8.3",
    "react-native": "~0.59.10",
    "react-native-safe-area-context": "^0.3.6",
-    "typescript": "^3.6.3"
+    "typescript": "^3.7.2"
  },
  "peerDependencies": {
    "@react-navigation/core": "^5.0.0-alpha.0",
--- a/packages/bottom-tabs/src/types.tsx
+++ b/packages/bottom-tabs/src/types.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import {
+  TouchableWithoutFeedbackProps,
  AccessibilityRole,
  AccessibilityStates,
  StyleProp,
@@ -101,9 +102,10 @@ export type BottomTabNavigationOptions = {
  tabBarVisible?: boolean;

  /**
-   * Buttton component to render for the tab items instead of the default `TouchableWithoutFeedback`
+   * Function which returns a React element to render as the tab bar button.
+   * Renders `TouchableWithoutFeedback` by default.
   */
-  tabBarButtonComponent?: React.ComponentType<any>;
+  tabBarButton?: (props: BottomTabBarButtonProps) => React.ReactNode;
 };

 export type BottomTabDescriptor = Descriptor<
@@ -129,9 +131,9 @@ export type BottomTabNavigationConfig = {
   */
  unmountInactiveScreens?: boolean;
  /**
-   * Custom tab bar component.
+   * Function that returns a React element to display as the tab bar.
   */
-  tabBarComponent?: React.ComponentType<BottomTabBarProps>;
+  tabBar?: (props: BottomTabBarProps) => React.ReactNode;
  /**
   * Options for the tab bar which will be passed as props to the tab bar component.
   */
@@ -213,9 +215,6 @@ export type BottomTabBarProps = BottomTabBarOptions & {
    route: Route<string>;
    focused: boolean;
  }) => AccessibilityStates[];
-  getButtonComponent: (props: {
-    route: Route<string>;
-  }) => React.ComponentType<any> | undefined;
  getLabelText: (props: {
    route: Route<string>;
  }) =>
@@ -225,12 +224,17 @@ export type BottomTabBarProps = BottomTabBarOptions & {
      }) => React.ReactNode | undefined)
    | React.ReactNode;
  getTestID: (props: { route: Route<string> }) => string | undefined;
+  renderButton: (
+    props: { route: Route<string> } & BottomTabBarButtonProps
+  ) => React.ReactNode;
  renderIcon: (props: {
    route: Route<string>;
    focused: boolean;
    color: string;
    size: number;
  }) => React.ReactNode;
-  activeTintColor: string;
-  inactiveTintColor: string;
+};
+
+export type BottomTabBarButtonProps = TouchableWithoutFeedbackProps & {
+  children: React.ReactNode;
 };
--- a/packages/bottom-tabs/src/views/BottomTabBar.tsx
+++ b/packages/bottom-tabs/src/views/BottomTabBar.tsx
@@ -13,7 +13,6 @@ import { Route, NavigationContext } from '@react-navigation/core';
 import { SafeAreaConsumer } from 'react-native-safe-area-context';

 import TabBarIcon from './TabBarIcon';
-import TouchableWithoutFeedbackWrapper from './TouchableWithoutFeedbackWrapper';
 import { BottomTabBarProps } from '../types';

 type State = {
@@ -23,7 +22,10 @@ type State = {
  visible: Animated.Value;
 };

-type Props = BottomTabBarProps;
+type Props = BottomTabBarProps & {
+  activeTintColor: string;
+  inactiveTintColor: string;
+};

 const majorVersion = parseInt(Platform.Version as string, 10);
 const isIos = Platform.OS === 'ios';
@@ -262,7 +264,7 @@ export default class TabBarBottom extends React.Component<Props, State> {
      getAccessibilityLabel,
      getAccessibilityRole,
      getAccessibilityStates,
-      getButtonComponent,
+      renderButton,
      getTestID,
      style,
      tabStyle,
@@ -325,34 +327,34 @@ export default class TabBarBottom extends React.Component<Props, State> {
                  ? activeBackgroundColor
                  : inactiveBackgroundColor;

-                const ButtonComponent =
-                  getButtonComponent({ route }) ||
-                  TouchableWithoutFeedbackWrapper;
-
                return (
                  <NavigationContext.Provider
                    key={route.key}
                    value={descriptors[route.key].navigation}
                  >
-                    <ButtonComponent
-                      onPress={() => onTabPress({ route })}
-                      onLongPress={() => onTabLongPress({ route })}
-                      testID={testID}
-                      accessibilityLabel={accessibilityLabel}
-                      accessibilityRole={accessibilityRole}
-                      accessibilityStates={accessibilityStates}
-                      style={[
+                    {renderButton({
+                      route,
+                      onPress: () => onTabPress({ route }),
+                      onLongPress: () => onTabLongPress({ route }),
+                      testID,
+                      accessibilityLabel,
+                      accessibilityRole,
+                      accessibilityStates,
+                      style: [
                        styles.tab,
                        { backgroundColor },
                        this.shouldUseHorizontalLabels()
                          ? styles.tabLandscape
                          : styles.tabPortrait,
                        tabStyle,
-                      ]}
-                    >
-                      {this.renderIcon(scene)}
-                      {this.renderLabel(scene)}
-                    </ButtonComponent>
+                      ],
+                      children: (
+                        <React.Fragment>
+                          {this.renderIcon(scene)}
+                          {this.renderLabel(scene)}
+                        </React.Fragment>
+                      ),
+                    })}
                  </NavigationContext.Provider>
                );
              })}
--- a/packages/bottom-tabs/src/views/BottomTabView.tsx
+++ b/packages/bottom-tabs/src/views/BottomTabView.tsx
@@ -1,23 +1,27 @@
 import * as React from 'react';
 import {
  View,
+  TouchableWithoutFeedback,
  StyleSheet,
  AccessibilityRole,
  AccessibilityStates,
 } from 'react-native';
+
 import { Route, CommonActions } from '@react-navigation/core';
 import { TabNavigationState } from '@react-navigation/routers';
 // eslint-disable-next-line import/no-unresolved
 import { ScreenContainer } from 'react-native-screens';
 import { SafeAreaProvider } from 'react-native-safe-area-context';

+import ResourceSavingScene from './ResourceSavingScene';
 import BottomTabBar from './BottomTabBar';
 import {
  BottomTabNavigationConfig,
  BottomTabDescriptorMap,
  BottomTabNavigationHelpers,
+  BottomTabBarProps,
+  BottomTabBarButtonProps,
 } from '../types';
-import ResourceSavingScene from './ResourceSavingScene';

 type Props = BottomTabNavigationConfig & {
  state: TabNavigationState;
@@ -49,16 +53,25 @@ export default class BottomTabView extends React.Component<Props, State> {
    loaded: [this.props.state.index],
  };

-  private getButtonComponent = ({ route }: { route: Route<string> }) => {
+  private renderButton = ({
+    route,
+    children,
+    style,
+    ...rest
+  }: { route: Route<string> } & BottomTabBarButtonProps) => {
    const { descriptors } = this.props;
    const descriptor = descriptors[route.key];
    const options = descriptor.options;

-    if (options.tabBarButtonComponent) {
-      return options.tabBarButtonComponent;
+    if (options.tabBarButton) {
+      return options.tabBarButton({ children, style, ...rest });
    }

-    return undefined;
+    return (
+      <TouchableWithoutFeedback {...rest}>
+        <View style={style}>{children}</View>
+      </TouchableWithoutFeedback>
+    );
  };

  private renderIcon = ({
@@ -159,7 +172,7 @@ export default class BottomTabView extends React.Component<Props, State> {

  private renderTabBar = () => {
    const {
-      tabBarComponent: TabBarComponent = BottomTabBar,
+      tabBar = (props: BottomTabBarProps) => <BottomTabBar {...props} />,
      tabBarOptions,
      state,
      navigation,
@@ -174,23 +187,21 @@ export default class BottomTabView extends React.Component<Props, State> {
      return null;
    }

-    return (
-      <TabBarComponent
-        {...tabBarOptions}
-        state={state}
-        descriptors={descriptors}
-        navigation={navigation}
-        onTabPress={this.handleTabPress}
-        onTabLongPress={this.handleTabLongPress}
-        getLabelText={this.getLabelText}
-        getButtonComponent={this.getButtonComponent}
-        getAccessibilityLabel={this.getAccessibilityLabel}
-        getAccessibilityRole={this.getAccessibilityRole}
-        getAccessibilityStates={this.getAccessibilityStates}
-        getTestID={this.getTestID}
-        renderIcon={this.renderIcon}
-      />
-    );
+    return tabBar({
+      ...tabBarOptions,
+      state: state,
+      descriptors: descriptors,
+      navigation: navigation,
+      onTabPress: this.handleTabPress,
+      onTabLongPress: this.handleTabLongPress,
+      getLabelText: this.getLabelText,
+      getAccessibilityLabel: this.getAccessibilityLabel,
+      getAccessibilityRole: this.getAccessibilityRole,
+      getAccessibilityStates: this.getAccessibilityStates,
+      getTestID: this.getTestID,
+      renderButton: this.renderButton,
+      renderIcon: this.renderIcon,
+    });
  };

  render() {
--- a/packages/bottom-tabs/src/views/TouchableWithoutFeedbackWrapper.tsx
+++ b/packages/bottom-tabs/src/views/TouchableWithoutFeedbackWrapper.tsx
@@ -1,28 +0,0 @@
-import React from 'react';
-import { TouchableWithoutFeedback, View } from 'react-native';
-
-export default function TouchableWithoutFeedbackWrapper({
-  onPress,
-  onLongPress,
-  testID,
-  accessibilityLabel,
-  accessibilityRole,
-  accessibilityStates,
-  ...rest
-}: React.ComponentProps<typeof TouchableWithoutFeedback> & {
-  children: React.ReactNode;
-}) {
-  return (
-    <TouchableWithoutFeedback
-      onPress={onPress}
-      onLongPress={onLongPress}
-      testID={testID}
-      hitSlop={{ left: 15, right: 15, top: 0, bottom: 5 }}
-      accessibilityLabel={accessibilityLabel}
-      accessibilityRole={accessibilityRole}
-      accessibilityStates={accessibilityStates}
-    >
-      <View {...rest} />
-    </TouchableWithoutFeedback>
-  );
-}
--- a/packages/compat/CHANGELOG.md
+++ b/packages/compat/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.13](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/compat@5.0.0-alpha.12...@react-navigation/compat@5.0.0-alpha.13) (2019-11-08)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
+# [5.0.0-alpha.12](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/compat@5.0.0-alpha.11...@react-navigation/compat@5.0.0-alpha.12) (2019-11-04)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
 # [5.0.0-alpha.11](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/compat@5.0.0-alpha.10...@react-navigation/compat@5.0.0-alpha.11) (2019-10-30)


--- a/packages/compat/package.json
+++ b/packages/compat/package.json
@@ -1,7 +1,7 @@
 {
  "name": "@react-navigation/compat",
  "description": "Compatibility layer to write navigator definitions in static configuration format",
-  "version": "5.0.0-alpha.11",
+  "version": "5.0.0-alpha.13",
  "license": "MIT",
  "repository": {
    "type": "git",
@@ -24,12 +24,12 @@
    "clean": "del lib"
  },
  "dependencies": {
-    "@react-navigation/routers": "^5.0.0-alpha.11"
+    "@react-navigation/routers": "^5.0.0-alpha.13"
  },
  "devDependencies": {
    "@types/react": "^16.9.4",
    "react": "~16.8.3",
-    "typescript": "^3.6.3"
+    "typescript": "^3.7.2"
  },
  "peerDependencies": {
    "@react-navigation/core": "^5.0.0-alpha.0",
--- a/packages/core/CHANGELOG.md
+++ b/packages/core/CHANGELOG.md
@@ -3,6 +3,29 @@
 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.21](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/core@5.0.0-alpha.20...@react-navigation/core@5.0.0-alpha.21) (2019-11-08)
+
+
+### Bug Fixes
+
+* don't crash if initialState is null ([270fbdc](https://github.com/react-navigation/navigation-ex/commit/270fbdc))
+* fix types for resetRoot to accept undefined ([e871fdb](https://github.com/react-navigation/navigation-ex/commit/e871fdb))
+
+
+
+
+
+# [5.0.0-alpha.20](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/core@5.0.0-alpha.19...@react-navigation/core@5.0.0-alpha.20) (2019-11-02)
+
+
+### Bug Fixes
+
+* pass rehydrated state in onStateChange and devtools ([5a34764](https://github.com/react-navigation/navigation-ex/commit/5a34764))
+
+
+
+
+
 # [5.0.0-alpha.19](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/core@5.0.0-alpha.18...@react-navigation/core@5.0.0-alpha.19) (2019-10-30)


--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -6,7 +6,7 @@
    "react-native",
    "react-navigation"
  ],
-  "version": "5.0.0-alpha.19",
+  "version": "5.0.0-alpha.21",
  "license": "MIT",
  "repository": {
    "type": "git",
@@ -43,7 +43,7 @@
    "react": "~16.8.3",
    "react-native-testing-library": "^1.9.1",
    "react-test-renderer": "~16.8.3",
-    "typescript": "^3.6.3"
+    "typescript": "^3.7.2"
  },
  "peerDependencies": {
    "react": "~16.8.3"
--- a/packages/core/src/NavigationContainer.tsx
+++ b/packages/core/src/NavigationContainer.tsx
@@ -87,7 +87,7 @@ const Container = React.forwardRef(function NavigationContainer(
  ref: React.Ref<NavigationContainerRef>
 ) {
  const [state, setNavigationState] = React.useState<State>(() =>
-    getPartialState(initialState)
+    getPartialState(initialState == null ? undefined : initialState)
  );

  const navigationStateRef = React.useRef<State>();
@@ -130,16 +130,16 @@ const Container = React.forwardRef(function NavigationContainer(
  };

  const resetRoot = React.useCallback(
-    (state: PartialState<NavigationState> | NavigationState) => {
+    (state?: PartialState<NavigationState> | NavigationState) => {
      trackAction('@@RESET_ROOT');
      setNavigationState(state);
    },
    [trackAction]
  );

-  const getRootState = () => {
+  const getRootState = React.useCallback(() => {
    return getStateForRoute('root');
-  };
+  }, [getStateForRoute]);

  React.useImperativeHandle(ref, () => ({
    ...(Object.keys(CommonActions) as Array<keyof typeof CommonActions>).reduce<
@@ -220,18 +220,18 @@ const Container = React.forwardRef(function NavigationContainer(
    if (skipTrackingRef.current) {
      skipTrackingRef.current = false;
    } else {
-      trackState(state);
+      trackState(getRootState);
    }

    navigationStateRef.current = state;
    transactionStateRef.current = null;

    if (!isFirstMountRef.current && onStateChange) {
-      onStateChange(state);
+      onStateChange(getRootState());
    }

    isFirstMountRef.current = false;
-  }, [state, onStateChange, trackState]);
+  }, [state, onStateChange, trackState, getRootState]);

  return (
    <NavigationBuilderContext.Provider value={builderContext}>
--- a/packages/core/src/tests/NavigationContainer.test.tsx
+++ b/packages/core/src/tests/NavigationContainer.test.tsx
@@ -321,7 +321,28 @@ it('handle resetting state with ref', () => {
  });

  expect(onStateChange).toBeCalledTimes(1);
-  expect(onStateChange).lastCalledWith(state);
+  expect(onStateChange).lastCalledWith({
+    index: 1,
+    key: '5',
+    routeNames: ['foo', 'foo2', 'bar', 'baz'],
+    routes: [
+      {
+        key: 'baz',
+        name: 'baz',
+        state: {
+          index: 0,
+          key: '6',
+          routeNames: ['qux', 'lex'],
+          routes: [{ key: 'qux', name: 'qux' }, { key: 'lex', name: 'lex' }],
+          stale: false,
+          type: 'test',
+        },
+      },
+      { key: 'bar', name: 'bar' },
+    ],
+    stale: false,
+    type: 'test',
+  });
 });

 it('handle getRootState', () => {
--- a/packages/core/src/tests/index.test.tsx
+++ b/packages/core/src/tests/index.test.tsx
@@ -64,6 +64,27 @@ it('initializes state for a navigator on navigation', () => {
  });
 });

+it("doesn't crash when initialState is null", () => {
+  const TestNavigator = (props: any) => {
+    const { state, descriptors } = useNavigationBuilder(MockRouter, props);
+
+    return descriptors[state.routes[state.index].key].render();
+  };
+
+  const TestScreen = () => null;
+
+  const element = (
+    // @ts-ignore
+    <NavigationContainer initialState={null}>
+      <TestNavigator>
+        <Screen name="foo" component={TestScreen} />
+      </TestNavigator>
+    </NavigationContainer>
+  );
+
+  expect(() => render(element)).not.toThrowError();
+});
+
 it('rehydrates state for a navigator on navigation', () => {
  const TestNavigator = (props: any) => {
    const { state, descriptors } = useNavigationBuilder(MockRouter, props);
@@ -534,7 +555,19 @@ it('updates route params with setParams applied to parent', () => {
    key: '0',
    routeNames: ['foo', 'bar'],
    routes: [
-      { key: 'foo', name: 'foo', params: { username: 'alice' } },
+      {
+        key: 'foo',
+        name: 'foo',
+        params: { username: 'alice' },
+        state: {
+          index: 0,
+          key: '1',
+          routeNames: ['baz'],
+          routes: [{ key: 'baz', name: 'baz' }],
+          stale: false,
+          type: 'test',
+        },
+      },
      { key: 'bar', name: 'bar' },
    ],
    stale: false,
@@ -549,7 +582,19 @@ it('updates route params with setParams applied to parent', () => {
    key: '0',
    routeNames: ['foo', 'bar'],
    routes: [
-      { key: 'foo', name: 'foo', params: { username: 'alice', age: 25 } },
+      {
+        key: 'foo',
+        name: 'foo',
+        params: { username: 'alice', age: 25 },
+        state: {
+          index: 0,
+          key: '1',
+          routeNames: ['baz'],
+          routes: [{ key: 'baz', name: 'baz' }],
+          stale: false,
+          type: 'test',
+        },
+      },
      { key: 'bar', name: 'bar' },
    ],
    stale: false,
--- a/packages/core/src/types.tsx
+++ b/packages/core/src/types.tsx
@@ -338,7 +338,7 @@ type NavigationHelpersCommon<
   *
   * @param state Navigation state object.
   */
-  resetRoot(state: PartialState<NavigationState> | NavigationState): void;
+  resetRoot(state?: PartialState<NavigationState> | NavigationState): void;

  /**
   * Go back to the previous route in history.
@@ -549,7 +549,7 @@ export type NavigationContainerRef =
       *
       * @param state Navigation state object.
       */
-      resetRoot(state: PartialState<NavigationState> | NavigationState): void;
+      resetRoot(state?: PartialState<NavigationState> | NavigationState): void;
      getRootState(): NavigationState;
    }
  | undefined
--- a/packages/core/src/useDevTools.tsx
+++ b/packages/core/src/useDevTools.tsx
@@ -62,7 +62,7 @@ export default function useDevTools({ name, reset, state }: Options) {
  );

  const trackState = React.useCallback(
-    (state: State) => {
+    (getState: () => State) => {
      if (!devTools) {
        return;
      }
@@ -71,9 +71,11 @@ export default function useDevTools({ name, reset, state }: Options) {
        devTools.send(actions.current.shift(), lastStateRef.current);
      }

+      const state = getState();
+
      if (actions.current.length) {
        devTools.send(actions.current.pop(), state);
-      } else if (lastStateRef.current !== state) {
+      } else {
        devTools.send('@@UNKNOWN', state);
      }

--- a/packages/core/src/useOnGetState.tsx
+++ b/packages/core/src/useOnGetState.tsx
@@ -14,7 +14,7 @@ export default function useOnGetState({
  const route = React.useContext(NavigationRouteContext);
  const key = route ? route.key : 'root';

-  const getter = React.useCallback(() => {
+  const getRehydratedState = React.useCallback(() => {
    const state = getState();
    return {
      ...state,
@@ -26,6 +26,6 @@ export default function useOnGetState({
  }, [getState, getStateForRoute]);

  React.useEffect(() => {
-    return addStateGetter && addStateGetter(key, getter);
-  }, [addStateGetter, getter, key]);
+    return addStateGetter && addStateGetter(key, getRehydratedState);
+  }, [addStateGetter, getRehydratedState, key]);
 }
--- a/packages/core/src/useStateGetters.tsx
+++ b/packages/core/src/useStateGetters.tsx
@@ -9,7 +9,7 @@ export default function useStateGetters() {
  const stateGetters = React.useRef<Record<string, NavigatorStateGetter>>({});

  const getStateForRoute = React.useCallback(
-    routeKey =>
+    (routeKey: string) =>
      stateGetters.current[routeKey] === undefined
        ? undefined
        : stateGetters.current[routeKey](),
--- a/packages/drawer/CHANGELOG.md
+++ b/packages/drawer/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.21](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/drawer@5.0.0-alpha.20...@react-navigation/drawer@5.0.0-alpha.21) (2019-11-08)
+
+**Note:** Version bump only for package @react-navigation/drawer
+
+
+
+
+
+# [5.0.0-alpha.20](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/drawer@5.0.0-alpha.19...@react-navigation/drawer@5.0.0-alpha.20) (2019-11-04)
+
+**Note:** Version bump only for package @react-navigation/drawer
+
+
+
+
+
 # [5.0.0-alpha.19](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/drawer@5.0.0-alpha.18...@react-navigation/drawer@5.0.0-alpha.19) (2019-11-02)

 **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.19",
+  "version": "5.0.0-alpha.21",
  "license": "MIT",
  "repository": {
    "type": "git",
@@ -34,7 +34,7 @@
    "clean": "del lib"
  },
  "dependencies": {
-    "@react-navigation/routers": "^5.0.0-alpha.11"
+    "@react-navigation/routers": "^5.0.0-alpha.13"
  },
  "devDependencies": {
    "@react-native-community/bob": "^0.7.0",
@@ -47,7 +47,7 @@
    "react-native-reanimated": "^1.3.0",
    "react-native-safe-area-context": "^0.3.6",
    "react-native-screens": "^2.0.0-alpha.7",
-    "typescript": "^3.6.3"
+    "typescript": "^3.7.2"
  },
  "peerDependencies": {
    "@react-navigation/core": "^5.0.0-alpha.0",
--- a/packages/drawer/src/types.tsx
+++ b/packages/drawer/src/types.tsx
@@ -69,14 +69,14 @@ export type DrawerNavigationConfig<T = DrawerContentOptions> = {
   */
  unmountInactiveScreens?: boolean;
  /**
-   * Custom component used to render as the content of the drawer, for example, navigation items.
-   * Defaults to `DrawerItems`.
+   * Function that returns React element to render as the content of the drawer, for example, navigation items.
+   * Defaults to `DrawerContent`.
   */
-  contentComponent: React.ComponentType<DrawerContentComponentProps<T>>;
+  drawerContent: (props: DrawerContentComponentProps<T>) => React.ReactNode;
  /**
   * Options for the content component which will be passed as props.
   */
-  contentOptions?: T;
+  drawerContentOptions?: T;
  /**
   * Style object for the component wrapping the screen content.
   */
--- a/packages/drawer/src/views/DrawerView.tsx
+++ b/packages/drawer/src/views/DrawerView.tsx
@@ -23,6 +23,7 @@ import {
  DrawerDescriptorMap,
  DrawerNavigationConfig,
  DrawerNavigationHelpers,
+  DrawerContentComponentProps,
 } from '../types';

 type Props = Omit<DrawerNavigationConfig, 'overlayColor'> & {
@@ -64,7 +65,9 @@ const getDefaultDrawerWidth = ({
 export default class DrawerView extends React.PureComponent<Props, State> {
  static defaultProps = {
    lazy: true,
-    contentComponent: DrawerContent,
+    drawerContent: (props: DrawerContentComponentProps) => (
+      <DrawerContent {...props} />
+    ),
    drawerPosition: I18nManager.isRTL ? 'right' : 'left',
    keyboardDismissMode: 'on-drag',
    overlayColor: 'rgba(0, 0, 0, 0.5)',
@@ -135,20 +138,18 @@ export default class DrawerView extends React.PureComponent<Props, State> {
      navigation,
      descriptors,
      drawerPosition,
-      contentComponent: ContentComponent,
-      contentOptions,
+      drawerContent,
+      drawerContentOptions,
    } = this.props;

-    return (
-      <ContentComponent
-        progress={progress}
-        state={state}
-        navigation={navigation}
-        descriptors={descriptors}
-        drawerPosition={drawerPosition}
-        {...contentOptions}
-      />
-    );
+    return drawerContent({
+      ...drawerContentOptions,
+      progress: progress,
+      state: state,
+      navigation: navigation,
+      descriptors: descriptors,
+      drawerPosition: drawerPosition,
+    });
  };

  private renderContent = () => {
--- a/packages/example/CHANGELOG.md
+++ b/packages/example/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.20](https://github.com/satya164/navigation-ex/compare/@react-navigation/example@5.0.0-alpha.19...@react-navigation/example@5.0.0-alpha.20) (2019-11-08)
+
+**Note:** Version bump only for package @react-navigation/example
+
+
+
+
+
+# [5.0.0-alpha.19](https://github.com/satya164/navigation-ex/compare/@react-navigation/example@5.0.0-alpha.18...@react-navigation/example@5.0.0-alpha.19) (2019-11-04)
+
+**Note:** Version bump only for package @react-navigation/example
+
+
+
+
+
 # [5.0.0-alpha.18](https://github.com/satya164/navigation-ex/compare/@react-navigation/example@5.0.0-alpha.17...@react-navigation/example@5.0.0-alpha.18) (2019-11-02)


--- 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.18",
+  "version": "5.0.0-alpha.20",
  "private": true,
  "workspaces": {
    "nohoist": [
@@ -47,6 +47,6 @@
    "babel-preset-expo": "^7.0.0",
    "expo-cli": "^3.4.1",
    "jetifier": "^1.6.4",
-    "typescript": "^3.6.3"
+    "typescript": "^3.7.2"
  }
 }
--- a/packages/example/src/Screens/BottomTabs.tsx
+++ b/packages/example/src/Screens/BottomTabs.tsx
@@ -32,13 +32,16 @@ const BottomTabs = createBottomTabNavigator<BottomTabParams>();

 export default function BottomTabsScreen() {
  return (
-    <BottomTabs.Navigator>
+    <BottomTabs.Navigator
+      screenOptions={{
+        tabBarButton: props => <TouchableBounce {...props} />,
+      }}
+    >
      <BottomTabs.Screen
        name="article"
        options={{
          title: 'Article',
          tabBarIcon: getTabBarIcon('file-document-box'),
-          tabBarButtonComponent: TouchableBounce,
        }}
      >
        {props => <SimpleStackScreen {...props} headerMode="none" />}
@@ -49,7 +52,6 @@ export default function BottomTabsScreen() {
        options={{
          tabBarLabel: 'Chat',
          tabBarIcon: getTabBarIcon('message-reply'),
-          tabBarButtonComponent: TouchableBounce,
        }}
      />
      <BottomTabs.Screen
@@ -58,7 +60,6 @@ export default function BottomTabsScreen() {
        options={{
          title: 'Contacts',
          tabBarIcon: getTabBarIcon('contacts'),
-          tabBarButtonComponent: TouchableBounce,
        }}
      />
      <BottomTabs.Screen
@@ -67,7 +68,6 @@ export default function BottomTabsScreen() {
        options={{
          title: 'Albums',
          tabBarIcon: getTabBarIcon('image-album'),
-          tabBarButtonComponent: TouchableBounce,
        }}
      />
    </BottomTabs.Navigator>
--- a/packages/material-bottom-tabs/CHANGELOG.md
+++ b/packages/material-bottom-tabs/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.19](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/material-bottom-tabs@5.0.0-alpha.18...@react-navigation/material-bottom-tabs@5.0.0-alpha.19) (2019-11-08)
+
+**Note:** Version bump only for package @react-navigation/material-bottom-tabs
+
+
+
+
+
+# [5.0.0-alpha.18](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/material-bottom-tabs@5.0.0-alpha.17...@react-navigation/material-bottom-tabs@5.0.0-alpha.18) (2019-11-04)
+
+**Note:** Version bump only for package @react-navigation/material-bottom-tabs
+
+
+
+
+
 # [5.0.0-alpha.17](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/material-bottom-tabs@5.0.0-alpha.16...@react-navigation/material-bottom-tabs@5.0.0-alpha.17) (2019-10-30)

 **Note:** Version bump only for package @react-navigation/material-bottom-tabs
--- 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.17",
+  "version": "5.0.0-alpha.19",
  "license": "MIT",
  "repository": {
    "type": "git",
@@ -34,7 +34,7 @@
    "clean": "del lib"
  },
  "dependencies": {
-    "@react-navigation/routers": "^5.0.0-alpha.11"
+    "@react-navigation/routers": "^5.0.0-alpha.13"
  },
  "devDependencies": {
    "@react-native-community/bob": "^0.7.0",
@@ -46,7 +46,7 @@
    "react-native": "~0.59.10",
    "react-native-paper": "^3.1.1",
    "react-native-vector-icons": "^6.6.0",
-    "typescript": "^3.6.3"
+    "typescript": "^3.7.2"
  },
  "peerDependencies": {
    "@react-navigation/core": "^5.0.0-alpha.0",
--- a/packages/material-top-tabs/CHANGELOG.md
+++ b/packages/material-top-tabs/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.16](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/material-top-tabs@5.0.0-alpha.15...@react-navigation/material-top-tabs@5.0.0-alpha.16) (2019-11-08)
+
+**Note:** Version bump only for package @react-navigation/material-top-tabs
+
+
+
+
+
+# [5.0.0-alpha.15](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/material-top-tabs@5.0.0-alpha.14...@react-navigation/material-top-tabs@5.0.0-alpha.15) (2019-11-04)
+
+**Note:** Version bump only for package @react-navigation/material-top-tabs
+
+
+
+
+
 # [5.0.0-alpha.14](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/material-top-tabs@5.0.0-alpha.13...@react-navigation/material-top-tabs@5.0.0-alpha.14) (2019-10-30)

 **Note:** Version bump only for package @react-navigation/material-top-tabs
--- 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.14",
+  "version": "5.0.0-alpha.16",
  "license": "MIT",
  "repository": {
    "type": "git",
@@ -34,7 +34,7 @@
    "clean": "del lib"
  },
  "dependencies": {
-    "@react-navigation/routers": "^5.0.0-alpha.11"
+    "@react-navigation/routers": "^5.0.0-alpha.13"
  },
  "devDependencies": {
    "@react-native-community/bob": "^0.7.0",
@@ -46,7 +46,7 @@
    "react-native-gesture-handler": "^1.3.0",
    "react-native-reanimated": "^1.3.0",
    "react-native-tab-view": "^2.10.0",
-    "typescript": "^3.6.3"
+    "typescript": "^3.7.2"
  },
  "peerDependencies": {
    "@react-navigation/core": "^5.0.0-alpha.0",
--- a/packages/material-top-tabs/src/types.tsx
+++ b/packages/material-top-tabs/src/types.tsx
@@ -119,7 +119,7 @@ export type MaterialTopTabNavigationConfig = Partial<
  >
 > & {
  /**
-   * Component to render for routes that haven't been rendered yet.
+   * Function that returns a React element to render for routes that haven't been rendered yet.
   * Receives an object containing the route as the prop.
   * The lazy prop also needs to be enabled.
   *
@@ -127,11 +127,11 @@ export type MaterialTopTabNavigationConfig = Partial<
   *
   * By default, this renders null.
   */
-  lazyPlaceholderComponent?: React.ComponentType<{ route: Route<string> }>;
+  lazyPlaceholder?: (props: { route: Route<string> }) => React.ReactNode;
  /**
-   * Custom tab bar component.
+   * Function that returns a React element to display as the tab bar.
   */
-  tabBarComponent?: React.ComponentType<MaterialTopTabBarProps>;
+  tabBar?: (props: MaterialTopTabBarProps) => React.ReactNode;
  /**
   * Options for the tab bar which will be passed as props to the tab bar component.
   */
--- a/packages/material-top-tabs/src/views/MaterialTopTabView.tsx
+++ b/packages/material-top-tabs/src/views/MaterialTopTabView.tsx
@@ -8,6 +8,7 @@ import {
  MaterialTopTabDescriptorMap,
  MaterialTopTabNavigationConfig,
  MaterialTopTabNavigationHelpers,
+  MaterialTopTabBarProps,
 } from '../types';

 type Props = MaterialTopTabNavigationConfig & {
@@ -23,10 +24,10 @@ export default class MaterialTopTabView extends React.PureComponent<Props> {
  };

  private renderLazyPlaceholder = (props: { route: Route<string> }) => {
-    const { lazyPlaceholderComponent: LazyPlaceholder } = this.props;
+    const { lazyPlaceholder } = this.props;

-    if (LazyPlaceholder != null) {
-      return <LazyPlaceholder {...props} />;
+    if (lazyPlaceholder != null) {
+      return lazyPlaceholder(props);
    }

    return null;
@@ -99,30 +100,30 @@ export default class MaterialTopTabView extends React.PureComponent<Props> {

    const {
      navigation,
-      tabBarComponent: TabBarComponent = MaterialTopTabBar,
+      tabBar = (props: MaterialTopTabBarProps) => (
+        <MaterialTopTabBar {...props} />
+      ),
      tabBarPosition,
      tabBarOptions,
    } = this.props;

-    if (TabBarComponent === null || !tabBarVisible) {
+    if (tabBarVisible === false) {
      return null;
    }

-    return (
-      <TabBarComponent
-        {...tabBarOptions}
-        {...props}
-        tabBarPosition={tabBarPosition}
-        state={state}
-        navigation={navigation}
-        descriptors={descriptors}
-        getAccessibilityLabel={this.getAccessibilityLabel}
-        getLabelText={this.getLabelText}
-        getTestID={this.getTestID}
-        onTabPress={this.handleTabPress}
-        onTabLongPress={this.handleTabLongPress}
-      />
-    );
+    return tabBar({
+      ...tabBarOptions,
+      ...props,
+      tabBarPosition: tabBarPosition,
+      state: state,
+      navigation: navigation,
+      descriptors: descriptors,
+      getAccessibilityLabel: this.getAccessibilityLabel,
+      getLabelText: this.getLabelText,
+      getTestID: this.getTestID,
+      onTabPress: this.handleTabPress,
+      onTabLongPress: this.handleTabLongPress,
+    });
  };

  private handleSwipeStart = () =>
@@ -138,8 +139,8 @@ export default class MaterialTopTabView extends React.PureComponent<Props> {
  render() {
    const {
      /* eslint-disable @typescript-eslint/no-unused-vars */
-      lazyPlaceholderComponent,
-      tabBarComponent,
+      lazyPlaceholder,
+      tabBar,
      tabBarOptions,
      /* eslint-enable @typescript-eslint/no-unused-vars */
      state,
--- a/packages/native-stack/CHANGELOG.md
+++ b/packages/native-stack/CHANGELOG.md
@@ -3,6 +3,44 @@
 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.11](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native-stack@5.0.0-alpha.10...@react-navigation/native-stack@5.0.0-alpha.11) (2019-11-08)
+
+**Note:** Version bump only for package @react-navigation/native-stack
+
+
+
+
+
+# [5.0.0-alpha.10](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native-stack@5.0.0-alpha.9...@react-navigation/native-stack@5.0.0-alpha.10) (2019-11-04)
+
+
+### Bug Fixes
+
+* popToTop on tab press in native stack ([301c35e](https://github.com/react-navigation/navigation-ex/commit/301c35e))
+
+
+
+
+
+# [5.0.0-alpha.9](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native-stack@5.0.0-alpha.8...@react-navigation/native-stack@5.0.0-alpha.9) (2019-11-04)
+
+**Note:** Version bump only for package @react-navigation/native-stack
+
+
+
+
+
+# [5.0.0-alpha.8](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native-stack@5.0.0-alpha.7...@react-navigation/native-stack@5.0.0-alpha.8) (2019-11-02)
+
+
+### Features
+
+* add headerBackTitleVisible to navigation options in native stack ([77f29d3](https://github.com/react-navigation/navigation-ex/commit/77f29d3))
+
+
+
+
+
 # [5.0.0-alpha.7](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native-stack@5.0.0-alpha.6...@react-navigation/native-stack@5.0.0-alpha.7) (2019-11-02)


--- a/packages/native-stack/package.json
+++ b/packages/native-stack/package.json
@@ -6,7 +6,7 @@
    "react-native",
    "react-navigation"
  ],
-  "version": "5.0.0-alpha.7",
+  "version": "5.0.0-alpha.11",
  "license": "MIT",
  "repository": {
    "type": "git",
@@ -29,13 +29,13 @@
    "clean": "del lib"
  },
  "dependencies": {
-    "@react-navigation/routers": "^5.0.0-alpha.11"
+    "@react-navigation/routers": "^5.0.0-alpha.13"
  },
  "devDependencies": {
    "@react-native-community/bob": "^0.7.0",
    "del-cli": "^2.0.0",
    "react-native-screens": "^2.0.0-alpha.7",
-    "typescript": "^3.5.3"
+    "typescript": "^3.7.2"
  },
  "peerDependencies": {
    "@react-navigation/core": "^5.0.0-alpha.0",
--- a/packages/native-stack/src/navigators/createNativeStackNavigator.tsx
+++ b/packages/native-stack/src/navigators/createNativeStackNavigator.tsx
@@ -1,10 +1,15 @@
 import React from 'react';
-import { createNavigator, useNavigationBuilder } from '@react-navigation/core';
+import {
+  createNavigator,
+  useNavigationBuilder,
+  EventArg,
+} from '@react-navigation/core';

 import {
  StackRouter,
  StackNavigationState,
  StackRouterOptions,
+  StackActions,
 } from '@react-navigation/routers';

 import {
@@ -36,6 +41,28 @@ function NativeStackNavigator(props: NativeStackNavigatorProps) {
    screenOptions,
  });

+  React.useEffect(
+    () =>
+      navigation.addListener &&
+      navigation.addListener('tabPress', (e: EventArg<'tabPress'>) => {
+        const isFocused = navigation.isFocused();
+
+        // Run the operation in the next frame so we're sure all listeners have been run
+        // This is necessary to know if preventDefault() has been called
+        requestAnimationFrame(() => {
+          if (state.index > 0 && isFocused && !e.defaultPrevented) {
+            // When user taps on already focused tab and we're inside the tab,
+            // reset the stack to replicate native behaviour
+            navigation.dispatch({
+              ...StackActions.popToTop(),
+              target: state.key,
+            });
+          }
+        });
+      }),
+    [navigation, state.index, state.key]
+  );
+
  return (
    <StackView
      state={state}
--- a/packages/native-stack/src/types.tsx
+++ b/packages/native-stack/src/types.tsx
@@ -65,6 +65,13 @@ export type NativeStackNavigationOptions = {
   * @platform ios
   */
  headerBackTitle?: string;
+  /**
+   * Whether the back button title should be visible or not. Defaults to `true`.
+   * Only supported on iOS.
+   *
+   * @platform ios
+   */
+  headerBackTitleVisible?: boolean;
  /**
   * Whether to show the header.
   */
--- a/packages/native-stack/src/views/HeaderConfig.tsx
+++ b/packages/native-stack/src/views/HeaderConfig.tsx
@@ -20,6 +20,7 @@ export default function HeaderConfig(props: Props) {
    headerRight,
    headerTitle,
    headerBackTitle,
+    headerBackTitleVisible = true,
    headerHideBackButton,
    headerHideShadow,
    headerTintColor,
@@ -53,7 +54,7 @@ export default function HeaderConfig(props: Props) {
          ? headerTitleStyle.color
          : headerTintColor
      }
-      backTitle={headerBackTitle}
+      backTitle={headerBackTitleVisible ? headerBackTitle : ''}
      backTitleFontFamily={headerBackTitleStyle.fontFamily}
      backTitleFontSize={headerBackTitleStyle.fontSize}
      color={headerTintColor}
--- a/packages/native-stack/src/views/StackView.tsx
+++ b/packages/native-stack/src/views/StackView.tsx
@@ -5,7 +5,8 @@ import { StackNavigationState, StackActions } from '@react-navigation/routers';
 import {
  // @ts-ignore
  ScreenStack,
-  Screen,
+  Screen as ScreenComponent,
+  ScreenProps,
  // eslint-disable-next-line import/no-unresolved
 } from 'react-native-screens';
 import HeaderConfig from './HeaderConfig';
@@ -14,6 +15,14 @@ import {
  NativeStackDescriptorMap,
 } from '../types';

+const Screen = (ScreenComponent as unknown) as React.ComponentType<
+  ScreenProps & {
+    stackPresentation?: 'push' | 'modal' | 'transparentModal';
+    stackAnimation?: 'default' | 'fade' | 'none';
+    onDismissed?: () => void;
+  }
+>;
+
 type Props = {
  state: StackNavigationState;
  navigation: NativeStackNavigationHelpers;
@@ -28,7 +37,6 @@ export default function StackView({ state, navigation, descriptors }: Props) {
        const { presentation = 'push', animation, contentStyle } = options;

        return (
-          // @ts-ignore
          <Screen
            key={route.key}
            style={StyleSheet.absoluteFill}
--- a/packages/native/CHANGELOG.md
+++ b/packages/native/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.15](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native@5.0.0-alpha.14...@react-navigation/native@5.0.0-alpha.15) (2019-11-08)
+
+
+### Bug Fixes
+
+* don't call getNode if ref is already scrollable ([#162](https://github.com/react-navigation/navigation-ex/issues/162)) ([66551f2](https://github.com/react-navigation/navigation-ex/commit/66551f2))
+
+
+
+
+
 # [5.0.0-alpha.14](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native@5.0.0-alpha.13...@react-navigation/native@5.0.0-alpha.14) (2019-10-30)


--- a/packages/native/package.json
+++ b/packages/native/package.json
@@ -7,7 +7,7 @@
    "ios",
    "android"
  ],
-  "version": "5.0.0-alpha.14",
+  "version": "5.0.0-alpha.15",
  "license": "MIT",
  "repository": {
    "type": "git",
@@ -36,7 +36,7 @@
    "del-cli": "^3.0.0",
    "react": "~16.8.3",
    "react-native": "~0.59.10",
-    "typescript": "^3.6.3"
+    "typescript": "^3.7.2"
  },
  "peerDependencies": {
    "@react-navigation/core": "^5.0.0-alpha.0",
--- a/packages/native/src/useScrollToTop.tsx
+++ b/packages/native/src/useScrollToTop.tsx
@@ -19,13 +19,23 @@ function getScrollableNode(ref: React.RefObject<ScrollableWrapper>) {
    return null;
  }

-  if ('getScrollResponder' in ref.current) {
+  if (
+    'scrollToTop' in ref.current ||
+    'scrollTo' in ref.current ||
+    'scrollToOffset' in ref.current ||
+    'scrollResponderScrollTo' in ref.current
+  ) {
+    // This is already a scrollable node.
+    return ref.current;
+  } else if ('getScrollResponder' in ref.current) {
    // If the view is a wrapper like FlatList, SectionList etc.
    // We need to use `getScrollResponder` to get access to the scroll responder
    return ref.current.getScrollResponder();
  } else if ('getNode' in ref.current) {
    // When a `ScrollView` is wraped in `Animated.createAnimatedComponent`
-    // we need to use `getNode` to get the ref to the actual scrollview
+    // we need to use `getNode` to get the ref to the actual scrollview.
+    // Note that `getNode` is deprecated in newer versions of react-native
+    // this is why we check if we already have a scrollable node above.
    return ref.current.getNode();
  } else {
    return ref.current;
--- a/packages/routers/CHANGELOG.md
+++ b/packages/routers/CHANGELOG.md
@@ -3,6 +3,28 @@
 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.13](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/routers@5.0.0-alpha.12...@react-navigation/routers@5.0.0-alpha.13) (2019-11-08)
+
+
+### Bug Fixes
+
+* handle invalid initialRouteName gracefully ([b5d9ad9](https://github.com/react-navigation/navigation-ex/commit/b5d9ad9))
+
+
+
+
+
+# [5.0.0-alpha.12](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/routers@5.0.0-alpha.11...@react-navigation/routers@5.0.0-alpha.12) (2019-11-04)
+
+
+### Bug Fixes
+
+* close drawer on back button press ([3a4c38b](https://github.com/react-navigation/navigation-ex/commit/3a4c38b))
+
+
+
+
+
 # [5.0.0-alpha.11](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/routers@5.0.0-alpha.10...@react-navigation/routers@5.0.0-alpha.11) (2019-10-30)

 **Note:** Version bump only for package @react-navigation/routers
--- a/packages/routers/package.json
+++ b/packages/routers/package.json
@@ -6,7 +6,7 @@
    "react-native",
    "react-navigation"
  ],
-  "version": "5.0.0-alpha.11",
+  "version": "5.0.0-alpha.13",
  "license": "MIT",
  "repository": {
    "type": "git",
@@ -34,7 +34,7 @@
  "devDependencies": {
    "@react-native-community/bob": "^0.7.0",
    "del-cli": "^3.0.0",
-    "typescript": "^3.6.3"
+    "typescript": "^3.7.2"
  },
  "peerDependencies": {
    "@react-navigation/core": "^5.0.0-alpha.0"
--- a/packages/routers/src/DrawerRouter.tsx
+++ b/packages/routers/src/DrawerRouter.tsx
@@ -152,6 +152,16 @@ export default function DrawerRouter(
            action
          );

+        case 'GO_BACK':
+          if (state.isDrawerOpen) {
+            return {
+              ...state,
+              isDrawerOpen: false,
+            };
+          }
+
+          return router.getStateForAction(state, action);
+
        default:
          return router.getStateForAction(state, action);
      }
--- a/packages/routers/src/StackRouter.tsx
+++ b/packages/routers/src/StackRouter.tsx
@@ -56,7 +56,8 @@ export default function StackRouter(options: StackRouterOptions) {

    getInitialState({ routeNames, routeParamList }) {
      const initialRouteName =
-        options.initialRouteName !== undefined
+        options.initialRouteName !== undefined &&
+        routeNames.includes(options.initialRouteName)
          ? options.initialRouteName
          : routeNames[0];

--- a/packages/routers/src/TabRouter.tsx
+++ b/packages/routers/src/TabRouter.tsx
@@ -62,9 +62,9 @@ export default function TabRouter({

    getInitialState({ routeNames, routeParamList }) {
      const index =
-        initialRouteName === undefined
-          ? 0
-          : routeNames.indexOf(initialRouteName);
+        initialRouteName !== undefined && routeNames.includes(initialRouteName)
+          ? routeNames.indexOf(initialRouteName)
+          : 0;

      return {
        stale: false,
--- a/packages/stack/CHANGELOG.md
+++ b/packages/stack/CHANGELOG.md
@@ -3,6 +3,37 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+# [5.0.0-alpha.35](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/stack@5.0.0-alpha.34...@react-navigation/stack@5.0.0-alpha.35) (2019-11-08)
+
+**Note:** Version bump only for package @react-navigation/stack
+
+
+
+
+
+# [5.0.0-alpha.34](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/stack@5.0.0-alpha.33...@react-navigation/stack@5.0.0-alpha.34) (2019-11-04)
+
+
+### Features
+
+* support transform style for header ([#158](https://github.com/react-navigation/navigation-ex/issues/158)) ([a93a81e](https://github.com/react-navigation/navigation-ex/commit/a93a81e))
+
+
+
+
+
+# [5.0.0-alpha.33](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/stack@5.0.0-alpha.32...@react-navigation/stack@5.0.0-alpha.33) (2019-11-02)
+
+
+### Bug Fixes
+
+* add horizontal margin to centered title ([2ef5ad4](https://github.com/react-navigation/navigation-ex/commit/2ef5ad4))
+* remove unnecessary paddingHorizontal on stack header ([74ee216](https://github.com/react-navigation/navigation-ex/commit/74ee216))
+
+
+
+
+
 # [5.0.0-alpha.32](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/stack@5.0.0-alpha.31...@react-navigation/stack@5.0.0-alpha.32) (2019-11-02)


--- a/packages/stack/package.json
+++ b/packages/stack/package.json
@@ -10,7 +10,7 @@
    "android",
    "stack"
  ],
-  "version": "5.0.0-alpha.32",
+  "version": "5.0.0-alpha.35",
  "license": "MIT",
  "repository": {
    "type": "git",
@@ -33,7 +33,7 @@
    "clean": "del lib"
  },
  "dependencies": {
-    "@react-navigation/routers": "^5.0.0-alpha.11"
+    "@react-navigation/routers": "^5.0.0-alpha.13"
  },
  "devDependencies": {
    "@react-native-community/bob": "^0.7.0",
@@ -47,7 +47,7 @@
    "react-native-reanimated": "^1.3.0",
    "react-native-safe-area-context": "^0.3.6",
    "react-native-screens": "^2.0.0-alpha.7",
-    "typescript": "^3.6.3"
+    "typescript": "^3.7.2"
  },
  "peerDependencies": {
    "@react-native-community/masked-view": "^0.1.1",
--- a/packages/stack/src/types.tsx
+++ b/packages/stack/src/types.tsx
@@ -185,7 +185,9 @@ export type StackHeaderOptions = {
   * This is useful for using backgrounds such as an image or a gradient.
   * You can use this with `headerTransparent` to render a blur view, for example, to create a translucent header.
   */
-  headerBackground?: () => React.ReactNode;
+  headerBackground?: (props: {
+    style: StyleProp<ViewStyle>;
+  }) => React.ReactNode;
  /**
   * Style object for the header. You can specify a custom background color here, for example.
   */
@@ -249,7 +251,6 @@ export type StackNavigationOptions = StackHeaderOptions &
    title?: string;
    /**
     * Function that given `HeaderProps` returns a React Element to display as a header.
-     * Setting to `null` hides header.
     */
    header?: (props: StackHeaderProps) => React.ReactNode;
    /**
--- a/packages/stack/src/views/Header/HeaderSegment.tsx
+++ b/packages/stack/src/views/Header/HeaderSegment.tsx
@@ -21,11 +21,6 @@ import {
  Scene,
 } from '../../types';

-export type Scene<T> = {
-  route: T;
-  progress: Animated.Node<number>;
-};
-
 type Props = StackHeaderOptions & {
  headerTitle: (props: StackHeaderTitleProps) => React.ReactNode;
  layout: Layout;
@@ -222,6 +217,7 @@ export default class HeaderSegment extends React.Component<Props, State> {
      shadowOpacity,
      shadowRadius,
      opacity,
+      transform,
      ...unsafeStyles
    } = StyleSheet.flatten(customHeaderStyle || {}) as ViewStyle;

@@ -263,6 +259,7 @@ export default class HeaderSegment extends React.Component<Props, State> {
      shadowOpacity,
      shadowRadius,
      opacity,
+      transform,
    };

    // Setting a property to undefined triggers default style
@@ -301,14 +298,14 @@ export default class HeaderSegment extends React.Component<Props, State> {
          style={[StyleSheet.absoluteFill, backgroundStyle]}
        >
          {headerBackground ? (
-            headerBackground()
+            headerBackground({ style: safeStyles })
          ) : headerTransparent ? null : (
            <HeaderBackground style={safeStyles} />
          )}
        </Animated.View>
        <Animated.View
          pointerEvents="box-none"
-          style={[{ height, minHeight, maxHeight, opacity }]}
+          style={[{ height, minHeight, maxHeight, opacity, transform }]}
        >
          <View pointerEvents="none" style={{ height: insets.top }} />
          <View pointerEvents="box-none" style={styles.content}>
@@ -328,10 +325,9 @@ export default class HeaderSegment extends React.Component<Props, State> {
            <Animated.View
              pointerEvents="box-none"
              style={[
-                headerTitleAlign === 'left' && {
-                  position: 'absolute',
-                  left: leftButton ? 72 : 16,
-                },
+                headerTitleAlign === 'left'
+                  ? { position: 'absolute', left: leftButton ? 72 : 16 }
+                  : { marginHorizontal: 18 },
                titleStyle,
                titleContainerStyle,
              ]}
@@ -366,7 +362,6 @@ export default class HeaderSegment extends React.Component<Props, State> {
 const styles = StyleSheet.create({
  content: {
    flex: 1,
-    paddingHorizontal: 4,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
--- a/packages/stack/src/views/Header/HeaderTitle.tsx
+++ b/packages/stack/src/views/Header/HeaderTitle.tsx
@@ -7,7 +7,9 @@ type Props = TextProps & {
 };

 export default function HeaderTitle({ style, ...rest }: Props) {
-  return <Animated.Text {...rest} style={[styles.title, style]} />;
+  return (
+    <Animated.Text numberOfLines={1} {...rest} style={[styles.title, style]} />
+  );
 }

 const styles = StyleSheet.create({
--- a/yarn.lock
+++ b/yarn.lock
@@ -15424,10 +15424,10 @@ typedarray@^0.0.6:
  resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
  integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=

-typescript@^3.5.3, typescript@^3.6.3:
-  version "3.6.3"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.6.3.tgz#fea942fabb20f7e1ca7164ff626f1a9f3f70b4da"
-  integrity sha512-N7bceJL1CtRQ2RiG0AQME13ksR7DiuQh/QehubYcghzv20tnh+MQnQIuJddTmsbqYj+dztchykemz0zFzlvdQw==
+typescript@^3.7.2:
+  version "3.7.2"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.7.2.tgz#27e489b95fa5909445e9fef5ee48d81697ad18fb"
+  integrity sha512-ml7V7JfiN2Xwvcer+XAf2csGO1bPBdRbFCkYBczNZggrBZ9c7G3riSUeJmqEU5uOtXNPMhE3n+R4FA/3YOAWOQ==

 ua-parser-js@^0.7.18, ua-parser-js@^0.7.19:
  version "0.7.20"
Author	SHA1	Message	Date
Satyajit Sahoo	f494f992fa	chore: publish - @react-navigation/bottom-tabs@5.0.0-alpha.20 - @react-navigation/compat@5.0.0-alpha.13 - @react-navigation/core@5.0.0-alpha.21 - @react-navigation/drawer@5.0.0-alpha.21 - @react-navigation/example@5.0.0-alpha.20 - @react-navigation/material-bottom-tabs@5.0.0-alpha.19 - @react-navigation/material-top-tabs@5.0.0-alpha.16 - @react-navigation/native-stack@5.0.0-alpha.11 - @react-navigation/native@5.0.0-alpha.15 - @react-navigation/routers@5.0.0-alpha.13 - @react-navigation/stack@5.0.0-alpha.35	2019-11-08 15:07:35 +01:00
Janic Duplessis	66551f29d4	fix: don't call getNode if ref is already scrollable (#162 ) `66e72bb4e0` deprecates `getNode` since Animated components now use `React.forwardRef`. To avoid triggering the warning I added a check to see if the node is already a scrollable node before trying to call the various method to get the scrollable node. This avoids calling getNode in newer RN versions.	2019-11-08 15:03:48 +01:00
Satyajit Sahoo	270fbdcfaf	fix: don't crash if initialState is null	2019-11-07 16:00:24 +01:00
Satyajit Sahoo	e871fdb074	fix: fix types for resetRoot to accept undefined	2019-11-07 15:48:40 +01:00
Satyajit Sahoo	b5d9ad900d	fix: handle invalid initialRouteName gracefully	2019-11-07 15:43:51 +01:00
Satyajit Sahoo	6aebeec90c	chore: upgrade to typescript 3.7	2019-11-06 21:01:18 +01:00
satyajit.happy	75ed888b33	chore: publish - @react-navigation/bottom-tabs@5.0.0-alpha.19 - @react-navigation/native-stack@5.0.0-alpha.10	2019-11-04 17:21:32 +01:00
satyajit.happy	ee82ab1d1b	refactor: remove TouchableWithoutFeedbackWrapper	2019-11-04 17:20:36 +01:00
satyajit.happy	301c35ec32	fix: popToTop on tab press in native stack	2019-11-04 17:09:42 +01:00
Oliver Winter	22cb675608	fix: fix default BottomTabBar button (#161 )	2019-11-04 17:05:05 +01:00
satyajit.happy	c41c824aae	chore: publish - @react-navigation/bottom-tabs@5.0.0-alpha.18 - @react-navigation/compat@5.0.0-alpha.12 - @react-navigation/drawer@5.0.0-alpha.20 - @react-navigation/example@5.0.0-alpha.19 - @react-navigation/material-bottom-tabs@5.0.0-alpha.18 - @react-navigation/material-top-tabs@5.0.0-alpha.15 - @react-navigation/native-stack@5.0.0-alpha.9 - @react-navigation/routers@5.0.0-alpha.12 - @react-navigation/stack@5.0.0-alpha.34	2019-11-04 07:52:29 +01:00
Freddy Harris	a93a81e5d3	feat: support transform style for header (#158 )	2019-11-04 07:50:02 +01:00
satyajit.happy	57b411cea8	refactor: replace XComponent props in favor of render callbacks Making these props components makes it impossible pass additional props to them from the parent component. Render callbacks are more dynamic and flexible for this case	2019-11-04 07:47:41 +01:00
satyajit.happy	3a4c38bb72	fix: close drawer on back button press	2019-11-02 08:52:12 +01:00
satyajit.happy	e6a06ac56e	chore: publish - @react-navigation/core@5.0.0-alpha.20 - @react-navigation/native-stack@5.0.0-alpha.8 - @react-navigation/stack@5.0.0-alpha.33	2019-11-02 05:12:02 +01:00
satyajit.happy	2ef5ad4cc2	fix: add horizontal margin to centered title	2019-11-02 05:08:10 +01:00
freddy	74ee216ed4	fix: remove unnecessary paddingHorizontal on stack header	2019-11-02 04:54:07 +01:00
Tien Pham	77f29d374f	feat: add headerBackTitleVisible to navigation options in native stack	2019-11-02 04:53:23 +01:00
satyajit.happy	5a34764404	fix: pass rehydrated state in onStateChange and devtools	2019-11-02 04:43:47 +01:00