chore: publish

- @react-navigation/bottom-tabs@5.0.0-alpha.19 - @react-navigation/native-stack@5.0.0-alpha.10
refactor: remove TouchableWithoutFeedbackWrapper
2026-02-17 22:36:21 +08:00 · 2019-11-04 17:21:32 +01:00 · 2019-11-04 17:20:36 +01:00 · 2019-11-04 17:09:42 +01:00 · 2019-11-04 17:05:05 +01:00 · 2019-11-04 07:52:29 +01:00
31 changed files with 280 additions and 149 deletions
--- a/packages/bottom-tabs/CHANGELOG.md
+++ b/packages/bottom-tabs/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.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.19",
  "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.12"
  },
  "devDependencies": {
    "@react-native-community/bob": "^0.7.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,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.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.12",
  "license": "MIT",
  "repository": {
    "type": "git",
@@ -24,7 +24,7 @@
    "clean": "del lib"
  },
  "dependencies": {
-    "@react-navigation/routers": "^5.0.0-alpha.11"
+    "@react-navigation/routers": "^5.0.0-alpha.12"
  },
  "devDependencies": {
    "@types/react": "^16.9.4",
--- a/packages/drawer/CHANGELOG.md
+++ b/packages/drawer/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+# [5.0.0-alpha.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.20",
  "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.12"
  },
  "devDependencies": {
    "@react-native-community/bob": "^0.7.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,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.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.19",
  "private": true,
  "workspaces": {
    "nohoist": [
--- 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,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.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.18",
  "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.12"
  },
  "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.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.15",
  "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.12"
  },
  "devDependencies": {
    "@react-native-community/bob": "^0.7.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,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.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)


--- 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.8",
+  "version": "5.0.0-alpha.10",
  "license": "MIT",
  "repository": {
    "type": "git",
@@ -29,7 +29,7 @@
    "clean": "del lib"
  },
  "dependencies": {
-    "@react-navigation/routers": "^5.0.0-alpha.11"
+    "@react-navigation/routers": "^5.0.0-alpha.12"
  },
  "devDependencies": {
    "@react-native-community/bob": "^0.7.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/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.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.12",
  "license": "MIT",
  "repository": {
    "type": "git",
--- 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/stack/CHANGELOG.md
+++ b/packages/stack/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.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)


--- a/packages/stack/package.json
+++ b/packages/stack/package.json
@@ -10,7 +10,7 @@
    "android",
    "stack"
  ],
-  "version": "5.0.0-alpha.33",
+  "version": "5.0.0-alpha.34",
  "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.12"
  },
  "devDependencies": {
    "@react-native-community/bob": "^0.7.0",
--- 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
@@ -222,6 +222,7 @@ export default class HeaderSegment extends React.Component<Props, State> {
      shadowOpacity,
      shadowRadius,
      opacity,
+      transform,
      ...unsafeStyles
    } = StyleSheet.flatten(customHeaderStyle || {}) as ViewStyle;

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

    // Setting a property to undefined triggers default style
@@ -301,14 +303,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}>
Author	SHA1	Message	Date
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