Skip to content

Commit

Permalink
Fix applying of tintColor and progressViewOffset props for RefreshCon…
Browse files Browse the repository at this point in the history
…trol component (#46628)

Summary:
While developing my project with New Architecture enabled I've found out that properties `tintColor` and `progressViewOffset` of component `RefreshControl` don't apply on iOS.  This happens due to the lack of handling of these properties in the `RCTPullToRefreshViewComponentView.mm` class.

The bug can be easily reproduced in RNTester app on RefreshControlExample.js screen, since it has property `tintColor="#ff0000"` (Red color), but RefreshControl renders with gray color:

<img width="300" alt="RefreshControlExample.js" src="https://github.com/user-attachments/assets/10931204-dbe8-4cbd-9adc-d0f38319febd">

<img width="300" alt="gray Refresh Control" src="https://github.com/user-attachments/assets/e5d088e8-b3f5-46b8-9284-9b452232ad10">

<br />
<br />

This PR is opened to fix that by applying `tintColor` and `progressViewOffset` props to `_refreshControl` in `RCTPullToRefreshViewComponentView.mm` class.

Fixes #46628

## Changelog:

[IOS][FIXED] - Fix applying of tintColor and progressViewOffset props for RefreshControl component with New Architecture enabled

Pull Request resolved: #46628

Test Plan:
1. Run rn-tester app with New Architecture enabled on iOS
2. Open screen of RefreshControl component:

<img width="300" alt="Снимок экрана 2024-09-24 в 19 48 49" src="https://github.com/user-attachments/assets/94a2d02d-f3e3-4e18-a345-87c22d4a2620">

3. Open `/packages/rn-tester/js/examples/RefreshControl/RefreshControlExample.js` file and change properties `tintColor` and `progressViewOffset` of  RefreshControl components on the line 85:

<img width="300" alt="Снимок экрана 2024-09-24 в 22 01 19" src="https://github.com/user-attachments/assets/425826a6-d34c-4316-8484-e65f125a8b28">

4. check that your changes applied:

<img width="300" alt="Снимок экрана 2024-09-24 в 19 54 46" src="https://github.com/user-attachments/assets/b97621f1-b553-48c9-bc81-e04a99a7e099">

Reviewed By: cortinico

Differential Revision: D63381050

Pulled By: cipolleschi

fbshipit-source-id: 4f3aed8bd7a1e42ce2a75aa19740fd8be1623c86
  • Loading branch information
TuTejsy authored and facebook-github-bot committed Sep 26, 2024
1 parent 391680f commit 19d468f
Showing 1 changed file with 22 additions and 0 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,11 @@ - (void)_initializeUIRefreshControl
[_refreshControl addTarget:self
action:@selector(handleUIControlEventValueChanged)
forControlEvents:UIControlEventValueChanged];

const auto &concreteProps = static_cast<const PullToRefreshViewProps &>(*_props);

_refreshControl.tintColor = RCTUIColorFromSharedColor(concreteProps.tintColor);
[self _updateProgressViewOffset:concreteProps.progressViewOffset];
}

#pragma mark - RCTComponentViewProtocol
Expand Down Expand Up @@ -78,6 +83,14 @@ - (void)updateProps:(const Props::Shared &)props oldProps:(const Props::Shared &
}
}

if (newConcreteProps.tintColor != oldConcreteProps.tintColor) {
_refreshControl.tintColor = RCTUIColorFromSharedColor(newConcreteProps.tintColor);
}

if (newConcreteProps.progressViewOffset != oldConcreteProps.progressViewOffset) {
[self _updateProgressViewOffset:newConcreteProps.progressViewOffset];
}

BOOL needsUpdateTitle = NO;

if (newConcreteProps.title != oldConcreteProps.title) {
Expand All @@ -102,6 +115,15 @@ - (void)handleUIControlEventValueChanged
static_cast<const PullToRefreshViewEventEmitter &>(*_eventEmitter).onRefresh({});
}

- (void)_updateProgressViewOffset:(Float)progressViewOffset
{
_refreshControl.bounds = CGRectMake(
_refreshControl.bounds.origin.x,
-progressViewOffset,
_refreshControl.bounds.size.width,
_refreshControl.bounds.size.height);
}

- (void)_updateTitle
{
const auto &concreteProps = static_cast<const PullToRefreshViewProps &>(*_props);
Expand Down

0 comments on commit 19d468f

Please sign in to comment.