chore: publish

- @react-navigation/bottom-tabs@5.0.0-alpha.19
 - @react-navigation/native-stack@5.0.0-alpha.10

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)
 
 

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",

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;
 };

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>
                 );
               })}

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() {

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>
-  );
-}

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)
 
 

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",

packages/core/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.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)
 
 

packages/core/package.json

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

packages/core/src/NavigationContainer.tsx

@@ -137,9 +137,9 @@ const Container = React.forwardRef(function NavigationContainer(
     [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}>

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', () => {

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

@@ -534,7 +534,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 +561,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,

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);
       }
 

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]);
 }

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](),

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

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",

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.
    */

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 = () => {

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)
 
 

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": [

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>

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

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",

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

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",

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.
    */

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,

packages/native-stack/CHANGELOG.md

@@ -3,6 +3,36 @@
 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)
+
+
+### 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)
 
 

packages/native-stack/package.json

@@ -6,7 +6,7 @@
     "react-native",
     "react-navigation"
   ],
-  "version": "5.0.0-alpha.7",
+  "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",

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}

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.
    */

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}

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

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",

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);
       }

packages/stack/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.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)
 
 

packages/stack/package.json

@@ -10,7 +10,7 @@
     "android",
     "stack"
   ],
-  "version": "5.0.0-alpha.32",
+  "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",

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;
     /**

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}>
@@ -328,10 +330,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 +367,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',

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({