RefreshControl does not work correctly on state change

[gzzo]

React Native version:
0.59.8

Steps To Reproduce

1. Pull down on list, refresh control appears (as it should)
2. Press button on top of list to load data, refresh control does not appear even though refreshing is true. You can also this is true by pressing the button first, the pulling down, then finally pressing the button again.

Describe what you expected to happen: The refresh control should appear whenever refreshing is true

Snack, code example, or link to a repository: https://snack.expo.io/ByZXxOuhV

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[gzzo]

This is still an issue

[danieloprado]

Problem stills on 0.60.4

[gbalduzzi]

Can confirm, it is really annoying because there are no actual workarounds if you need to:

• Keep pull to refresh functionality
• Show the loading indicator when the refresh is triggered programmatically (e.g. the user searched something)

I noticed it only happens on iOS (I tested on Android 9.0.0 and it works properly)

[xfyre]

+1

Android works properly, while iOS does not. Somehow refreshing state doesn't keep on the screen while app is reloading and resets immediately.

[ilkka-yli]

+1

I have this issue too. RN version 0.59.8.

[SergioCastro15]

+1
0.60.4, it happens only in iOS with the controlled prop

[patrickleemsantos]

+1 I also experience in RN 0.59.8 on IOS only

[zyc67]

+1 ios
when I use react-navigation to customize the header, and set the navigation height by headerStyle, the problem appear, if I remove the header it's ok.

[plimerence]

same issue ,why so much bugs in basic component🙃🙃🙃🙃🙃🙃🙃🙃🙃🙃🙃🙃🙃🙃🙃🙃🙃🙃🙃🙃🙃🙃🙃🙃

[jmkitavi]

+1
RN 0.60.4, Same issue.
Doesn't work on iOS but works perfectly on Android.

[jmkitavi]

#24530

[gbalduzzi]

I had to use a very hacky and very wrong workaround to make it work.

Basically, I noticed that it worked the first time (usually while loading the initial data at screen startup) but stopped working after that. So, I force the component (a FlatList in my case) to re-render completely after each successful refreshcontrol appearance, by changing its key attribute.

Honestly, it sucks, and it could not be feasible on lists with a lot of components to re render, but in my case it works well enough.

export default class extends React.Component {
  flastListKey = 0

  constructor(props) {
    super(props)
    this.state = {
      loading: false
    }
  }

  render () {
    <FlatList
      key={this.flatListKey}
      refreshing={this.state.loading}
      onRefresh={() => this.refreshData()}
      {... other props}
      />
  }

  refreshData = () => {
    this.setLoading(true)

    // DO stuff

    setTimeout(() => {
      this.setLoading(false)
    }, 2000)
  }

  setLoading = (loading: boolean) => {
    let shouldResetFlatlist = this.state.loading && !loading

    this.setState(
      {
        loading: loading,
      },
      () => {
        if (shouldResetFlatlist) {
          this.resetFlatlist()
        }
      },
    )
  }

  resetFlatlist = () => {
    if (Platform.OS === 'ios') {
      this.flatListKey = Math.random() * 1000
      setTimeout(() => {
        this.forceUpdate()
      }, 250)
    }
  }
}

The timeout is necessary to wait for the RefreshControl animation to finish

[jlariza]

+1
RN 0.61.2 failing as well. It doesn't work on iOS but works perfectly on Android.

[daysv]

+1
RN 0.61.2, Same issue.
thanks @gbalduzzi

[swain]

+1
Still seeing this issue!

[ragamufin]

See my comment here for a possible workaround

[IgnorancePulls]

Opened Pr ^

[rdinizz]

If anyone is still having problems with this:

I found a workaround that is just enabling the bounce.

I had bounces={false} and after removing it, it's working on iOS now(Android was already working)

But in my case, the loading didn't appear not even once.

[obiwankenoobi]

still an issue with v0.61.4

[emagnier]

still an issue on v0.62.2 when <RefreshControl /> is enabled (with local state) from a useEffect function.

[hackrx]

Hey, guys, I am facing the same issue with android, please have a look at this code, don't know why it is not working

  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      lastLoadDate: null,
      onPullRefresh: false,
      postArray: [],
      allLoadDone: false,
      limit: 5,
      refreshing: false,
    };
    this.onEndReachedCalledDuringMomentum = false;
  }

componentDidMount() {
 console.log(
   'Component did mount Home.js retrieve data called',
   this.state.postArray,
 );
 this.retrieveData();
} 

 <View style={styles.listView}>
          <FlatList
            //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) {
                // if (allLoadDone) {
                //   noRetrieve();
                // } else {
                this.retrieveMore();
                // }
              }
            }}
            onMomentumScrollBegin={() => {
              this.onEndReachedCalledDuringMomentum = false;
            }}
            refreshControl={
              <RefreshControl
                refreshing={this.state.onPullRefresh}
                colors={[PrimaryColor, SecondaryColor, 'white']}
                progressBackgroundColor="pink"
                onRefresh={this.retrieveData}
                enabled={true}
                
              />
            }
            // How Close To The End Of List Until Next Data Request Is Made
            onEndReachedThreshold={0.1}
            showsVerticalScrollIndicator={false} //hides the vertical scroll
            refreshing={this.state.refreshing}
          />

[fukemy]

same problem here, refreshControl does not show first time in useEffect even i set showState to true

refreshControl={
          <RefreshControl
            tintColor={theme.mainOrangeColor}
            refreshing={isRefreshing}
            onRefresh={() => {
              console.log('onrefresh')
              skip = 0
              _getRoomList()
            }}
          /> 
        }

[madebyrogal]

The issue is still there in iOS.
RN ver: 0.71.8

[Danushka50]

Added a solution but not the perfect one.

#37308 (comment)

[fukemy]

I am trying to implement release to refresh, not pull to refresh but not working

[fswienty]

The issue still persists for me on Android with RN 0.72.6. When I set data={[]} in my flatlist, the refresh control works as it should, but when attempting to show data fetched via tanstack query, the refresh control will not show anymore after the list is populated.*

EDIT: It turned out I screwed up my imports and accidentally used the FlatList from react-native-gesture-handler instead of the one from react-native. The FlatList from react-native works perfectly fine. So if you have this issue, check your imports, maybe the solution is as simple as that.

I'm going to look for a dunce cap now.

[dcdavidheisnam]

It's still happening on iOS

[thianphat]

Happening to me as well

[alimohsinz]

i have fixed it using below workaround but i dont even know why its working.
Please also explain me if you got it.

Add ListEmptyComponent and pass loading prop to it

 <FlatList
        style={{flex: 1}}
        data={artistList}
        renderItem={({item}) => <ArtistCard item={item} />}
        refreshing={loading}
        refreshControl={
          <RefreshControl
            colors={['black']}
            tintColor="white"
            refreshing={loading}
            onRefresh={getArtistsList}
          />
        }
        ListEmptyComponent={<ListEmptyCompnent loader={loading} />}
        keyExtractor={item => `${item._id}`}
        contentContainerStyle={{
          paddingTop: 20,
        }}
      />

in ListEmptyCompnent if loading is true show a string with spaces inside

    const ListEmptyCompnent = ({loader}: {loader: boolean}) => {
 const {colors, fontFamily, fontSize} = useTheme() as any;

 return (
   <View style={{justifyContent: 'center', alignItems: 'center'}}>
     {loader ? (
       // to fix loader not showing on first render
       <Text
         style={{
           color: colors.bodyText,
           fontSize: fontSize.bodyTextFont,
           fontFamily: fontFamily.mainheading,
         }}>
         {'           '}
       </Text>
     ) : (
       <Text
         style={{
           color: colors.bodyText,
           fontSize: fontSize.bodyTextFont,
           fontFamily: fontFamily.mainheading,
         }}>
         No Item to Display
       </Text>
     )}
   </View>
 );
};