React-native-tab-view: Refresh Control not working

[karthikeyansundaram2]

Bug

The scroll view is present inside the tab View where I can't do both only one work either scroll or refresh

Environment info

react-native:0.56
react-native-tab-view:2.3.0
react-native-gesture-handler:1.0.5

React native info output:

No error 
I cannot able to do  both

Library version: 2.3.0

Steps To Reproduce

Create a Tab View
on one tab create a scroll view with refresh control
Scroll view from react-native cannot be used
Scroll view from react-native-gesture-handler can be used
So that scrolling can be done but refresh control can't be achieved

Describe what you expected to happen:

1. Scroll the screen

2. Pull down to refresh the screen

Reproducible sample code

import * as React from 'react';
import { View, StyleSheet, Dimensions, SafeAreaView } from 'react-native';
import { TabView, SceneMap, TabBar } from 'react-native-tab-view';
import HomeScreen from "./HomeScreen";
import SettingsScreen from "./SettingsScreen";

export default class App extends React.Component {
state = {
index: 0,
routes: [
{ key: 'SuperStar', title: 'SuperStar' },
{ key: 'Head2Head', title: 'Head2Head' },
{ key: 'Champions', title: 'Champions' },
{ key: 'Battles', title: 'Battles' }
],
};
onSwipeStart(event) {
alert('Start swiping...', event);
}

tabPress(props) {
alert(JSON.stringify(props.route.key))
}

onSwipeEnd(props) {
alert("end swipping")
// alert(JSON.stringify(props))
}
_renderTabBar = props => (
{...props}
scrollEnabled
onTabPress={this.tabPress}
/>
);

render() {
return (

      navigationState={this.state}
      renderScene={SceneMap({
        SuperStar: HomeScreen,
        Head2Head: SettingsScreen,
        Champions: HomeScreen,
        Battles: SettingsScreen
      })}
      renderTabBar={this._renderTabBar}
      animationEnabled={true}
      swipeEnabled={true}
      onIndexChange={index => this.setState({ index })}
      initialLayout={{ width: Dimensions.get('window').width }}
      onSwipeStart={this.onSwipeStart}
      onSwipeEnd={this.onSwipeEnd}

    />
    <button onPress={() => this.onClick}></button>
  </SafeAreaView>
);

}
}

const styles = StyleSheet.create({

});

in the home screen

import React, { Component } from "react";
import {
View,
Text,
StyleSheet
} from "react-native";
class HomeScreen extends React.PureComponent {
constructor(props){
super(props);
this.state={
fetching:false
}
}
onRefresh() {
this.setState({ isFetching: true });
//API Call
}
render() {

    return (
        <View style={styles.container}>
       <ScrollView
      style={styles.leaguesList}
      showsVerticalScrollIndicator={false}
      refreshControl={<RefreshControl
        style={{ backgroundColor: 'transparent' }}
        refreshing={this.state.isFetching}
        onRefresh={() => { this.onRefresh(); }} />}
    >
            <Text>Home</Text>

);
}
}
export default HomeScreen;

const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center'
}
});

[karthikeyansundaram2]

Any help??

[tahir-jamil]

any update in that isssue?

[hamidfzm]

@tahir-jamil Are you using react-navigation?

[karthikeyansundaram2]

For tabs, react-native-tab-view is used
and for the navigator, react-navigation is used
The above issue is for react-native-tab-view

[hamidfzm]

@karthikeyansundaram2 I had the same problem. I solved this issue by importing FlastList and ScrollView from react-navigation instead of react-native and using SafeAreaView in my root container view.

[karthikeyansundaram2]

I also tried that but Flatlist is not visible in tab view

[hamidfzm]

🤔🤔🤔 I guess this is another issue. This issue is about RefreshControl assuming you can seeScrollView or FlatList content but not able to call refresh action.

[github-actions[bot]]

Hello 👋, this issue has been open for more than 2 months with no activity on it. If the issue is still present in the latest version, please leave a comment within 7 days to keep it open, otherwise it will be closed automatically. If you found a solution on workaround for the issue, please comment here for others to find. If this issue is critical for you, please consider sending a pull request to fix the issue.

[slavikdenis]

Same issue, but only on iOS.

[XI803-ManikMahendru]

for iOS not working, please help

[hackrx]

for iOS not working, please help

Hey can you please help me with android, because I am working on android and it is not working
Here is my code
` //data

        style={{width: '100%'}}
        data={this.state.postArray}
        extraData={this.state}
        //renderItems
        renderItem={({item}) => (
          <Post
            userName={item.userName}
            userPhoto={item.userPhotoURL}
            imageData={item.postImageURL}
            likes={item.likes}
            // id={item.}
            title={item.title}
            hashtags={item.hashtags}
            resizeMode={item.style}
            timeStamp={item.createdAt}
            navigation={this.props.navigation}
          />
        )}
        //Item Key
        keyExtractor={(item, index) => String(index)}
        //Footer loader
        ListFooterComponent={this.renderFooter}
        //on end reached

        onEndReached={() => {
          if (!this.onEndReachedCalledDuringMomentum) {

            this.retrieveMore();

          }
        }}
        onMomentumScrollBegin={() => {
          this.onEndReachedCalledDuringMomentum = false;
        }}
        refreshControl={
          <RefreshControl
            refreshing={this.state.onPullRefresh}
            colors={[PrimaryColor, SecondaryColor, 'white']}
            progressBackgroundColor="pink"
            onRefresh={this.retrieveData}
            enabled={true}

          />
        }

        onEndReachedThreshold={0.1}
        showsVerticalScrollIndicator={false} //hides the vertical scroll
        refreshing={this.state.refreshing}
      />`

I am using react navigation 5 and a class component

[RogerParis]

Still not working for iOS. Any solution?

[tuledev]

Any workaround for iOS?

[Aryk]

We need to be able to set refreshControl on the ScrollView (in the case of ScrollPager), which I'm using for iOS. That will solve the problem for people who use ScrollPager in iOS (like me).

return children({
      position: this.relativePosition,
      addListener: this.addListener,
      removeListener: this.removeListener,
      jumpTo: this.jumpTo,
      render: children => /*#__PURE__*/React.createElement(Animated.ScrollView, {
        // WE NEED TO ADD A WAY TO SET THIS!!!
        refreshControl: <RefreshControl refreshing={false} onRefresh={() => console.log("d")} />,
        pagingEnabled: true,
        directionalLockEnabled: true,
        keyboardDismissMode: "on-drag",
        keyboardShouldPersistTaps: "always",
        overScrollMode: "never",
        scrollToOverflowEnabled: true,
        scrollEnabled: this.props.swipeEnabled,
        automaticallyAdjustContentInsets: false,
        bounces: overscroll,
        scrollsToTop: false,
        showsHorizontalScrollIndicator: false,
        scrollEventThrottle: 1,
        onScroll: this.onScroll,
        onScrollBeginDrag: handleSwipeStart,
        onScrollEndDrag: handleSwipeEnd,
        onMomentumScrollEnd: this.onScroll,
        contentOffset: this.initialOffset,
        style: styles.container,
        contentContainerStyle: layout.width ? {
          flexDirection: 'row',
          width: layout.width * navigationState.routes.length,
          flex: 1
        } : null,
        ref: this.scrollViewRef
      }, children, /*#__PURE__*/React.createElement(Animated.Code, {
        exec: onChange(this.relativePosition, cond(eq(round(this.relativePosition), this.relativePosition), [call([this.relativePosition], ([relativePosition]) => {
          if (this.wasTouched) {
            onIndexChange(relativePosition);
            this.wasTouched = false;
          }
        })]))
      }))
    });

[Aryk]

Alright guys...think I got it...

  const lockScrollViewVertically = (ref) => {
      ref?.scrollViewRef.current.setNativeProps({alwaysBounceVertical: false});
  };

then...

<TabView
        navigationState={{ index, routes }}
        renderScene={renderScene}
        onIndexChange={setIndex}
        initialLayout={baseStyles.screenWidth}
        renderPager={<ScrollPager ref={lockScrollViewVertically} { ...props } />}
      />

Enjoy!

Maybe someone add the ability to pass through props for the Animated.ScrollView inside ScrollPager?

[ShahiLalit]

I also had the same issue, and for me, it got resolved when I imported the FlatList from 'react-native' instead of 'react-native-gesture-handler'.
Please check if you are importing the FlatList of 'react-native' or not.