diff --git a/packages/react-navigation/docs/api/navigators/DrawerNavigator.md b/packages/react-navigation/docs/api/navigators/DrawerNavigator.md index 794ecf5e..aa323956 100644 --- a/packages/react-navigation/docs/api/navigators/DrawerNavigator.md +++ b/packages/react-navigation/docs/api/navigators/DrawerNavigator.md @@ -84,7 +84,7 @@ The route configs object is a mapping from route name to a route config, which t - `drawerWidth` - Width of the drawer - `drawerPosition` - Options are `left` or `right`. Default is `left` position. -- `contentComponent` - Component used to render the content of the drawer, for example, navigation items. Receives the `navigation` prop for the drawer. Defaults to `DrawerView.Items`. For more information, see below. +- `contentComponent` - Component used to render the content of the drawer, for example, navigation items. Receives the `navigation` prop for the drawer. Defaults to `DrawerItems`. For more information, see below. - `contentOptions` - Configure the drawer content, see below. #### Example: @@ -97,7 +97,7 @@ as you can see in the example below. { drawerWidth: 200, drawerPosition: 'right', - contentComponent: props => + contentComponent: props => } ``` @@ -113,9 +113,11 @@ Several options get passed to the underlying router to modify navigation logic: You can easily override the default component used by `react-navigation`: ```js +import { DrawerItems } from 'react-navigation'; + const CustomDrawerContentComponent = (props) => ( - + ); @@ -126,7 +128,7 @@ const styles = StyleSheet.create({ }); ``` -### `contentOptions` for `DrawerView.Items` +### `contentOptions` for `DrawerItems` - `activeTintColor` - label and icon color of the active label - `activeBackgroundColor` - background color of the active label diff --git a/packages/react-navigation/docs/api/navigators/TabNavigator.md b/packages/react-navigation/docs/api/navigators/TabNavigator.md index 2b8cc5d0..0ef35618 100644 --- a/packages/react-navigation/docs/api/navigators/TabNavigator.md +++ b/packages/react-navigation/docs/api/navigators/TabNavigator.md @@ -79,8 +79,8 @@ The route configs object is a mapping from route name to a route config, which t ### TabNavigatorConfig -- `tabBarComponent` - component to use as the tab bar, e.g. `TabView.TabBarBottom` -(this is the default on iOS), `TabView.TabBarTop` +- `tabBarComponent` - component to use as the tab bar, e.g. `TabBarBottom` +(this is the default on iOS), `TabBarTop` (this is the default on Android) - `tabBarPosition` - position of the tab bar, can be `'top'` or `'bottom'` - `swipeEnabled` - whether to allow swiping between tabs diff --git a/packages/react-navigation/src/navigators/DrawerNavigator.js b/packages/react-navigation/src/navigators/DrawerNavigator.js index aff24b6e..c5788d48 100644 --- a/packages/react-navigation/src/navigators/DrawerNavigator.js +++ b/packages/react-navigation/src/navigators/DrawerNavigator.js @@ -8,6 +8,8 @@ import createNavigationContainer from '../createNavigationContainer'; import TabRouter from '../routers/TabRouter'; import DrawerScreen from '../views/Drawer/DrawerScreen'; import DrawerView from '../views/Drawer/DrawerView'; +import DrawerItems from '../views/Drawer/DrawerNavigatorItems'; + import NavigatorTypes from './NavigatorTypes'; import type { DrawerViewConfig } from '../views/Drawer/DrawerView'; @@ -28,7 +30,7 @@ const DefaultDrawerConfig = { */ drawerWidth: Dimensions.get('window').width - (Platform.OS === 'android' ? 56 : 64), - contentComponent: DrawerView.Items, + contentComponent: DrawerItems, drawerPosition: 'left', }; diff --git a/packages/react-navigation/src/navigators/TabNavigator.js b/packages/react-navigation/src/navigators/TabNavigator.js index 4f1ab469..2a832c27 100644 --- a/packages/react-navigation/src/navigators/TabNavigator.js +++ b/packages/react-navigation/src/navigators/TabNavigator.js @@ -7,6 +7,9 @@ import createNavigator from './createNavigator'; import createNavigationContainer from '../createNavigationContainer'; import TabRouter from '../routers/TabRouter'; import TabView from '../views/TabView/TabView'; +import TabBarTop from '../views/TabView/TabBarTop'; +import TabBarBottom from '../views/TabView/TabBarBottom'; + import NavigatorTypes from './NavigatorTypes'; import type { TabViewConfig } from '../views/TabView/TabView'; @@ -61,14 +64,14 @@ const TabNavigator = ( const Presets = { iOSBottomTabs: { - tabBarComponent: TabView.TabBarBottom, + tabBarComponent: TabBarBottom, tabBarPosition: 'bottom', swipeEnabled: false, animationEnabled: false, lazyLoad: false, }, AndroidTopTabs: { - tabBarComponent: TabView.TabBarTop, + tabBarComponent: TabBarTop, tabBarPosition: 'top', swipeEnabled: true, animationEnabled: true, diff --git a/packages/react-navigation/src/react-navigation.js b/packages/react-navigation/src/react-navigation.js index 6fc7e169..d2cc06c3 100644 --- a/packages/react-navigation/src/react-navigation.js +++ b/packages/react-navigation/src/react-navigation.js @@ -51,18 +51,36 @@ module.exports = { get Card() { return require('./views/Card').default; }, + + // Header get Header() { return require('./views/Header').default; }, + get HeaderTitle() { + return require('./views/HeaderTitle').default; + }, get HeaderBackButton() { return require('./views/HeaderBackButton').default; }, + + // DrawerView get DrawerView() { return require('./views/Drawer/DrawerView').default; }, + get DrawerItems() { + return require('./views/Drawer/DrawerNavigatorItems').default; + }, + + // TabView get TabView() { return require('./views/TabView/TabView').default; }, + get TabBarTop() { + return require('./views/TabView/TabBarTop').default; + }, + get TabBarBottom() { + return require('./views/TabView/TabBarBottom').default; + }, // HOCs get withNavigation() { diff --git a/packages/react-navigation/src/views/Drawer/DrawerView.js b/packages/react-navigation/src/views/Drawer/DrawerView.js index 33475d25..0524961b 100644 --- a/packages/react-navigation/src/views/Drawer/DrawerView.js +++ b/packages/react-navigation/src/views/Drawer/DrawerView.js @@ -4,7 +4,6 @@ import React, { PureComponent } from 'react'; import DrawerLayout from 'react-native-drawer-layout-polyfill'; import addNavigationHelpers from '../../addNavigationHelpers'; -import DrawerNavigatorItems from './DrawerNavigatorItems'; import DrawerSidebar from './DrawerSidebar'; import type { @@ -42,8 +41,6 @@ type Props = DrawerViewConfig & { * Component that renders the drawer. */ export default class DrawerView extends PureComponent { - static Items = DrawerNavigatorItems; - props: Props; componentWillMount() { diff --git a/packages/react-navigation/src/views/Header.js b/packages/react-navigation/src/views/Header.js index 5726cda2..ecbfc975 100644 --- a/packages/react-navigation/src/views/Header.js +++ b/packages/react-navigation/src/views/Header.js @@ -39,8 +39,6 @@ const TITLE_OFFSET = Platform.OS === 'ios' ? 70 : 40; class Header extends React.PureComponent { static HEIGHT = APPBAR_HEIGHT + STATUSBAR_HEIGHT; - static Title = HeaderTitle; - static BackButton = HeaderBackButton; state = { widths: {}, diff --git a/packages/react-navigation/src/views/TabView/TabView.js b/packages/react-navigation/src/views/TabView/TabView.js index 9258d273..4c88f64d 100644 --- a/packages/react-navigation/src/views/TabView/TabView.js +++ b/packages/react-navigation/src/views/TabView/TabView.js @@ -8,8 +8,6 @@ import { TabViewPagerScroll, TabViewPagerPan, } from 'react-native-tab-view'; -import TabBarTop from './TabBarTop'; -import TabBarBottom from './TabBarBottom'; import SceneView from '../SceneView'; import withCachedChildNavigation from '../../withCachedChildNavigation'; @@ -68,9 +66,6 @@ switch (Platform.OS) { } class TabView extends PureComponent { - static TabBarTop = TabBarTop; - static TabBarBottom = TabBarBottom; - props: Props; _handlePageChanged = (index: number) => { @@ -224,9 +219,6 @@ class TabView extends PureComponent { const TabViewEnhanced = withCachedChildNavigation(TabView); -TabViewEnhanced.TabBarTop = TabBarTop; -TabViewEnhanced.TabBarBottom = TabBarBottom; - export default TabViewEnhanced; const styles = StyleSheet.create({