React-native-tab-view: RefreshControl component refresh may not work

[lucaslz2020]

Expected behaviour

RefreshControl component refresh may work

Actual behaviour

RefreshControl component refresh may not work, ScrollView、 FlatList, will Pull-down failure, stuck interface.

Code sample, screenshots

<TabViewAnimated
          style={styles.container}
          navigationState={this.props.primaryNavigationState}
          renderScene={this.props.renderScene}
          renderHeader={this._renderSecondaryHeader}
          onIndexChange={this.props.onPrimaryIndexChange}
          initialLayout={initialLayout}
          animationEnabled={false}
        />

  _renderScene = (route) => {
    const { dataList, flatListHeight: height } = this.state;
    const isShowEmpty = dataList && dataList.length === 0;
    return (
      <FlatList
        key={route.key}
        style={{ flex: 1, backgroundColor: Background.content }}
        onLayout={this._onLayout}
        data={dataList}
        keyExtractor={(item, index) => index}
        initialNumToRender={15}
        renderItem={this._renderItem}
        ItemSeparatorComponent={(info) => <SeparatorComponent />}
        ListEmptyComponent={isShowEmpty ?
          <ListEmptyComponent containerStyle={{ height }} /> : null}
        refreshControl={this._renderRefreshControl()}
        onEndReachedThreshold={0}
        onEndReached={this._onEndReached}
        ListFooterComponent={this._renderFooter()}
      />
    )
  };

_renderRefreshControl() {
    return (
      <RefreshControl
        refreshing={this.state.refreshing}
        onRefresh={this._onRefresh}
        title="Loading..."
      />
    );
  };

Version

• react-native-tab-view 0.0.74
• react-native 0.51.0,

[markedby]

I also faced this problem. FlatList's RefreshControl component doesn't work on pull-down gesture. Is there any workaround?

• react-native-tab-view 0.0.74
• react-native 0.51.0,

[flasco]

I also have this problem, pull down or up when it in highest or lowest position, it can't pull. it have some solution?

react-native-tab-view 0.0.77
react-native 0.54.4

[EliSadaka]

This issue persists for me on Android when I use any pager except for TabViewPagerPan. It seems like when I try to pull down to refresh the FlatList, it registers the gesture as attempting to scroll the tab view instead which cancels the FlatList pull-down gesture. On iOS though it works fine on any pager.

[pribeh]

If anyone that has refreshcontrol working right on android could share their code that might be helpful.

[AndrePech]

@EliSadaka can you share your working code? I am a little confused on how to use a Pager. Thank you

[martinezguillaume]

Hi ! 🙂
For me, I'm using PagerExperimental with react-native-gesture-handler and it works great on iOS. On Android, I'm just using the one by default for performance (PagerAndroid):

import { Platform } from 'react-native'
import { TabView, PagerExperimental } from 'react-native-tab-view'
import * as GestureHandler from 'react-native-gesture-handler'

<TabView
  // ...
  renderPager={
    Platform.OS === 'android' ? undefined :
      props => <PagerExperimental {...props} GestureHandler={GestureHandler} />
  }
/>

[calintamas]

This might be related to situations where you wrap the FlatList in a View along additional components. Try rendering just the FlatList and see if it works (worked in my case).

[derekbar90]

This is due to the react-native-gesture-handler and the use of refs and waitFor on the exported ScrollView or FlatList from the gesture-handler library. Once those are exposed then you'll be able to have a scroll view etc inside of tab view. Most of these functions haven't been exported yet but im working on a branch on my fork of native-tab-view to expose these

[satya164]

Hey, I just released a new alpha 2.0.0-alpha.0 of the library. It's rewritten using react-native-gesture-handler and react-native-reanimated addresses a many platform specific bugs and performance problems. The documentation is updated as well.

Please try the new version and see if it addresses your issue. If not, please open a new issue following the issue template.

[karthikeyansundaram2]

I am using react-native-tab-view 2.3.0 but I can't do both refresh and scroll because scroll view is in gesture-handler and the refresh control is in react-native

help me to solve this problem