React-native-tab-view: [Android] scroll stopped working

[sibelius]

Scroll works fine until I go to another screen, and then I go back to the tab screen.

The scroll do not finish, it keep in the middle of the transition, only on Android

I've tried with 0.0.62 and with the latest 0.0.65.

Some of my code:

state = {
    tabs: {
      routes: [
        {
          key: 'key1',
          title: 'title1',
        },
        {
          key: 'key2',
          title: 'title2',
        },
      ],
      loaded: false,
      index: 0,
    },
  };

renderTabHeader = props => {
    return (
      <TabBar
        {...props}
        renderLabel={({ route }) => <Text style={styles.tabLabel}>{route.title}</Text>}
        style={styles.tabBarTop}
        indicatorStyle={styles.tabIndicator}
        scrollEnabled={true}
      />
    );
  };

<TabViewAnimated
        style={styles.tabContainer}
        navigationState={this.state.tabs}
        renderScene={this.renderScene}
        renderHeader={this.renderTabHeader}
        onRequestChangeTab={this.handleChangeTab}
        lazy={true}
        onChangePosition={Keyboard.dismiss}
      />

I'm not using SceneMap yet, I'll try with that

[sibelius]

_renderPager = props => {
    return <TabViewPagerPan {...props} />;
  };

solved my problem on Android

[satya164]

Related https://github.com/facebook/react-native/issues/13463

[kelset]

@sibelius can you explain a bit more how that method solved the problem for you? Did you pass _renderPager to TabViewAnimated?

[sibelius]

yes

<TabViewAnimated
        style={styles.tabContainer}
        navigationState={this.state.tabs}
        renderScene={this.renderScene}
        renderHeader={this.renderTabHeader}
        onRequestChangeTab={this.handleChangeTab}
        lazy={true}
        onChangePosition={Keyboard.dismiss}
        renderPager={this._renderPager}
      />

[kelset]

Thanks for the clarification; follow up question, would this implementation of the renderPager be more appropriate?

  _renderPager = (props) => {
   return (Platform.OS === 'ios') ? <TabViewPagerScroll {...props} /> : <TabViewPagerPan {...props} />
  }

Found here.

[sibelius]

React Navigation uses only TabViewPagerPan

https://github.com/react-community/react-navigation/blob/30ca3c1f80617abc28fdd71f0b37d4f62b3e388a/src/views/TabView/TabView.js#L132

I think @satya164 is the best person to answer this

[satya164]

@sibelius React Navigation uses TabViewPagerPan only when swipe and animations are disabled if you look inside render

TabViewPagerPan - A custom implementation using pan responders and animated API, since gestures are JS based, this will have the worst perf, least buggy though
TabViewPagerScroll - Uses ScrollView behind the scenes. Will have better performance, though there are missing features and some weirdness on Android
TabViewPagerAndroid - Uses ViewPagerAndroid behind the scenes. compatible with only Android. Though it seems to be quite buggy

[kelset]

Thanks for the clarification, so I should use TabViewPagerPan for both probably, for a more stable implementation.

Btw I think that I'm having a quite similar issue with the master branch of react-navigation, I'll investigate a bit more on that.