react-native: [iOS] Flatlist bug: update refreshing prop programmatically

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>
			) }
		/>
	);
}

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 11
Comments: 15

Most upvoted comments

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)

Gektor0508 on Oct 23, 2019

This issue could be resolved on this PR https://github.com/facebook/react-native/pull/27236).

ghsdh3409 on Nov 26, 2019

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

ragamufin on Nov 14, 2019

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;

danieloprado on Oct 28, 2019