RefreshControl ignores style prop

[plneple]

Description

This is relevant to our project because we have a top section view that must maintain its background color during the ScrollView bounce effect. To achieve this, we layer an absolutely positioned view with the same background color beneath the ScrollView, and elevate the RefreshControl above it using zIndex. This approach works as expected in the old architecture, but it no longer functions correctly after upgrading to the new architecture.

The issue is resolved with the following patch, which addresses the zIndex behavior specifically
patch.patch

Steps to reproduce

1. Open the Snack
2. RefreshControl is under the view

React Native Version

0.79.3

Affected Platforms

Runtime - iOS

Areas

Fabric - The New Renderer

Output of npx @react-native-community/cli info

System:
 OS: macOS 15.5
 CPU: (10) arm64 Apple M4
 Memory: 156.75 MB / 16.00 GB
 Shell:
 version: "5.9"
 path: /bin/zsh
Binaries:
 Node:
 version: 20.17.0
 path: ~/.nvm/versions/node/v20.17.0/bin/node
 Yarn:
 version: 1.22.22
 path: ~/.nvm/versions/node/v20.17.0/bin/yarn
 npm:
 version: 11.2.0
 path: ~/.nvm/versions/node/v20.17.0/bin/npm
 Watchman:
 version: 2025.02.17.00
 path: /opt/homebrew/bin/watchman
Managers:
 CocoaPods: Not Found
SDKs:
 iOS SDK:
 Platforms:
 - DriverKit 24.5
 - iOS 18.5
 - macOS 15.5
 - tvOS 18.5
 - visionOS 2.5
 - watchOS 11.5
 Android SDK: Not Found
IDEs:
 Android Studio: 2024.3 AI-243.25659.59.2432.13423653
 Xcode:
 version: 16.4/16F6
 path: /usr/bin/xcodebuild
Languages:
 Java:
 version: 17.0.14
 path: /usr/bin/javac
 Ruby:
 version: 2.7.6
 path: /Users/u/.rvm/rubies/ruby-2.7.6/bin/ruby
npmPackages:
 "@react-native-community/cli":
 installed: 18.0.0
 wanted: 18.0.0
 react:
 installed: 19.0.0
 wanted: 19.0.0
 react-native:
 installed: 0.79.3
 wanted: 0.79.3
 react-native-macos: Not Found
npmGlobalPackages:
 "*react-native*": Not Found
Android:
 hermesEnabled: true
 newArchEnabled: true
iOS:
 hermesEnabled: true
 newArchEnabled: true

Stacktrace or Logs

not relevant

MANDATORY Reproducer

https://snack.expo.dev/@lsbbdbxnzhsbdb/refreshcontrol-zindex-issue

Screenshots and Videos

https://github.com/user-attachments/assets/2fc991d6-5ba4-40c3-bb47-56eaeb74e88e
https://github.com/user-attachments/assets/7cfa800c-b4c7-415e-b315-f8df8ad5ad17

[cipolleschi]

Hi @plneple, thanks for the issue.
Was it working in 0.78 or previous versions of React Native with the New Architecture?

I remember landing a couple of fixes for RCTScrollComponentView but they are not recent. I'm trying to understand whether this is a regression or not.

[plneple]

Hey @cipolleschi,

I'm currently migrating the app to the New Architecture. It's definitely working on the old architecture v0.77.

It looks like the bug comes from how RCTPullToRefreshViewComponentView is built. It seems to be two views, and the styles that should apply by default aren't actually hitting the one being rendered. I think that's the core of the problem.

Happy to check older New Architecture versions if that would help you out, but it will take me some time to get back to you (I am not sure how to run expo snack on previous versions of react-native, so I would have to setup a project locally)

[cipolleschi]

I tried to disable the New Architecture and the PulltoRefresh was visible but the top view is still red... 🤔 which I assume is not the expectation... you second video shows that the view on top is blue...

I think that there is something else going on, also. It renders differently:

New Arch (first render)	New Arch (after pulling)	Old Arch (first render)	Old Arch (after pulling)

Also, in the new architecture, the refresh control doesn't move, while in the new architecture it does.

Old Architecture	New Architecture

[Bram-dc]

The refresh control is currently really buggy. I would love to see some work done on it. In the new arch it also jumps around for me. For me most bugs occurred after upgrading from 0.76

[saadi-ninjasCode]

In RN 0.80, colors are not applied on RefreshControl

[plneple]

Hi @cipolleschi,

Apologies for the delayed response.

It looks like the videos I initially shared may have caused some confusion. To clarify, both recordings were taken using the new architecture.

• The first video demonstrates what happens when a “top view” is added to prevent the background from changing during the bounce. This view ends up covering the RefreshControl, and there doesn't appear to be a way to place it above it.
• The second video shows the result without that view (still using the new architecture). The purpose was to confirm that the issue is related to styling and not due to the RefreshControl failing to render. In hindsight, using opacity might have illustrated this more clearly.

From your recordings, I can see the issue is reproducible on your end as well, so I won't spend additional time identifying the exact react-native version where the regression was introduced.

Thanks again for taking a look!

[fe-dudu]

In my app (RN 0.80), the refresh control does not display properly in iOS dark mode.
When will this issue be fixed?

[cipolleschi]

All issues should have been solved by these commits:

• 09daad2
• 21b93d8
• 27217e8

and they will be released in 0.82.

We might consider them to be picked in previous version of React Native if you can try to apply those pathces into your apps and you verify that they work.

If that happens, you can open a pick request here

[Noitham]

Hey @cipolleschi,

FYI - I've patched 0.81.1, and unfortunately, those commits don't seem to address the issue with the RefreshControl Spinner not applying correctly the tintColor on mount.

Looking forward 0.82

[landabaso]

I’m having the same problem as @plneple.

I was also using an absolute-positioned <View> with a white background and relying on zIndex tricks so that the RefreshControl would still show on iOS. This worked fine before the new architecture, but it no longer does.

I tried backporting the commits mentioned in this thread to React Native 0.79.5 (expo 53.0.22), but that didn’t fix the issue.

@plneple , how did you end up fixing it?

[saiyam-zepto-dev]

@cipolleschi THese fixed the issue for the first time mount. When i go back and open my screen again and try refreshing , the indicator is again not shown

[plneple]

@landabaso I’m currently using the patch I initially shared.

I plan to test the commits that will be included in react-native@0.82, but I haven’t tried them yet.

At the moment, I’m on react-native@0.79 and migrating to react-native@0.81, which includes a precompiled react-native for iOS. With that change, the patch will no longer work. Perhaps you’re on a later version already, which might explain why it isn’t working on your side?