Release 3.7.0

1. `TabBarTop` is `MaterialTopTabBar` now
2. `MaterialTopTabBar` does not have a `getButtonComponent` prop (accidentally added in #5648)
3. `BottomTabBar`'s `getButtonComponent` prop is a `React.Component`, not a `React.Node`

.babelrc

@@ -1,3 +0,0 @@
-{
-  "presets": ["react-native"]
-}

CHANGELOG.md

@@ -7,9 +7,57 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+## [3.7.0] - [2019-04-10](https://github.com/react-navigation/react-navigation/releases/tag/3.7.0)
+
+## Fixes
+
+- Update Flow types (#5800 and #5801)
+- More open `navigationOptions` types for bottom tab navigator config (#5796)
+- Fix hit slop for bottom tab bar (react-navigation-tabs#110)
+
+## Added
+
+- Add accessibility role and state to bottom bar (react-navigation-tabs#90)
+- Hide tab bar when keyboard is shown (react-navigation-tabs#112)
+- Specify default values for getAccessibilityX on tabs (react-navigation-tabs##116)
+- Add a isFirstRouteInParent method to navigation object (react-navigation-core#51)
+
+## [3.6.1] - [2019-04-02](https://github.com/react-navigation/react-navigation/releases/tag/3.6.1)
+
+## Fixed
+
+- Move event subscriptions to constructor in `withNavigationFocus` to ensure initial `didFocus` event is received.
+
+## [3.6.0] - [2019-03-31](https://github.com/react-navigation/react-navigation/releases/tag/3.6.0)
+
+## Added
+
+- Export TabBarIconProps, TabBarLabelProps, DrawerIconProps, DrawerLabelProps, ScreenProps and InitialLayout.
+- Add `disabled` prop to HeaderBackButton
+- Add `StackViewTransitionConfigs.NoAnimation`
+- Add `drawerContainerStyle` to navigator config for drawer navigator
+
+## [3.5.1] - [2019-03-19](https://github.com/react-navigation/react-navigation/releases/tag/3.5.1)
+
+## Added
+
+- Export StackGestureContext and DrawerGestureContext
+- Add missing type for withOrientation
+
+## Fixed
+
+- Fix header HeaderBackButton title TypeScript type
+
+## [3.5.0] - [2019-03-19](https://github.com/react-navigation/react-navigation/releases/tag/3.5.0)
+
+## Fixed
+
+- Fixed types for `BottomTabBar`
+- export `NavigationContext` type
+
 ## Changed
 
-- Updated react-native-gesture-handler to ~3.1.0
+- Make 'react-native-gesture-handler' a peer dependency rather than a hard dependency
 
 ## [3.4.1] - [2019-03-16](https://github.com/react-navigation/react-navigation/releases/tag/3.4.1)
 
@@ -182,7 +230,12 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 - [2.x](https://github.com/react-navigation/react-navigation/blob/2.x/CHANGELOG.md)
 
-[Unreleased]: https://github.com/react-navigation/react-navigation/compare/3.4.1...HEAD
+[Unreleased]: https://github.com/react-navigation/react-navigation/compare/3.7.0...HEAD
+[3.7.0]: https://github.com/react-navigation/react-navigation/compare/3.6.1...3.7.0
+[3.6.1]: https://github.com/react-navigation/react-navigation/compare/3.6.0...3.6.1
+[3.6.0]: https://github.com/react-navigation/react-navigation/compare/3.5.1...3.6.0
+[3.5.1]: https://github.com/react-navigation/react-navigation/compare/3.5.0...3.5.1
+[3.5.0]: https://github.com/react-navigation/react-navigation/compare/3.4.1...3.5.0
 [3.4.1]: https://github.com/react-navigation/react-navigation/compare/3.4.0...3.4.1
 [3.4.0]: https://github.com/react-navigation/react-navigation/compare/3.3.2...3.4.0
 [3.3.2]: https://github.com/react-navigation/react-navigation/compare/3.3.1...3.3.2

README.md

@@ -33,7 +33,7 @@ See our [Contributing Guide](CONTRIBUTING.md)!
 
 #### Is this the only library available for navigation?
 
-Certainly not! There other libraries - which, depending on your needs, can be better or worse suited for your project. Read more in the [alternative libraries](https://reactnavigation.org/docs/alternatives.html) documentation, and read React Navigation's [pitch & anti-pitch](https://reactnavigation.org/docs/pitch.html) to understand the tradeoffs.
+Certainly not! There are other libraries - which, depending on your needs, can be better or worse suited for your project. Read more in the [alternative libraries](https://reactnavigation.org/docs/alternatives.html) documentation, and read React Navigation's [pitch & anti-pitch](https://reactnavigation.org/docs/pitch.html) to understand the tradeoffs.
 
 #### Can I use this library for web?
 

babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ['module:metro-react-native-babel-preset'],
+};

examples/NavigationPlayground/app/SwitchWithStacks.tsx

@@ -5,6 +5,7 @@ import {
   StatusBar,
   StyleSheet,
   View,
+  Platform,
 } from 'react-native';
 import { createStackNavigator, createSwitchNavigator } from 'react-navigation';
 import { Button } from './commonComponents/ButtonWithMargin';
@@ -53,7 +54,7 @@ class HomeScreen extends React.Component<any, any> {
   };
 
   signOutAsync = async () => {
-    await AsyncStorage.clear();
+    Platform.OS === 'ios' ? await AsyncStorage.getAllKeys().then(AsyncStorage.multiRemove) : await AsyncStorage.clear()
     this.props.navigation.navigate('Auth');
   };
 }
@@ -73,7 +74,7 @@ class OtherScreen extends React.Component<any, any> {
   }
 
   signOutAsync = async () => {
-    await AsyncStorage.clear();
+    Platform.OS === 'ios' ? await AsyncStorage.getAllKeys().then(AsyncStorage.multiRemove) : await AsyncStorage.clear()
     this.props.navigation.navigate('Auth');
   };
 }

flow/react-navigation.js

@@ -238,6 +238,7 @@ declare module 'react-navigation' {
      */
     index: number,
     routes: Array<NavigationRoute>,
+    isTransitioning?: boolean,
   };
 
   declare export type NavigationRoute =
@@ -407,7 +408,9 @@ declare module 'react-navigation' {
     NavigationSceneRendererProps & {
       mode: HeaderMode,
       router: NavigationRouter<NavigationState, NavigationStackScreenOptions>,
-      getScreenDetails: NavigationScene => NavigationScreenDetails<NavigationStackScreenOptions>,
+      getScreenDetails: NavigationScene => NavigationScreenDetails<
+        NavigationStackScreenOptions
+      >,
       leftInterpolator: (props: NavigationSceneRendererProps) => {},
       titleInterpolator: (props: NavigationSceneRendererProps) => {},
       rightInterpolator: (props: NavigationSceneRendererProps) => {},
@@ -466,10 +469,10 @@ declare module 'react-navigation' {
     disableKeyboardHandling?: boolean,
   |};
 
-  declare export type StackNavigatorConfig = {|
+  declare export type StackNavigatorConfig = $Shape<{|
     ...NavigationStackViewConfig,
     ...NavigationStackRouterConfig,
-  |};
+  |}>;
 
   /**
    * Switch Navigator
@@ -658,7 +661,9 @@ declare module 'react-navigation' {
     onWillBlur?: NavigationEventCallback,
     onDidBlur?: NavigationEventCallback,
   };
-  declare export var NavigationEvents: React$ComponentType<_NavigationEventsProps>;
+  declare export var NavigationEvents: React$ComponentType<
+    _NavigationEventsProps
+  >;
 
   /**
    * Navigation container
@@ -709,6 +714,7 @@ declare module 'react-navigation' {
     isStale: boolean,
     key: string,
     route: NavigationRoute,
+    descriptor: ?NavigationDescriptor,
   };
 
   declare export type NavigationTransitionProps = $Shape<{
@@ -920,9 +926,9 @@ declare module 'react-navigation' {
     router: NavigationRouter<S, O>,
   };
 
-  declare type NavigationDescriptor = {
+  declare export type NavigationDescriptor = {
     key: string,
-    state: NavigationLeafRoute | NavigationStateRoute,
+    state: NavigationRoute,
     navigation: NavigationScreenProp<*>,
     getComponent: () => React$ComponentType<{}>,
   };
@@ -1037,7 +1043,9 @@ declare module 'react-navigation' {
      */
     transitionConfig?: () => TransitionConfig,
   } & NavigationNavigatorProps<NavigationStackScreenOptions, NavigationState>;
-  declare export var CardStackTransitioner: React$ComponentType<_CardStackTransitionerProps>;
+  declare export var CardStackTransitioner: React$ComponentType<
+    _CardStackTransitionerProps
+  >;
 
   declare type _CardStackProps = {
     screenProps?: {},
@@ -1108,7 +1116,9 @@ declare module 'react-navigation' {
     truncatedTitle?: ?string,
     width?: ?number,
   };
-  declare export var HeaderBackButton: React$ComponentType<_HeaderBackButtonProps>;
+  declare export var HeaderBackButton: React$ComponentType<
+    _HeaderBackButtonProps
+  >;
 
   declare type _DrawerViewProps = {
     drawerLockMode?: 'unlocked' | 'locked-closed' | 'locked-open',
@@ -1174,7 +1184,7 @@ declare module 'react-navigation' {
   };
   declare export var TabView: React$ComponentType<_TabViewProps>;
 
-  declare type _TabBarTopProps = {
+  declare type _MaterialTopTabBarProps = {
     activeTintColor: string,
     inactiveTintColor: string,
     showIcon: boolean,
@@ -1198,9 +1208,18 @@ declare module 'react-navigation' {
     labelStyle?: TextStyleProp,
     iconStyle?: ViewStyleProp,
   };
-  declare export var TabBarTop: React$ComponentType<_TabBarTopProps>;
+  declare export var MaterialTopTabBar: React$ComponentType<
+    _MaterialTopTabBarProps
+  >;
 
-  declare type _TabBarBottomProps = {
+  declare type _BottomTabBarButtonComponentProps = {
+    onPress: () => void,
+    onLongPress: () => void,
+    testID: string,
+    accessibilityLabel: string,
+    style: ViewStyleProp,
+  };
+  declare type _BottomTabBarProps = {
     activeTintColor: string,
     activeBackgroundColor: string,
     adaptive?: boolean,
@@ -1223,13 +1242,16 @@ declare module 'react-navigation' {
     }) => void,
     getTestIDProps: (scene: TabScene) => (scene: TabScene) => any,
     renderIcon: (scene: TabScene) => React$Node,
+    getButtonComponent: (
+      scene: TabScene
+    ) => React$ComponentType<_BottomTabBarButtonComponentProps>,
     style?: ViewStyleProp,
     animateStyle?: ViewStyleProp,
     labelStyle?: TextStyleProp,
     tabStyle?: ViewStyleProp,
     showIcon?: boolean,
   };
-  declare export var TabBarBottom: React$ComponentType<_TabBarBottomProps>;
+  declare export var BottomTabBar: React$ComponentType<_BottomTabBarProps>;
 
   declare export function withNavigation<
     Props: {},

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-navigation",
-  "version": "3.4.1",
+  "version": "3.7.0",
   "description": "Routing and navigation for your React Native apps",
   "main": "src/react-navigation.js",
   "types": "typescript/react-navigation.d.ts",
@@ -36,11 +36,11 @@
     "react-native": "*"
   },
   "dependencies": {
-    "@react-navigation/core": "3.2.0",
+    "@react-navigation/core": "~3.3.0",
-    "@react-navigation/native": "~3.1.5",
+    "@react-navigation/native": "~3.3.0",
-    "react-navigation-drawer": "1.3.0",
+    "react-navigation-drawer": "1.2.1",
-    "react-navigation-stack": "1.1.1",
+    "react-navigation-stack": "1.2.0",
-    "react-navigation-tabs": "1.0.2"
+    "react-navigation-tabs": "1.1.2"
   },
   "devDependencies": {
     "@types/react-native": "~0.57.38",
@@ -58,13 +58,13 @@
     "eslint-plugin-prettier": "^2.6.0",
     "eslint-plugin-react": "^7.1.0",
     "husky": "^0.14.3",
-    "jest": "^22.1.3",
+    "jest": "^24.5.0",
     "jest-expo": "^25.1.0",
     "lint-staged": "^4.2.1",
     "prettier": "^1.12.1",
     "prettier-eslint": "^8.8.1",
     "react": "16.6.1",
-    "react-native": "^0.52.0",
+    "react-native": "~0.57.7",
     "react-native-vector-icons": "^4.2.0",
     "react-test-renderer": "^16.0.0",
     "release-it": "^7.6.1"

src/react-navigation.js

@@ -121,6 +121,15 @@ module.exports = {
     return require('react-navigation-drawer').createDrawerNavigator;
   },
 
+  // Gesture contexts
+
+  get StackGestureContext() {
+    return require('react-navigation-stack').StackGestureContext;
+  },
+  get DrawerGestureContext() {
+    return require('react-navigation-drawer').DrawerGestureContext;
+  },
+
   // Routers and Actions
 
   get DrawerRouter() {

typescript/react-navigation.d.ts

@@ -33,6 +33,8 @@
 
 declare module 'react-navigation' {
   import * as React from 'react';
+  import { PanGestureHandler } from 'react-native-gesture-handler';
+
   import {
     Animated,
     TextStyle,
@@ -64,10 +66,14 @@ declare module 'react-navigation' {
 
   export const HeaderStyleInterpolator: HeaderStyleInterpolatorStatic;
 
+  export type ScreenProps = {
+    [key: string]: any;
+  }
+
   // @todo - any..
   export function getActiveChildNavigationOptions<S>(
     navigation: NavigationProp<S>,
-    screenProps?: object
+    screenProps?: ScreenProps
   ): NavigationParams;
 
   // @todo when we split types into common, native and web,
@@ -170,7 +176,7 @@ declare module 'react-navigation' {
 
   export type NavigationScreenOptionsGetter<Options> = (
     navigation: NavigationScreenProp<NavigationRoute<any>>,
-    screenProps?: { [key: string]: any }
+    screenProps?: ScreenProps
   ) => Options;
 
   export interface NavigationRouter<State = NavigationState, Options = {}> {
@@ -231,7 +237,7 @@ declare module 'react-navigation' {
 
   export interface NavigationScreenConfigProps {
     navigation: NavigationScreenProp<NavigationRoute>;
-    screenProps: { [key: string]: any };
+    screenProps: ScreenProps;
   }
 
   export type NavigationScreenConfig<Options> =
@@ -558,23 +564,28 @@ declare module 'react-navigation' {
     index: number;
     tintColor?: string;
   }
+
+  export interface TabBarIconProps {
+    tintColor: string | null;
+    focused: boolean;
+    horizontal: boolean;
+  }
+
+  export interface TabBarLabelProps {
+    tintColor: string | null;
+    focused: boolean;
+  }
+
   // tslint:disable-next-line:strict-export-declare-modifiers
   interface NavigationTabScreenOptionsBase {
     title?: string;
     tabBarIcon?:
       | React.ReactElement<any>
-      | ((options: {
+      | ((options: TabBarIconProps) => React.ReactElement<any> | null);
-          tintColor: string | null;
-          focused: boolean;
-          horizontal: boolean;
-        }) => React.ReactElement<any> | null);
     tabBarLabel?:
       | string
       | React.ReactElement<any>
-      | ((options: {
+      | ((options: TabBarLabelProps) => React.ReactElement<any> | string | null);
-          tintColor: string | null;
-          focused: boolean;
-        }) => React.ReactElement<any> | string | null);
     tabBarVisible?: boolean;
     tabBarTestIDProps?: { testID?: string; accessibilityLabel?: string };
   }
@@ -606,21 +617,25 @@ declare module 'react-navigation' {
 
   export type DrawerLockMode = 'unlocked' | 'locked-closed' | 'locked-open';
 
+  export interface DrawerIconProps {
+    tintColor: string | null;
+    focused: boolean;
+  }
+
+  export interface DrawerLabelProps {
+    tintColor: string | null;
+    focused: boolean;
+  }
+
   export interface NavigationDrawerScreenOptions {
     title?: string;
     drawerIcon?:
       | React.ReactElement<any>
-      | ((options: {
+      | ((options: DrawerIconProps) => React.ReactElement<any> | null);
-          tintColor: string | null;
-          focused: boolean;
-        }) => React.ReactElement<any> | null);
     drawerLabel?:
       | string
       | React.ReactElement<any>
-      | ((options: {
+      | ((options: DrawerLabelProps) => React.ReactElement<any> | null);
-          tintColor: string | null;
-          focused: boolean;
-        }) => React.ReactElement<any> | null);
     drawerLockMode?: DrawerLockMode;
   }
 
@@ -721,7 +736,7 @@ declare module 'react-navigation' {
   export interface NavigationNavigatorProps<O = {}, S = {}> {
     detached?: boolean;
     navigation?: NavigationProp<S>;
-    screenProps?: { [key: string]: any };
+    screenProps?: ScreenProps;
     navigationOptions?: O;
   }
 
@@ -776,7 +791,7 @@ declare module 'react-navigation' {
     scene: NavigationScene;
     index: number;
 
-    screenProps?: { [key: string]: any };
+    screenProps?: ScreenProps;
   }
 
   // The scene renderer props are nearly identical to the props used for rendering
@@ -832,6 +847,7 @@ declare module 'react-navigation' {
     ModalSlideFromBottomIOS: TransitionConfig;
     FadeInFromBottomAndroid: TransitionConfig;
     FadeOutToBottomAndroid: TransitionConfig;
+    NoAnimation: TransitionConfig;
   }
 
   export const StackViewTransitionConfigs: StackViewTransitionConfigsType;
@@ -874,7 +890,7 @@ declare module 'react-navigation' {
     navigation?: NavigationScreenProp<S>;
     persistenceKey?: string | null;
     renderLoadingExperimental?: React.ComponentType;
-    screenProps?: any;
+    screenProps?: ScreenProps;
     navigationOptions?: O;
     style?: StyleProp<ViewStyle>;
   }
@@ -896,7 +912,7 @@ declare module 'react-navigation' {
     ): NavigationContainerComponent;
 
     router: NavigationRouter<any, any>;
-    screenProps: { [key: string]: any };
+    screenProps: ScreenProps;
     navigationOptions: any;
     state: { nav: NavigationState | null };
   }
@@ -1039,20 +1055,25 @@ declare module 'react-navigation' {
     lazy?: boolean;
   }
 
+  export interface InitialLayout {
+    height: number;
+    width: number;
+  }
+
   // From navigators/TabNavigator.js
   export interface TabNavigatorConfig
     extends NavigationTabRouterConfig,
       TabViewConfig {
     lazy?: boolean;
     removeClippedSubviews?: boolean;
-    initialLayout?: { height: number; width: number };
+    initialLayout?: InitialLayout;
   }
   export interface BottomTabNavigatorConfig
     extends NavigationBottomTabRouterConfig,
       TabViewConfig {
     lazy?: boolean;
     removeClippedSubviews?: boolean;
-    initialLayout?: { height: number; width: number };
+    initialLayout?: InitialLayout;
   }
 
   // From navigators/TabNavigator.js
@@ -1102,7 +1123,7 @@ declare module 'react-navigation' {
     iconStyle?: ViewStyle;
   }
 
-  export interface TabBarBottomProps {
+  export interface BottomTabBarProps {
     activeTintColor: string;
     activeBackgroundColor: string;
     adaptive?: boolean;
@@ -1132,7 +1153,7 @@ declare module 'react-navigation' {
   }
 
   export const TabBarTop: React.ComponentType<TabBarTopProps>;
-  export const TabBarBottom: React.ComponentType<TabBarBottomProps>;
+  export const BottomTabBar: React.ComponentType<BottomTabBarProps>;
 
   /**
    * NavigationActions
@@ -1269,7 +1290,7 @@ declare module 'react-navigation' {
     {
       descriptors: { [key: string]: NavigationDescriptor };
       navigationConfig: O;
-      screenProps?: { [key: string]: any };
+      screenProps?: ScreenProps;
     } & NavigationInjectedProps
   >;
 
@@ -1314,7 +1335,7 @@ declare module 'react-navigation' {
     Options = any
   > {
     navigation: NavigationScreenProp<NavigationRoute<Params>, Params>;
-    screenProps?: { [key: string]: any };
+    screenProps?: ScreenProps;
     navigationOptions?: NavigationScreenConfig<Options>;
   }
 
@@ -1331,11 +1352,12 @@ declare module 'react-navigation' {
   export interface HeaderBackButtonProps {
     onPress?: () => void;
     pressColorAndroid?: string;
-    title?: string;
+    title?: string | null;
     titleStyle?: StyleProp<TextStyle>;
     tintColor?: string;
     truncatedTitle?: string;
     width?: number;
+    disabled?: boolean;
   }
 
   export const HeaderBackButton: React.ComponentClass<HeaderBackButtonProps>;
@@ -1352,6 +1374,18 @@ declare module 'react-navigation' {
     T extends React.ComponentType<any>
   > = T extends React.ComponentType<infer P> ? P : never;
 
+  export interface NavigationOrientationInjectedProps {
+    isLandscape: boolean;
+  }
+
+  export function withOrientation<P extends NavigationOrientationInjectedProps>(
+    Component: React.ComponentType<P>
+  ): React.ComponentType<Omit<P, keyof NavigationOrientationInjectedProps>>;
+
+  export interface NavigationInjectedProps<P = NavigationParams> {
+    navigation: NavigationScreenProp<NavigationRoute<P>, P>;
+  }
+
   export interface NavigationInjectedProps<P = NavigationParams> {
     navigation: NavigationScreenProp<NavigationRoute<P>, P>;
   }
@@ -1426,4 +1460,8 @@ declare module 'react-navigation' {
   }
 
   export const SafeAreaView: React.ComponentClass<SafeAreaViewProps>;
+
+  export const NavigationContext: React.Context<NavigationScreenProp<NavigationRoute>>;
+  export const StackGestureContext: React.Context<React.Ref<PanGestureHandler>>;
+  export const DrawerGestureContext: React.Context<React.Ref<PanGestureHandler>>;
 }