Skip to content

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

Closed
Closed
[iOS] Flatlist bug: update refreshing prop programmatically#25898
Labels
BugComponent: FlatListPlatform: iOSiOS applications.StaleThere has been a lack of activity on this issue and it may be closed soon.

Description

@elkinjosetm
elkinjosetm
opened on Jul 31, 2019

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

Activity

  1. elkinjosetm
    added
    Bug
    on Jul 31, 2019
  2. react-native-bot
    added
    Component: FlatList
    Platform: iOSiOS applications.
    on Jul 31, 2019

  3. paul-paliychuk commented on Aug 13, 2019

    @paul-paliychuk
    paul-paliychuk
    on Aug 13, 2019

    Also having this issue

  4. elkinjosetm commented on Aug 13, 2019

    @elkinjosetm
    elkinjosetm
    on Aug 13, 2019
    Author

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

  5. salmanLee commented on Aug 17, 2019

    @salmanLee
    salmanLee
    on Aug 17, 2019

    still at 0.60

  6. elkinjosetm commented on Aug 20, 2019

    @elkinjosetm
    elkinjosetm
    on Aug 20, 2019
    Author

    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

  7. elkinjosetm commented on Aug 26, 2019

    @elkinjosetm
    elkinjosetm
    on Aug 26, 2019
    Author

    Has anybody found a solution for this issue?

  8. elkinjosetm commented on Sep 30, 2019

    @elkinjosetm
    elkinjosetm
    on Sep 30, 2019
    Author

    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

  9. elkinjosetm commented on Oct 15, 2019

    @elkinjosetm
    elkinjosetm
    on Oct 15, 2019
    Author

    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

  10. elkinjosetm commented on Oct 15, 2019

    @elkinjosetm
    elkinjosetm
    on Oct 15, 2019
    Author

    Has anybody found a solution for this problem?

  11. Gektor0508 commented on Oct 23, 2019

    @Gektor0508
    Gektor0508
    on Oct 23, 2019

    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} />}
        ...
        )}
      />
    1. Profit (Hopefully)

  12. danieloprado commented on Oct 28, 2019

    @danieloprado
    danieloprado
    on Oct 28, 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;

  13. ragamufin commented on Nov 14, 2019

    @ragamufin
    ragamufin
    on Nov 14, 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):

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

  14. ghsdh3409 commented on Nov 26, 2019

    @ghsdh3409
    ghsdh3409
    on Nov 26, 2019

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

  15. i1990jain commented on Dec 18, 2019

    @i1990jain
    i1990jain
    on Dec 18, 2019

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

  16. stale commented on Mar 17, 2020

    @stale
    staleBot
    on Mar 17, 2020

    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.

  17. stale
    added
    StaleThere has been a lack of activity on this issue and it may be closed soon.
    on Mar 17, 2020

  18. stale commented on Mar 24, 2020

    @stale
    staleBot
    on Mar 24, 2020

    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.

  19. stale
    closed this as completedon Mar 24, 2020
  20. react
    locked as resolved and limited conversation to collaborators on Mar 25, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    BugComponent: FlatListPlatform: iOSiOS applications.StaleThere has been a lack of activity on this issue and it may be closed soon.

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions