Skip to content

Commit

Permalink
BREAKING: Update React Native TabView (react-navigation#1218)
Browse files Browse the repository at this point in the history
  • Loading branch information
satya164 authored and grabbou committed Apr 25, 2017
1 parent 655b46b commit 0cd3eaa
Show file tree
Hide file tree
Showing 4 changed files with 15 additions and 56 deletions.
2 changes: 1 addition & 1 deletion docs/api/navigators/TabNavigator.md
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ The route configs object is a mapping from route name to a route config, which t
- `tabBarPosition` - position of the tab bar, can be `'top'` or `'bottom'`
- `swipeEnabled` - whether to allow swiping between tabs
- `animationEnabled` - whether to animate when changing tabs
- `lazyLoad` - whether to lazily render tabs as needed as opposed to rendering them upfront
- `lazy` - whether to lazily render tabs as needed as opposed to rendering them upfront
- `tabBarOptions` - configure the tab bar, see below.

Several options get passed to the underlying router to modify navigation logic:
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@
"path-to-regexp": "^1.7.0",
"prop-types": "^15.5.8",
"react-native-drawer-layout-polyfill": "1.2.0",
"react-native-tab-view": "^0.0.59"
"react-native-tab-view": "^0.0.61"
},
"jest": {
"notify": true,
Expand Down
59 changes: 9 additions & 50 deletions src/views/TabView/TabView.js
Original file line number Diff line number Diff line change
@@ -1,13 +1,8 @@
/* @flow */

import React, { PureComponent } from 'react';
import { Platform, StyleSheet } from 'react-native';
import {
TabViewAnimated,
TabViewPagerAndroid,
TabViewPagerScroll,
TabViewPagerPan,
} from 'react-native-tab-view';
import { StyleSheet } from 'react-native';
import { TabViewAnimated } from 'react-native-tab-view';
import SceneView from '../SceneView';
import withCachedChildNavigation from '../../withCachedChildNavigation';

Expand All @@ -26,7 +21,7 @@ export type TabViewConfig = {
tabBarOptions?: {},
swipeEnabled?: boolean,
animationEnabled?: boolean,
lazyLoad?: boolean,
lazy?: boolean,
};

export type TabScene = {
Expand All @@ -42,7 +37,7 @@ type Props = {
tabBarOptions?: {},
swipeEnabled?: boolean,
animationEnabled?: boolean,
lazyLoad?: boolean,
lazy?: boolean,

screenProps?: {},
navigation: NavigationScreenProp<NavigationState, NavigationAction>,
Expand All @@ -52,19 +47,6 @@ type Props = {
},
};

let TabViewPager;

switch (Platform.OS) {
case 'android':
TabViewPager = TabViewPagerAndroid;
break;
case 'ios':
TabViewPager = TabViewPagerScroll;
break;
default:
TabViewPager = TabViewPagerPan;
}

class TabView extends PureComponent<void, Props, void> {
props: Props;

Expand Down Expand Up @@ -145,30 +127,14 @@ class TabView extends PureComponent<void, Props, void> {
);
};

_renderPager = (props: *) => {
const {
swipeEnabled,
animationEnabled,
} = this.props;

return (
<TabViewPager
{...props}
swipeEnabled={swipeEnabled}
animationEnabled={animationEnabled}
/>
);
};

_configureTransition = () => null;

render() {
const {
router,
tabBarComponent,
tabBarPosition,
animationEnabled,
lazyLoad,
swipeEnabled,
lazy,
screenProps,
} = this.props;

Expand All @@ -193,26 +159,19 @@ class TabView extends PureComponent<void, Props, void> {
}
}

let configureTransition;

if (animationEnabled === false) {
configureTransition = this._configureTransition;
}

const props = {
style: styles.container,
navigationState: this.props.navigation.state,
lazy: lazyLoad,
lazy,
renderHeader,
renderFooter,
animationEnabled,
swipeEnabled,
renderScene: this._renderScene,
renderPager: this._renderPager,
configureTransition,
onRequestChangeTab: this._handlePageChanged,
screenProps: this.props.screenProps,
};

/* $FlowFixMe */
return <TabViewAnimated {...props} />;
}
}
Expand Down
8 changes: 4 additions & 4 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -3921,11 +3921,11 @@ react-native-drawer-layout@1.2.0:
dependencies:
react-native-dismiss-keyboard "1.0.0"

react-native-tab-view@^0.0.59:
version "0.0.59"
resolved "https://registry.yarnpkg.com/react-native-tab-view/-/react-native-tab-view-0.0.59.tgz#2cd1d809a5699fcc5d45fa6fc08deb21d3f81fea"
react-native-tab-view@^0.0.61:
version "0.0.61"
resolved "https://registry.yarnpkg.com/react-native-tab-view/-/react-native-tab-view-0.0.61.tgz#9f5446c9ad33158b87f0bccf5004fbff79ca1f92"
dependencies:
eslint-plugin-prettier "^2.0.1"
prop-types "^15.5.8"

react-native-vector-icons@^3.0.0:
version "3.0.0"
Expand Down

0 comments on commit 0cd3eaa

Please sign in to comment.