Omit react-native-viewpager to avoid bug (and reduce some UX)

imWildCat · Oct 13, 2016 · df3be5b · df3be5b
1 parent 5c0579e
commit df3be5b
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 37 deletions.
diff --git a/package.json b/package.json
@@ -24,7 +24,6 @@
     "react-native-root-toast": "^1.0.3",
     "react-native-router-flux": "^3.35.0",
     "react-native-vector-icons": "^2.0.3",
-    "react-native-viewpager": "^0.2.11",
     "react-redux": "^4.4.5",
     "redux": "^3.5.2",
     "redux-thunk": "^2.1.0",

diff --git a/src/components/common/TopicList/index.js b/src/components/common/TopicList/index.js
@@ -23,7 +23,6 @@ class TopicListPage extends Component {
   };
 
   onFetch = (page = 1, callback, options) => {
-    console.log({options});
     const { slug, isNode } = this.props;
     const uri = isNode ? `/go/${slug}` : `?tab=${slug}`;
     V2Networking.get(uri)

diff --git a/src/components/pages/DiscoveryTab/index.js b/src/components/pages/DiscoveryTab/index.js
@@ -1,6 +1,5 @@
 import React, {Component, PropTypes} from 'react';
 import {View, StyleSheet} from 'react-native';
-import ViewPager from 'react-native-viewpager';
 import {Actions} from 'react-native-router-flux';
 
 import PageContainer from '../../common/PageContainer';
@@ -25,23 +24,10 @@ const tabData = [
 
 class DiscoveryTabPage extends Component {
 
-  constructor(props) {
-    super(props);
-    // Use this flag to avoid the bug about that `react-native-scrollable-tab-view` could call onChangeTab() twice
-    this.currentIndex = 0;
-
-    this.segmentedControlTitles = [];
-
-    // Configure ViewPager
-    const dataSource = new ViewPager.DataSource({
-      pageHasChanged: (p1, p2) => p1.slug !== p2.slug,
-    });
-
-    this.state = {
-      dataSource: dataSource.cloneWithPages(tabData)
-    };
-  }
-
+  segmentedControlTitles = [];
+  state = {
+    index: 0,
+  };
 
   componentWillMount() {
     this._initViews();
@@ -55,7 +41,7 @@ class DiscoveryTabPage extends Component {
   }
 
   onSegmentedControlButtonPress(index) {
-    this.viewPager.goToPage(index);
+    this.setState({ index });
   }
 
   _initViews() {
@@ -78,33 +64,23 @@ class DiscoveryTabPage extends Component {
                           }}
                           onPress={this.onSegmentedControlButtonPress.bind(this)}
                           style={styles.segmentedControl} />
-        <ViewPager
-          ref={(ref) => {
-            this.viewPager = ref;
-          }}
-          style={{ flex: 1 }}
-          dataSource={this.state.dataSource}
-          renderPage={this._renderPage.bind(this)}
-          onChangePage={this._onChangePage.bind(this)}
-          isLoop={false}
-          autoPlay={false}
-          renderPageIndicator={false}
-        />
+        {this.renderContent()}
       </PageContainer>
     );
   }
 
-  _renderPage(data, pageID) {
+  renderContent = () => {
+    return this.renderPage(tabData[this.state.index]);
+  };
+
+  renderPage(data) {
     return (
       <TopicList
         key={`tab_slug_${data.slug}`}
         slug={data.slug} />
     );
   }
 
-  _onChangePage(i) {
-    this.segmentedControl.setIndex(i);
-  }
 
   onNewTopicButtonPress = () => {
     Actions.newTopic({ nodeSlug: this.props.slug });