RefreshControl Issues - `tintColor` prop not respected & gets stuck on navigation
Nobody has claimed this yet.
- 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:
yarn installnpx expo prebuild --cleannpx 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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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