RefreshControl Issues - `tintColor` prop not respected & gets stuck on navigation
Chưa có ai nhận issue này.
- Ngôn ngữ chính
- C++
- Star
- 127k
- Fork
- 25.3k
- Merge trung bình
- 1 ngày 23 giờ
- Pull request đã merge (30 ngày)
- 4
Mô tả
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.
Hướng dẫn đóng góp
Bắt đầu từ đâu
- Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
- Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
- Fork repository và làm thay đổi trên một nhánh.
- Mở pull request có tham chiếu số hiệu của issue.
Hướng nghiên cứu
Bắt đầu với reproducer RNV7_TestApp được liên kết và chạy yarn install, npx expo prebuild --clean và npx expo run:ios --device. Điều tra entry point iOS Fabric RefreshControl cho hai hành vi đã được báo cáo: tintColor phải có màu cam khi được thiết lập, và control không được bị kẹt sau khi điều hướng. Được xem là hoàn tất khi cả hai hành vi đã được sửa và xác minh bằng reproducer.
Do mô hình lập chỉ mục viết ra từ nội dung của issue.
Đánh giá
- Công nghệ
- ios, react-native, typescript
- Lĩnh vực
- mobile
- Loại issue
- Lỗi
- Độ khó
- 4/5
- Thời gian dự kiến
- 3-5 ngày
- Mức độ hoạt động
- Ít trao đổi
- Độ rõ ràng
- Khá rõ ràng
- Mức phù hợp với người mới
- 48/100