BREAKING: Update React Native TabView (#1218)

This commit is contained in:
Satyajit Sahoo
2017-04-26 01:17:29 +05:30
committed by Mike Grabowski
parent 655b46b60b
commit 0cd3eaa97a
4 changed files with 15 additions and 56 deletions

View File

@@ -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:

View File

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

View File

@@ -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';
@@ -26,7 +21,7 @@ export type TabViewConfig = {
tabBarOptions?: {},
swipeEnabled?: boolean,
animationEnabled?: boolean,
lazyLoad?: boolean,
lazy?: boolean,
};
export type TabScene = {
@@ -42,7 +37,7 @@ type Props = {
tabBarOptions?: {},
swipeEnabled?: boolean,
animationEnabled?: boolean,
lazyLoad?: boolean,
lazy?: boolean,
screenProps?: {},
navigation: NavigationScreenProp<NavigationState, NavigationAction>,
@@ -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;
@@ -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;
@@ -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} />;
}
}

View File

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