-
Notifications
You must be signed in to change notification settings - Fork 25k
Closed
Labels
Component: RefreshControlComponent: ScrollViewNeeds: ReproThis issue could be improved with a clear list of steps to reproduce the issue.This issue could be improved with a clear list of steps to reproduce the issue.Newer Patch AvailableResolution: FixedA PR that fixes this issue has been merged.A PR that fixes this issue has been merged.Type: New ArchitectureIssues and PRs related to new architecture (Fabric/Turbo Modules)Issues and PRs related to new architecture (Fabric/Turbo Modules)
Description
Description
I've discovered an issue with the tintColor property of RefreshControl within ScrollView components in React Native version 0.75.2. The specified tintColor is not being applied to the refresh indicator as expected.
Description of the issue:
When setting the tintColor prop on the RefreshControl of a ScrollView, the specified color is not being applied to the refresh indicator. The indicator continues to display in its default color instead of the tintColor provided.
Steps to reproduce
- Create a new React Native project using version 0.75.2
- Implement a ScrollView with RefreshControl, specifying a tintColor
- Pull to refresh and observe that the tint color is not applied to the refresh indicator
Example code:
import React, { useState } from 'react';
import { ScrollView, RefreshControl, Text } from 'react-native';
const RefreshControlExample = () => {
const [refreshing, setRefreshing] = useState(false);
const onRefresh = () => {
setRefreshing(true);
// Simulating an async operation
setTimeout(() => setRefreshing(false), 2000);
};
return (
<ScrollView
refreshControl={
<RefreshControl
refreshing={refreshing}
onRefresh={onRefresh}
tintColor="red" // This tint color is not being applied
/>
}
>
<Text>Pull down to see refresh indicator</Text>
</ScrollView>
);
};
export default RefreshControlExample;
### React Native Version
0.75.2
### Affected Platforms
Runtime - iOS
### Output of `npx react-native info`
```text
System:
OS: macOS 14.5
CPU: (10) arm64 Apple M1 Pro
Memory: 117.45 MB / 16.00 GB
Shell:
version: "5.9"
path: /bin/zsh
Binaries:
Node:
version: 20.8.0
path: /usr/local/bin/node
Yarn:
version: 3.6.4
path: ~/.yarn/bin/yarn
npm:
version: 8.19.4
path: ~/.nvm/versions/node/v16.20.2/bin/npm
Watchman:
version: 2024.08.26.00
path: /opt/homebrew/bin/watchman
Managers:
CocoaPods:
version: 1.14.3
path: /opt/homebrew/bin/pod
SDKs:
iOS SDK:
Platforms:
- DriverKit 23.5
- iOS 17.5
- macOS 14.5
- tvOS 17.5
- visionOS 1.2
- watchOS 10.5
Android SDK: Not Found
IDEs:
Android Studio: 2024.1 AI-241.18034.62.2411.12169540
Xcode:
version: 15.4/15F31d
path: /usr/bin/xcodebuild
Languages:
Java:
version: 21.0.2
path: /usr/bin/javac
Ruby:
version: 2.6.10
path: /Users/khanhlequoc/.rbenv/shims/ruby
npmPackages:
"@react-native-community/cli": Not Found
react:
installed: 18.3.1
wanted: 18.3.1
react-native:
installed: 0.75.2
wanted: 0.75.2
react-native-macos: Not Found
npmGlobalPackages:
"*react-native*": Not Found
Android:
hermesEnabled: true
newArchEnabled: false
iOS:
hermesEnabled: true
newArchEnabled: trueStacktrace or Logs
No log
Reproducer
It work on expo-snack
Screenshots and Videos
Screen.Recording.2024-09-25.at.00.40.30.mov
TuTejsy, javbk201, pgonzalez-santiago and GuillaumeSwoo
Metadata
Metadata
Assignees
Labels
Component: RefreshControlComponent: ScrollViewNeeds: ReproThis issue could be improved with a clear list of steps to reproduce the issue.This issue could be improved with a clear list of steps to reproduce the issue.Newer Patch AvailableResolution: FixedA PR that fixes this issue has been merged.A PR that fixes this issue has been merged.Type: New ArchitectureIssues and PRs related to new architecture (Fabric/Turbo Modules)Issues and PRs related to new architecture (Fabric/Turbo Modules)