[iOS] Flatlist bug: update refreshing prop programmatically #25898

elkinjosetm · 2019-07-31T22:47:17Z

When changing the "refreshing" property programmatically on iOS, the activity indicator doesn't show automatically, the user needs to move the list a little bit down in order to see the activity indicator spinning.

It works perfectly fine on Android.

React Native version:

System:
    OS: macOS 10.14.6
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
    Memory: 38.77 MB / 16.00 GB
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 8.16.0 - /usr/local/bin/node
    Yarn: 1.17.3 - /usr/local/bin/yarn
    npm: 6.10.0 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 12.4, macOS 10.14, tvOS 12.4, watchOS 5.3
    Android SDK:
      API Levels: 28
      Build Tools: 28.0.3
      System Images: android-28 | Google APIs Intel x86 Atom_64
  IDEs:
    Android Studio: 3.4 AI-183.6156.11.34.5692245
    Xcode: 10.3/10G8 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.8.6 => 16.8.6
    react-native: 0.60.4 => 0.60.4
  npmGlobalPackages:
    react-native-cli: 2.0.1
    react-native-rename: 2.4.1

Steps To Reproduce

Render a FlatList with some content and a refreshing property
Programmatically set refreshing property to true

Describe what you expected to happen:

By updating the refreshing property programmatically, the list should automatically display the activity indicator.

Snack, code example, screenshot, or link to a repository:

render() {
	const {
		onPressJob,
		loading,
		jobs,
		onRefresh,
		onEndReached,
	} = this.props;

	return (
		<FlatList
			data={ jobs }
			refreshing={ loading }
			onRefresh={ onRefresh }
			onEndReached={ onEndReached }
			keyExtractor={ item => (item.Id) }
			renderItem={ ({ item, index }) => (
				<Grid container>
					<Grid
						item
						size={ 6 }
						spacingTop={ index === 0 ? 12 : 6 }
						spacingBottom={ index === (jobs.length - 1) ? 12 : 6 }
					>
						<JobAvailableCard
							item={ item }
							onPress={ onPressJob }
						/>
					</Grid>
				</Grid>
			) }
		/>
	);
}

The text was updated successfully, but these errors were encountered:

paul-paliychuk · 2019-08-13T11:09:11Z

Also having this issue

elkinjosetm · 2019-08-13T14:14:54Z

I'm still having this issue, I haven't been able to dig deeper.

salmanLee · 2019-08-17T08:19:10Z

still at 0.60

elkinjosetm · 2019-08-20T17:50:29Z

Still happening at 0.60.5

System:
    OS: macOS 10.14.6
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
    Memory: 57.15 MB / 16.00 GB
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 8.16.0 - /usr/local/bin/node
    Yarn: 1.17.3 - /usr/local/bin/yarn
    npm: 6.10.0 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 12.4, macOS 10.14, tvOS 12.4, watchOS 5.3
    Android SDK:
      API Levels: 28
      Build Tools: 28.0.3
      System Images: android-28 | Google APIs Intel x86 Atom_64
  IDEs:
    Android Studio: 3.4 AI-183.6156.11.34.5692245
    Xcode: 10.3/10G8 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.8.6 => 16.8.6
    react-native: 0.60.5 => 0.60.5
  npmGlobalPackages:
    react-native-cli: 2.0.1
    react-native-rename: 2.4.1

elkinjosetm · 2019-08-26T17:36:03Z

Has anybody found a solution for this issue?

elkinjosetm · 2019-09-30T22:25:55Z

Still happening on 0.61.1

System:
    OS: macOS Mojave 10.14.6
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
    Memory: 176.78 MB / 16.00 GB
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 10.16.3 - /usr/local/bin/node
    Yarn: 1.17.3 - /usr/local/bin/yarn
    npm: 6.9.0 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 13.0, DriverKit 19.0, macOS 10.15, tvOS 13.0, watchOS 6.0
    Android SDK:
      API Levels: 29
      Build Tools: 29.0.2
      System Images: android-29 | Google APIs Intel x86 Atom_64
  IDEs:
    Android Studio: 3.5 AI-191.8026.42.35.5791312
    Xcode: 11.0/11A420a - /usr/bin/xcodebuild
  npmPackages:
    react: 16.9.0 => 16.9.0
    react-native: 0.61.1 => 0.61.1
  npmGlobalPackages:
    react-native-cli: 2.0.1
    react-native-rename: 2.4.1

elkinjosetm · 2019-10-15T15:02:44Z

Still happening on 0.61.2

System:
    OS: macOS 10.15
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
    Memory: 328.49 MB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 10.16.3 - /usr/local/bin/node
    Yarn: 1.17.3 - /usr/local/bin/yarn
    npm: 6.9.0 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 13.0, DriverKit 19.0, macOS 10.15, tvOS 13.0, watchOS 6.0
    Android SDK:
      API Levels: 29
      Build Tools: 29.0.2
      System Images: android-29 | Google APIs Intel x86 Atom_64
  IDEs:
    Android Studio: 3.5 AI-191.8026.42.35.5900203
    Xcode: 11.0/11A420a - /usr/bin/xcodebuild
  npmPackages:
    react: 16.10.2 => 16.10.2
    react-native: 0.61.2 => 0.61.2
  npmGlobalPackages:
    react-native-cli: 2.0.1
    react-native-rename: 2.4.1

elkinjosetm · 2019-10-15T15:04:18Z

Has anybody found a solution for this problem?

Gektor0508 · 2019-10-23T09:16:06Z

Hi, I am on version 0.59.10 and the following around worked for me.

Not sure if it would work on the latest react-native version. But you could give it a try :)

Remove refreshing and onRefresh props from FlatList
Use a RefreshControl component and pass it as a prop to your FlatList like this:

      <FlatList
        data={jobs}
        // refreshing={loading}
        // onRefresh={onRefresh} Instead DO this
        refreshControl={<RefreshControl refreshing={loading} onRefresh={onRefresh} />}
        ...
        )}
      />

Profit (Hopefully)

danieloprado · 2019-10-28T15:35:24Z

Workaround: The first render refreshing prop should be false.

import React, { memo, useEffect, useMemo, useState } from 'react';
import { RefreshControl as RefreshControlCore, RefreshControlProps } from 'react-native';

const RefreshControl = memo(({ refreshing, ...props }: RefreshControlProps) => {
  const [firstRender, setFirstRender] = useState(true);

  useEffect(() => {
    const timeout = setTimeout(() => setFirstRender(false), 100);
    return () => clearTimeout(timeout);
  }, []);

  return (
    <RefreshControlCore
      refreshing={firstRender ? false : refreshing}
      {...props}
    />
  );
});

export default RefreshControl;

ragamufin · 2019-11-14T22:22:05Z

It seems like I've had to come up with some clugy workaround for this issue on iOS every couple of react-native releases and here I am again. None of the solutions above worked for me. You can set the contentInset={{ top: this.state.refreshing ? -60 : 0 }} on the FlatList and this works but there is no animation when the refresh control is hides.

The workaround that works for me is to (again, this is for iOS as android works fine out of the box):

Add the scrollToOverflowEnabled prop to the FlatList.
When the event to refresh fires call the following on a ref to the FlatList before setting refreshing to true:

this.flatListRef.scrollToOffset({ offset: -60, animated: false })
this.flatListRef.scrollToOffset({ offset: 0, animated: false })

ghsdh3409 · 2019-11-26T09:13:37Z

This issue could be resolved on this PR #27236).

i1990jain · 2019-12-18T10:17:44Z

This issue could be resolved on this PR #27236).

In the case of a FlatList this issue still persists on iOS. Works perfectly on android when using the refreshing and onRefresh props in this way.

<FlatList style={styles.list} 
data={this.state.list}
renderItem={this.renderItem}
horizontal={false}
numColumns={1}
keyExtractor={item => item.id.toString()}
refreshing={this.state.isRefreshing}
onRefresh={ () => null }
onScrollEndDrag={() => console.log("end")}
onScrollBeginDrag={() => console.log("start")}
onScrollToTop={() => console.log("top")}
onEndReachedThreshold={5}
onEndReached={() =>  console.log("onEndReached");}
            />

stale · 2020-03-17T11:46:32Z

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.

stale · 2020-03-24T11:55:18Z

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.

elkinjosetm added the Bug label Jul 31, 2019

react-native-bot added Component: FlatList Platform: iOS iOS applications. labels Jul 31, 2019

elkinjosetm mentioned this issue Aug 30, 2019

FlatList onRefresh not work #25821

Closed

ragamufin mentioned this issue Nov 14, 2019

RefreshControl does not work correctly on state change #24855

Closed

ghsdh3409 mentioned this issue Nov 26, 2019

Fix spinner is not shown on beginRefreshingProgrammatically on IOS #27236

Closed

stale bot added the Stale There has been a lack of activity on this issue and it may be closed soon. label Mar 17, 2020

stale bot closed this as completed Mar 24, 2020

facebook locked as resolved and limited conversation to collaborators Mar 25, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[iOS] Flatlist bug: update refreshing prop programmatically #25898

[iOS] Flatlist bug: update refreshing prop programmatically #25898

elkinjosetm commented Jul 31, 2019 •

edited

paul-paliychuk commented Aug 13, 2019

elkinjosetm commented Aug 13, 2019

salmanLee commented Aug 17, 2019

elkinjosetm commented Aug 20, 2019

elkinjosetm commented Aug 26, 2019

elkinjosetm commented Sep 30, 2019

elkinjosetm commented Oct 15, 2019

elkinjosetm commented Oct 15, 2019

Gektor0508 commented Oct 23, 2019

danieloprado commented Oct 28, 2019

ragamufin commented Nov 14, 2019

ghsdh3409 commented Nov 26, 2019

i1990jain commented Dec 18, 2019 •

edited

stale bot commented Mar 17, 2020

stale bot commented Mar 24, 2020

[iOS] Flatlist bug: update refreshing prop programmatically #25898

[iOS] Flatlist bug: update refreshing prop programmatically #25898

Comments

elkinjosetm commented Jul 31, 2019 • edited

Steps To Reproduce

paul-paliychuk commented Aug 13, 2019

elkinjosetm commented Aug 13, 2019

salmanLee commented Aug 17, 2019

elkinjosetm commented Aug 20, 2019

elkinjosetm commented Aug 26, 2019

elkinjosetm commented Sep 30, 2019

elkinjosetm commented Oct 15, 2019

elkinjosetm commented Oct 15, 2019

Gektor0508 commented Oct 23, 2019

danieloprado commented Oct 28, 2019

ragamufin commented Nov 14, 2019

ghsdh3409 commented Nov 26, 2019

i1990jain commented Dec 18, 2019 • edited

stale bot commented Mar 17, 2020

stale bot commented Mar 24, 2020

elkinjosetm commented Jul 31, 2019 •

edited

i1990jain commented Dec 18, 2019 •

edited