[iOS] Flatlist bug: update refreshing prop programmatically

[elkinjosetm]

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

1. Render a FlatList with some content and a refreshing property
2. 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>
			) }
		/>
	);
}

[paul-paliychuk]

Also having this issue

[elkinjosetm]

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

[salmanLee]

still at 0.60

[elkinjosetm]

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]

Has anybody found a solution for this issue?

[elkinjosetm]

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]

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]

Has anybody found a solution for this problem?

[Gektor0508]

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 :)

1. Remove refreshing and onRefresh props from FlatList
2. 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} />}
        ...
        )}
      />

3. Profit (Hopefully)

[danieloprado]

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]

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):

1. Add the scrollToOverflowEnabled prop to the FlatList.

2. 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 })