react / react/react-native

RefreshControl Issues - `tintColor` prop not respected & gets stuck on navigation

Open
#53,987 29 comments 25 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Component: RefreshControl Needs: Triage :mag: Type: New Architecture
Dominant language
C++
Stars
127k
Forks
25.3k
Avg merge
1d 23h
Merged PRs (30d)
4

Description

Description

There are two bugs I'm reporting with the same component, and providing a good repro for each within the same repository.
This issue is the single main problem I am having throughout my app with the new architecture. I use this RefreshControl component everywhere and it is not behaving right anywhere.

Configuration:

  • New Arch
  • RN 0.81.4
  • Expo 54.0.10
  • React 19.1.0
  • iOS

Bug 1 - tintColor property is not respected:

Code:

          <RefreshControl
            refreshing={refreshing}
            onRefresh={manualRefresh}
            tintColor="orange" // Should be orange but isn't respected
          />

Video Displaying Issue:

https://github.com/user-attachments/assets/bb7add88-634d-44c0-b7a4-52b2821a885f

There is a hack around this issue by applying the tintColor after a small delay:

  const [tintColor, setTintColor] = useState<ColorValue>("white")
  useEffect(() => {
    setTimeout(() => setTintColor("orange"), 500)
  }, [])

Bug 2 - Refresh Control gets stuck on navigation:

Changing tabs while a pull-to-refresh is active makes the RefreshControl get stuck.

The only hack around this that I have found is force-resetting the refreshing prop after the screen is unfocused.

const isFocused = useIsFocused()

useEffect(() => {
    if (!isFocused) {
        setRefreshing(false)
    }
},[isFocused])

Video Displaying Issue:

https://github.com/user-attachments/assets/43406fa5-7d1e-41b0-b2c3-005490ccce33

Note I have found several past issues that are somewhat related:

https://github.com/facebook/react-native/issues/46631 (Closed, but probably shouldn't be)
https://github.com/facebook/react-native/issues/51914
https://github.com/facebook/react-native/issues/35779

Steps to reproduce

Download the repro found here:
https://github.com/ChristopherGabba/RNV7_TestApp

Run:

  1. yarn install
  2. npx expo prebuild --clean
  3. npx expo run:ios --device
React Native Version

0.81.4

Affected Platforms

Runtime - iOS

Areas

Fabric - The New Renderer

Output of npx @react-native-community/cli info
info Fetching system and libraries information...
System:
  OS: macOS 15.6.1
  CPU: (10) arm64 Apple M2 Pro
  Memory: 131.34 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 23.4.0
    path: ~/.nvm/versions/node/v23.4.0/bin/node
  Yarn:
    version: 1.22.22
    path: /opt/homebrew/bin/yarn
  npm:
    version: 11.5.2
    path: ~/.nvm/versions/node/v23.4.0/bin/npm
  Watchman:
    version: 2025.04.14.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.16.2
    path: /Users/christophergabba/.gem/ruby/3.4.3/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 25.0
      - iOS 26.0
      - macOS 26.0
      - tvOS 26.0
      - visionOS 26.0
      - watchOS 26.0
  Android SDK: Not Found
IDEs:
  Android Studio: 2025.1 AI-251.26094.121.2513.14007798
  Xcode:
    version: 26.0.1/17A400
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.11
    path: /usr/bin/javac
  Ruby:
    version: 3.4.3
    path: /Users/christophergabba/.rubies/ruby-3.4.3/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 19.1.0
    wanted: 19.1.0
  react-native:
    installed: 0.81.4
    wanted: 0.81.4
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: Not found
  newArchEnabled: Not found
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found
Stacktrace or Logs
N/A
MANDATORY Reproducer

https://github.com/ChristopherGabba/RNV7_TestApp

Screenshots and Videos

Provided above.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked RNV7_TestApp reproducer and run yarn install, npx expo prebuild --clean, and npx expo run:ios --device. Investigate the iOS Fabric RefreshControl entry point for the two reported behaviors: tintColor should be orange when set, and the control should not remain stuck after navigation. Done means both behaviors are corrected and verified against the reproducer.

Written by the indexing model from the issue text.

Assessment

Tech stack
ios, react-native, typescript
Domain
mobile
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.