Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

iOS: Regression in refreshControl on RN 0.64 #30912

Closed
kamui545 opened this issue Feb 8, 2021 · 2 comments
Closed

iOS: Regression in refreshControl on RN 0.64 #30912

kamui545 opened this issue Feb 8, 2021 · 2 comments
Labels
Needs: Triage 🔍 Resolution: Locked This issue was locked by the bot.

Comments

@kamui545
Copy link

kamui545 commented Feb 8, 2021

Description

Hello everyone, I might have found a regression on RN 0.64 (I tested every RC, including latest RC3).
The refresh control of every FlatList from my app is randomly showing up "frozen".

This issue seems to be similar to #7976 which was fixed in the following PR #9249.

Sadly, the fix was removed in #28236 and merged to RN 0.64.

I am experiencing this bug in iOS 14, even though in the fix it mentions:
TODO: Remove when updating to use iOS 10 refreshControl UIScrollView prop.

React Native version:

System:
    OS: macOS 11.2
    CPU: (8) x64 Intel(R) Core(TM) i7-8569U CPU @ 2.80GHz
    Memory: 83.05 MB / 16.00 GB
    Shell: 3.1.2 - /usr/local/bin/fish
  Binaries:
    Node: 14.15.4 - /usr/local/bin/node
    Yarn: Not Found
    npm: 6.14.10 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.10.1 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 14.4, DriverKit 20.2, macOS 11.1, tvOS 14.3, watchOS 7.2
    Android SDK:
      API Levels: 29, 30
      Build Tools: 28.0.3, 29.0.2, 29.0.3, 30.0.3
      System Images: android-30 | Google APIs Intel x86 Atom
      Android NDK: Not Found
  IDEs:
    Android Studio: 4.1 AI-201.8743.12.41.6953283
    Xcode: 12.4/12D4e - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_282 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: ^17.0.1 => 17.0.1 
    react-native: ^0.64.0-rc.3 => 0.64.0-rc.3 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps To Reproduce

  1. Display screen with FlatList
  2. Navigate to other screen
  3. Go back to the previous screen with FlatList, you should see the refresh control.

If you start scrolling or pull to refresh, it then disappears.
I am not doing anything fancy and don't have any custom refreshControl property on my FlatList.
Even with refreshing={false} forced, the refreshControl will show up.

However, I noticed that if I use a refreshControl with a transparent background, the issue is fixed:

refreshControl={
  <RefreshControl
    refreshing={refreshing}
    onRefresh={onRefresh}
    style={{
      backgroundColor : 'transparent', // <---- this somehow fix the issue
    }}
  />
}

Expected Results

Not having any refresh control displayed if it is not refreshing.

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

I will try to make a snack / repo to reproduce the issue asap.
In the meantime here is a video of the issue:

Screen.Recording.2021-02-08.at.14.56.23.mov
@swrobel
Copy link
Contributor

swrobel commented Feb 10, 2021

Setting backgroundColor : 'transparent' did not fix the issue for me, however restoring the following code removed in #28236 did indeed fix it:

  // Fix for bug #7976
  // TODO: Remove when updating to use iOS 10 refreshControl UIScrollView prop.
  if (self.backgroundColor == nil) {
    self.backgroundColor = [UIColor clearColor];
  }

swrobel added a commit to swrobel/react-native that referenced this issue Feb 10, 2021
swrobel added a commit to swrobel/react-native that referenced this issue Mar 9, 2021
swrobel added a commit to swrobel/react-native that referenced this issue Mar 10, 2021
Fixes facebook#30912

Reverts facebook#31024 which was not shown to fix the issue
@kamui545
Copy link
Author

Just wanted to confirm that the issue seems to be fixed on my end with RN 0.64 stable.

@swrobel Thanks for taking care of this

@facebook facebook locked as resolved and limited conversation to collaborators Mar 11, 2022
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label Mar 11, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Needs: Triage 🔍 Resolution: Locked This issue was locked by the bot.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants