@react-native-ohos/react-native-scrollable-tab-view 1.0.1-rc.1

package/src/SceneComponent.js

@@ -0,0 +1,17 @@
+const React = require('react');
+const ReactNative = require('react-native');
+const { Component } = React;
+const { View, StyleSheet } = ReactNative;
+
+const StaticContainer = require('./StaticContainer');
+
+const SceneComponent = (Props) => {
+  const { shouldUpdated, ...props } = Props;
+  return <View {...props}>
+      <StaticContainer shouldUpdate={shouldUpdated}>
+        {props.children}
+      </StaticContainer>
+  </View>;
+};
+
+module.exports = SceneComponent;

package/src/ScrollableTabBar.js

@@ -0,0 +1,252 @@
+const React = require('react');
+const ReactNative = require('react-native');
+const DeprecatedPropTypes = require('deprecated-react-native-prop-types');
+const PropTypes = require('prop-types');
+const createReactClass = require('create-react-class');
+const {
+  View,
+  Animated,
+  StyleSheet,
+  ScrollView,
+  Text,
+  Platform,
+  Dimensions,
+} = ReactNative;
+const Button = Platform.OS === 'ios' ? require('./Button.ios.js') : require('./Button.android.js');
+
+const WINDOW_WIDTH = Dimensions.get('window').width;
+
+const ScrollableTabBar = createReactClass({
+  propTypes: {
+    goToPage: PropTypes.func,
+    activeTab: PropTypes.number,
+    tabs: PropTypes.array,
+    backgroundColor: PropTypes.string,
+    activeTextColor: PropTypes.string,
+    inactiveTextColor: PropTypes.string,
+    scrollOffset: PropTypes.number,
+    style: DeprecatedPropTypes.ViewPropTypes.style,
+    tabStyle: DeprecatedPropTypes.ViewPropTypes.style,
+    tabsContainerStyle: DeprecatedPropTypes.ViewPropTypes.style,
+    textStyle: DeprecatedPropTypes.TextPropTypes.style,
+    renderTab: PropTypes.func,
+    underlineStyle: DeprecatedPropTypes.ViewPropTypes.style,
+    onScroll: PropTypes.func,
+  },
+
+  getDefaultProps() {
+    return {
+      scrollOffset: 52,
+      activeTextColor: 'navy',
+      inactiveTextColor: 'black',
+      backgroundColor: null,
+      style: {},
+      tabStyle: {},
+      tabsContainerStyle: {},
+      underlineStyle: {},
+    };
+  },
+
+  getInitialState() {
+    this._tabsMeasurements = [];
+    return {
+      _leftTabUnderline: new Animated.Value(0),
+      _widthTabUnderline: new Animated.Value(0),
+      _containerWidth: null,
+    };
+  },
+
+  componentDidMount() {
+    this.props.scrollValue.addListener(this.updateView);
+  },
+
+  updateView(offset) {
+    const position = Math.floor(offset.value);
+    const pageOffset = offset.value % 1;
+    const tabCount = this.props.tabs.length;
+    const lastTabPosition = tabCount - 1;
+
+    if (tabCount === 0 || offset.value < 0 || offset.value > lastTabPosition) {
+      return;
+    }
+
+    if (this.necessarilyMeasurementsCompleted(position, position === lastTabPosition)) {
+      this.updateTabPanel(position, pageOffset);
+      this.updateTabUnderline(position, pageOffset, tabCount);
+    }
+  },
+
+  necessarilyMeasurementsCompleted(position, isLastTab) {
+    return this._tabsMeasurements[position] &&
+      (isLastTab || this._tabsMeasurements[position + 1]) &&
+      this._tabContainerMeasurements &&
+      this._containerMeasurements;
+  },
+
+  updateTabPanel(position, pageOffset) {
+    const containerWidth = this._containerMeasurements.width;
+    const tabWidth = this._tabsMeasurements[position].width;
+    const nextTabMeasurements = this._tabsMeasurements[position + 1];
+    const nextTabWidth = nextTabMeasurements && nextTabMeasurements.width || 0;
+    const tabOffset = this._tabsMeasurements[position].left;
+    const absolutePageOffset = pageOffset * tabWidth;
+    let newScrollX = tabOffset + absolutePageOffset;
+
+    // center tab and smooth tab change (for when tabWidth changes a lot between two tabs)
+    newScrollX -= (containerWidth - (1 - pageOffset) * tabWidth - pageOffset * nextTabWidth) / 2;
+    newScrollX = newScrollX >= 0 ? newScrollX : 0;
+
+    if (Platform.OS === 'android') {
+      const rightBoundScroll = this._tabContainerMeasurements.width - (this._containerMeasurements.width);
+      newScrollX = newScrollX > rightBoundScroll ? rightBoundScroll : newScrollX;
+      if(this._scrollView){
+        this._scrollView.scrollTo({x: newScrollX, y: 0, animated: false, });
+      }
+    } else {
+      if(this._scrollView){
+        this._scrollView.scrollTo({x: newScrollX, y: 0, animated: false, });
+      }
+    }
+
+  },
+
+  updateTabUnderline(position, pageOffset, tabCount) {
+    const lineLeft = this._tabsMeasurements[position].left;
+    const lineRight = this._tabsMeasurements[position].right;
+
+    if (position < tabCount - 1) {
+      const nextTabLeft = this._tabsMeasurements[position + 1].left;
+      const nextTabRight = this._tabsMeasurements[position + 1].right;
+
+      const newLineLeft = (pageOffset * nextTabLeft + (1 - pageOffset) * lineLeft);
+      const newLineRight = (pageOffset * nextTabRight + (1 - pageOffset) * lineRight);
+
+      this.state._leftTabUnderline.setValue(newLineLeft);
+      this.state._widthTabUnderline.setValue(newLineRight - newLineLeft);
+    } else {
+      this.state._leftTabUnderline.setValue(lineLeft);
+      this.state._widthTabUnderline.setValue(lineRight - lineLeft);
+    }
+  },
+
+  renderTab(name, page, isTabActive, onPressHandler, onLayoutHandler) {
+    const { activeTextColor, inactiveTextColor, textStyle, } = this.props;
+    const textColor = isTabActive ? activeTextColor : inactiveTextColor;
+    const fontWeight = isTabActive ? 'bold' : 'normal';
+
+    return <Button
+      key={`${name}_${page}`}
+      accessible={true}
+      accessibilityLabel={name}
+      accessibilityTraits='button'
+      onPress={() => onPressHandler(page)}
+      onLayout={onLayoutHandler}
+    >
+      <View style={[styles.tab, this.props.tabStyle, ]}>
+        <Text style={[{color: textColor, fontWeight, }, textStyle, ]}>
+          {name}
+        </Text>
+      </View>
+    </Button>;
+  },
+
+  measureTab(page, event) {
+    const { x, width, height, } = event.nativeEvent.layout;
+    this._tabsMeasurements[page] = {left: x, right: x + width, width, height, };
+    this.updateView({value: this.props.scrollValue.__getValue(), });
+  },
+
+  render() {
+    const tabUnderlineStyle = {
+      position: 'absolute',
+      height: 4,
+      backgroundColor: 'navy',
+      bottom: 0,
+    };
+
+    const dynamicTabUnderline = {
+      left: this.state._leftTabUnderline,
+      width: this.state._widthTabUnderline,
+    };
+
+    const {
+      onScroll,
+    } = this.props;
+
+    return <View
+      style={[styles.container, {backgroundColor: this.props.backgroundColor, }, this.props.style, ]}
+      onLayout={this.onContainerLayout}
+    >
+      <ScrollView
+        ref={(scrollView) => { this._scrollView = scrollView; }}
+        horizontal={true}
+        showsHorizontalScrollIndicator={false}
+        showsVerticalScrollIndicator={false}
+        directionalLockEnabled={true}
+        bounces={false}
+        scrollsToTop={false}
+        onScroll={onScroll}
+        scrollEventThrottle={16}
+      >
+        <View
+          style={[styles.tabs, {width: this.state._containerWidth, }, this.props.tabsContainerStyle, ]}
+          ref={'tabContainer'}
+          onLayout={this.onTabContainerLayout}
+        >
+          {this.props.tabs.map((name, page) => {
+            const isTabActive = this.props.activeTab === page;
+            const renderTab = this.props.renderTab || this.renderTab;
+            return renderTab(name, page, isTabActive, this.props.goToPage, this.measureTab.bind(this, page));
+          })}
+          <Animated.View style={[tabUnderlineStyle, dynamicTabUnderline, this.props.underlineStyle, ]} />
+        </View>
+      </ScrollView>
+    </View>;
+  },
+
+  componentDidUpdate(prevProps) {
+    // If the tabs change, force the width of the tabs container to be recalculated
+    if (JSON.stringify(prevProps.tabs) !== JSON.stringify(this.props.tabs) && this.state._containerWidth) {
+      this.setState({ _containerWidth: null, });
+    }
+  },
+
+  onTabContainerLayout(e) {
+    this._tabContainerMeasurements = e.nativeEvent.layout;
+    let width = this._tabContainerMeasurements.width;
+    if (width < WINDOW_WIDTH) {
+      width = WINDOW_WIDTH;
+    }
+    this.setState({ _containerWidth: width, });
+    this.updateView({value: this.props.scrollValue.__getValue(), });
+  },
+
+  onContainerLayout(e) {
+    this._containerMeasurements = e.nativeEvent.layout;
+    this.updateView({value: this.props.scrollValue.__getValue(), });
+  },
+});
+
+module.exports = ScrollableTabBar;
+
+const styles = StyleSheet.create({
+  tab: {
+    height: 49,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingLeft: 20,
+    paddingRight: 20,
+  },
+  container: {
+    height: 50,
+    borderWidth: 1,
+    borderTopWidth: 0,
+    borderLeftWidth: 0,
+    borderRightWidth: 0,
+    borderColor: '#ccc',
+  },
+  tabs: {
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+  },
+});

package/src/StaticContainer.js

@@ -0,0 +1,19 @@
+const React = require('react');
+
+class StaticContainer extends React.Component {
+
+  shouldComponentUpdate(nextProps: Object): boolean {
+    return !!nextProps.shouldUpdate;
+  }
+
+  render(): ?ReactElement {
+    var child = this.props.children;
+    if (child === null || child === false) {
+      return null;
+    }
+    return React.Children.only(child);
+  }
+
+}
+
+module.exports = StaticContainer;

package/src/index.js

@@ -0,0 +1,417 @@
+import ViewPager from "react-native-pager-view";
+import ViewPagerAndroid from "react-native-pager-view";
+
+const React = require('react');
+const ReactNative = require('react-native');
+const DeprecatedPropTypes = require('deprecated-react-native-prop-types');
+const createReactClass = require('create-react-class');
+const PropTypes = require('prop-types');
+const {
+  Dimensions,
+  View,
+  Animated,
+  ScrollView,
+  Platform,
+  StyleSheet,
+  InteractionManager,
+} = ReactNative;
+
+const TimerMixin = require('react-timer-mixin');
+
+const SceneComponent = require('./SceneComponent');
+const DefaultTabBar = require('./DefaultTabBar');
+const ScrollableTabBar = require('./ScrollableTabBar');
+
+const AnimatedViewPagerAndroid = Platform.OS === 'ios' ? undefined : Animated.createAnimatedComponent(ViewPager);
+
+const ScrollableTabView = createReactClass({
+  mixins: [TimerMixin, ],
+  statics: {
+    DefaultTabBar,
+    ScrollableTabBar,
+  },
+  scrollOnMountCalled: false,
+  tabWillChangeWithoutGesture: false,
+
+  propTypes: {
+    tabBarPosition: PropTypes.oneOf(['top', 'bottom', 'overlayTop', 'overlayBottom', ]),
+    initialPage: PropTypes.number,
+    page: PropTypes.number,
+    onChangeTab: PropTypes.func,
+    onScroll: PropTypes.func,
+    renderTabBar: PropTypes.any,
+    tabBarUnderlineStyle: DeprecatedPropTypes.ViewPropTypes.style,
+    tabBarBackgroundColor: PropTypes.string,
+    tabBarActiveTextColor: PropTypes.string,
+    tabBarInactiveTextColor: PropTypes.string,
+    tabBarTextStyle: PropTypes.object,
+    style: DeprecatedPropTypes.ViewPropTypes.style,
+    contentProps: PropTypes.object,
+    scrollWithoutAnimation: PropTypes.bool,
+    locked: PropTypes.bool,
+    prerenderingSiblingsNumber: PropTypes.number,
+  },
+
+  getDefaultProps() {
+    return {
+      tabBarPosition: 'top',
+      initialPage: 0,
+      page: -1,
+      onChangeTab: () => {},
+      onScroll: () => {},
+      contentProps: {},
+      scrollWithoutAnimation: false,
+      locked: false,
+      prerenderingSiblingsNumber: 0,
+    };
+  },
+
+  getInitialState() {
+    const containerWidth = Dimensions.get('window').width;
+    let scrollValue;
+    let scrollXIOS;
+    let positionAndroid;
+    let offsetAndroid;
+
+    if (Platform.OS === 'ios') {
+      scrollXIOS = new Animated.Value(this.props.initialPage * containerWidth);
+      const containerWidthAnimatedValue = new Animated.Value(containerWidth);
+      // Need to call __makeNative manually to avoid a native animated bug. See
+      // https://github.com/facebook/react-native/pull/14435
+      containerWidthAnimatedValue.__makeNative();
+      scrollValue = Animated.divide(scrollXIOS, containerWidthAnimatedValue);
+
+      const callListeners = this._polyfillAnimatedValue(scrollValue);
+      scrollXIOS.addListener(
+        ({ value, }) => callListeners(value / this.state.containerWidth)
+      );
+    } else {
+      positionAndroid = new Animated.Value(this.props.initialPage);
+      offsetAndroid = new Animated.Value(0);
+      scrollValue = Animated.add(positionAndroid, offsetAndroid);
+
+      const callListeners = this._polyfillAnimatedValue(scrollValue);
+      let positionAndroidValue = this.props.initialPage;
+      let offsetAndroidValue = 0;
+      positionAndroid.addListener(({ value, }) => {
+        positionAndroidValue = value;
+        callListeners(positionAndroidValue + offsetAndroidValue);
+      });
+      offsetAndroid.addListener(({ value, }) => {
+        offsetAndroidValue = value;
+        callListeners(positionAndroidValue + offsetAndroidValue);
+      });
+    }
+
+    return {
+      currentPage: this.props.initialPage,
+      scrollValue,
+      scrollXIOS,
+      positionAndroid,
+      offsetAndroid,
+      containerWidth,
+      sceneKeys: this.newSceneKeys({ currentPage: this.props.initialPage, }),
+    };
+  },
+
+  componentDidUpdate(prevProps) {
+    if (this.props.children !== prevProps.children) {
+      this.updateSceneKeys({ page: this.state.currentPage, children: this.props.children, });
+    }
+
+    if (this.props.page >= 0 && this.props.page !== this.state.currentPage) {
+      this.goToPage(this.props.page);
+    }
+  },
+
+  componentWillUnmount() {
+    if (Platform.OS === 'ios') {
+      this.state.scrollXIOS.removeAllListeners();
+    } else {
+      this.state.positionAndroid.removeAllListeners();
+      this.state.offsetAndroid.removeAllListeners();
+    }
+  },
+
+  goToPage(pageNumber) {
+    if (Platform.OS === 'ios') {
+      const offset = pageNumber * this.state.containerWidth;
+      if (this.scrollView) {
+        this.scrollView.scrollTo({x: offset, y: 0, animated: !this.props.scrollWithoutAnimation, });
+      }
+    } else {
+      if (this.scrollView) {
+        this.tabWillChangeWithoutGesture = true;
+        if (this.props.scrollWithoutAnimation) {
+          this.scrollView.setPageWithoutAnimation(pageNumber);
+        } else {
+          this.scrollView.setPage(pageNumber);
+        }
+      }
+    }
+
+    const currentPage = this.state.currentPage;
+    this.updateSceneKeys({
+      page: pageNumber,
+      callback: this._onChangeTab.bind(this, currentPage, pageNumber),
+    });
+  },
+
+  renderTabBar(props) {
+    if (this.props.renderTabBar === false) {
+      return null;
+    } else if (this.props.renderTabBar) {
+      return React.cloneElement(this.props.renderTabBar(props), props);
+    } else {
+      return <DefaultTabBar {...props} />;
+    }
+  },
+
+  updateSceneKeys({ page, children = this.props.children, callback = () => {}, }) {
+    let newKeys = this.newSceneKeys({ previousKeys: this.state.sceneKeys, currentPage: page, children, });
+    this.setState({currentPage: page, sceneKeys: newKeys });
+    // fixed: 修复切换tab会闪烁的问题，callback中不依赖于最新的state，因此可以不用放在setState回调中
+    callback?.()
+  },
+
+  newSceneKeys({ previousKeys = [], currentPage = 0, children = this.props.children, }) {
+    let newKeys = [];
+    this._children(children).forEach((child, idx) => {
+      let key = this._makeSceneKey(child, idx);
+      if (this._keyExists(previousKeys, key) ||
+        this._shouldRenderSceneKey(idx, currentPage)) {
+        newKeys.push(key);
+      }
+    });
+    return newKeys;
+  },
+
+  // Animated.add and Animated.divide do not currently support listeners so
+  // we have to polyfill it here since a lot of code depends on being able
+  // to add a listener to `scrollValue`. See https://github.com/facebook/react-native/pull/12620.
+  _polyfillAnimatedValue(animatedValue) {
+
+    const listeners = new Set();
+    const addListener = (listener) => {
+      listeners.add(listener);
+    };
+
+    const removeListener = (listener) => {
+      listeners.delete(listener);
+    };
+
+    const removeAllListeners = () => {
+      listeners.clear();
+    };
+
+    animatedValue.addListener = addListener;
+    animatedValue.removeListener = removeListener;
+    animatedValue.removeAllListeners = removeAllListeners;
+
+    return (value) => listeners.forEach(listener => listener({ value, }));
+  },
+
+  _shouldRenderSceneKey(idx, currentPageKey) {
+    let numOfSibling = this.props.prerenderingSiblingsNumber;
+    return (idx < (currentPageKey + numOfSibling + 1) &&
+      idx > (currentPageKey - numOfSibling - 1));
+  },
+
+  _keyExists(sceneKeys, key) {
+    return sceneKeys.find((sceneKey) => key === sceneKey);
+  },
+
+  _makeSceneKey(child, idx) {
+    return child.props.tabLabel + '_' + idx;
+  },
+
+  renderScrollableContent() {
+    if (Platform.OS === 'ios') {
+      const scenes = this._composeScenes();
+      return <Animated.ScrollView
+        horizontal
+        pagingEnabled
+        automaticallyAdjustContentInsets={false}
+        contentOffset={{ x: this.props.initialPage * this.state.containerWidth, }}
+        ref={(scrollView) => { this.scrollView = scrollView; }}
+        onScroll={Animated.event(
+          [{ nativeEvent: { contentOffset: { x: this.state.scrollXIOS, }, }, }, ],
+          { useNativeDriver: false, listener: this._onScroll, }
+        )}
+        onMomentumScrollBegin={this._onMomentumScrollBeginAndEnd}
+        onMomentumScrollEnd={this._onMomentumScrollBeginAndEnd}
+        scrollEventThrottle={16}
+        scrollsToTop={false}
+        showsHorizontalScrollIndicator={false}
+        scrollEnabled={!this.props.locked}
+        directionalLockEnabled
+        alwaysBounceVertical={false}
+        keyboardDismissMode="on-drag"
+        {...this.props.contentProps}
+      >
+          {scenes}
+      </Animated.ScrollView>;
+    } else {
+      const scenes = this._composeScenes();
+      return <AnimatedViewPagerAndroid
+        key={this._children().length}
+        style={styles.scrollableContentAndroid}
+        initialPage={this.props.initialPage}
+        onPageSelected={this._updateSelectedPage}
+        keyboardDismissMode="on-drag"
+        scrollEnabled={!this.props.locked}
+        onPageScroll={Animated.event(
+          [{
+            nativeEvent: {
+              position: this.state.positionAndroid,
+              offset: this.state.offsetAndroid,
+            },
+          }, ],
+          {
+            useNativeDriver: false,
+            listener: this._onScroll,
+          },
+        )}
+        ref={(scrollView) => { this.scrollView = scrollView; }}
+        {...this.props.contentProps}
+      >
+        {scenes}
+      </AnimatedViewPagerAndroid>;
+    }
+  },
+
+  _composeScenes() {
+    return this._children().map((child, idx) => {
+      let key = this._makeSceneKey(child, idx);
+      return <SceneComponent
+        key={child.key}
+        shouldUpdated={this._shouldRenderSceneKey(idx, this.state.currentPage)}
+        style={{width: this.state.containerWidth, }}
+      >
+        {this._keyExists(this.state.sceneKeys, key) ? child : <View tabLabel={child.props.tabLabel}/>}
+      </SceneComponent>;
+    });
+  },
+
+  _onMomentumScrollBeginAndEnd(e) {
+    const offsetX = e.nativeEvent.contentOffset.x;
+    const page = Math.round(offsetX / this.state.containerWidth);
+    if (this.state.currentPage !== page) {
+      this._updateSelectedPage(page);
+    }
+  },
+
+  _updateSelectedPage(nextPage) {
+    let localNextPage = nextPage;
+    if (typeof localNextPage === 'object') {
+      localNextPage = nextPage.nativeEvent.position;
+    }
+
+    const currentPage = this.state.currentPage;
+    !this.tabWillChangeWithoutGesture && this.updateSceneKeys({
+      page: localNextPage,
+      callback: this._onChangeTab.bind(this, currentPage, localNextPage),
+    });
+    this.tabWillChangeWithoutGesture = false;
+  },
+
+  _onChangeTab(prevPage, currentPage) {
+    this.props.onChangeTab({
+      i: currentPage,
+      ref: this._children()[currentPage],
+      from: prevPage,
+    });
+  },
+
+  _onScroll(e) {
+    if (Platform.OS === 'ios') {
+      const offsetX = e.nativeEvent.contentOffset.x;
+      if (offsetX === 0 && !this.scrollOnMountCalled) {
+        this.scrollOnMountCalled = true;
+      } else {
+        this.props.onScroll(offsetX / this.state.containerWidth);
+      }
+    } else {
+      const { position, offset, } = e.nativeEvent;
+      this.props.onScroll(position + offset);
+    }
+  },
+
+  _handleLayout(e) {
+    const { width, } = e.nativeEvent.layout;
+
+    if (!width || width <= 0 || Math.round(width) === Math.round(this.state.containerWidth)) {
+      return;
+    }
+
+    if (Platform.OS === 'ios') {
+      const containerWidthAnimatedValue = new Animated.Value(width);
+      // Need to call __makeNative manually to avoid a native animated bug. See
+      // https://github.com/facebook/react-native/pull/14435
+      containerWidthAnimatedValue.__makeNative();
+      scrollValue = Animated.divide(this.state.scrollXIOS, containerWidthAnimatedValue);
+      this.setState({ containerWidth: width, scrollValue, });
+    } else {
+      this.setState({ containerWidth: width, });
+    }
+    this.requestAnimationFrame(() => {
+      this.goToPage(this.state.currentPage);
+    });
+  },
+
+  _children(children = this.props.children) {
+    return React.Children.map(children, (child) => child);
+  },
+
+  render() {
+    let overlayTabs = (this.props.tabBarPosition === 'overlayTop' || this.props.tabBarPosition === 'overlayBottom');
+    let tabBarProps = {
+      goToPage: this.goToPage,
+      tabs: this._children().map((child) => child.props.tabLabel),
+      activeTab: this.state.currentPage,
+      scrollValue: this.state.scrollValue,
+      containerWidth: this.state.containerWidth,
+    };
+
+    if (this.props.tabBarBackgroundColor) {
+      tabBarProps.backgroundColor = this.props.tabBarBackgroundColor;
+    }
+    if (this.props.tabBarActiveTextColor) {
+      tabBarProps.activeTextColor = this.props.tabBarActiveTextColor;
+    }
+    if (this.props.tabBarInactiveTextColor) {
+      tabBarProps.inactiveTextColor = this.props.tabBarInactiveTextColor;
+    }
+    if (this.props.tabBarTextStyle) {
+      tabBarProps.textStyle = this.props.tabBarTextStyle;
+    }
+    if (this.props.tabBarUnderlineStyle) {
+      tabBarProps.underlineStyle = this.props.tabBarUnderlineStyle;
+    }
+    if (overlayTabs) {
+      tabBarProps.style = {
+        position: 'absolute',
+        left: 0,
+        right: 0,
+        [this.props.tabBarPosition === 'overlayTop' ? 'top' : 'bottom']: 0,
+      };
+    }
+
+    return <View style={[styles.container, this.props.style, ]} onLayout={this._handleLayout}>
+      {this.props.tabBarPosition === 'top' && this.renderTabBar(tabBarProps)}
+      {this.renderScrollableContent()}
+      {(this.props.tabBarPosition === 'bottom' || overlayTabs) && this.renderTabBar(tabBarProps)}
+    </View>;
+  },
+});
+
+module.exports = ScrollableTabView;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  scrollableContentAndroid: {
+    flex: 1,
+  },
+});