No haptic feedback when using RefreshControl with a tintColor prop

Description

On iOS, it's expected that the system gives small haptic feedback when using pull-to-refresh. This works by default when using <RefreshControl>. However, when passing a tintColor prop to <RefreshControl>, the haptics don't play.

I don't have another device to confirm, but I feel like this may have just started recently, possibly with iOS 17.4.

Steps to reproduce

Use a RefreshControl with a tintColor prop on a real iOS device and observe that the haptic feedback does not play. Comment out the tintColor prop, reload the app (fast refresh doesn't have an effect), and then observe the haptic feedback works.

React Native Version

0.73.5

Affected Platforms

Runtime - iOS

Device I'm testing on is an iPhone 15 Pro on iOS 17.4

Output of `npx react-native info`

System:
  OS: macOS 14.3.1
  CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
  Memory: 2.40 GB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 19.6.0
    path: ~/.asdf/installs/nodejs/19.6.0/bin/node
  Yarn:
    version: 1.22.19
    path: /usr/local/bin/yarn
  npm:
    version: 9.4.0
    path: ~/.asdf/plugins/nodejs/shims/npm
  Watchman: Not Found
Managers:
  CocoaPods:
    version: 1.14.3
    path: /Users/marcshilling/.asdf/shims/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.2
      - iOS 17.2
      - macOS 14.2
      - tvOS 17.2
      - visionOS 1.0
      - watchOS 10.2
  Android SDK: Not Found
IDEs:
  Android Studio: 2023.1 AI-231.9392.1.2311.11330709
  Xcode:
    version: 15.2/15C500b
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 11.0.18
    path: /usr/bin/javac
  Ruby:
    version: 2.7.6
    path: /Users/marcshilling/.asdf/shims/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.73.5
    wanted: 0.73.5
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: true
  newArchEnabled: false

Stacktrace or Logs

N/A

Reproducer

https://github.com/marcshilling/react-native-refresh-control-haptics-bug

Screenshots and Videos

No response

This works as expected with an iOS version lower than 17.4, so something definitely has broken in iOS 17.4

I stumbled on the same thing and it looks like UIRefreshControl needs to be set on a scroll view before the tintColor is set.

@dus7

Got around to writing a patch for this here bluesky-social/social-app#5605 based on @dus7's finding. Thanks!

Still an issue in iOS 18 unfortunately.

Here's my workaround in pure react:

import { useState, useEffect } from "react";
import {
  RefreshControl as RNRefreshControl,
  RefreshControlProps as RNRefreshControlProps
} from "react-native";

export default function RefreshControl(props: RNRefreshControlProps) {
  const [tintColor, setTintColor] = useState<RNRefreshControlProps["tintColor"]>();

  // Shameless workaround to set the tint color after the component is rendered.
  // See https://github.com/facebook/react-native/issues/43388
  useEffect(() => {
    setTintColor(props.tintColor);

    // If you want a default tintColor:
    // setTintColor(props.tintColor || MY_DEFAULT_TINT_COLOR);
  }, [props.tintColor]);

  return (
    <RNRefreshControl
      {...props}
      tintColor={tintColor}
    />
  );
}

Explaining the workaround:

The RNRefreshControl is mounted without a tintColor since we initialize the tintColor state without a value
Then we call an effect after the RNRefreshControl is already mounted to update the tintColor to the props.tintColor
If the prop is altered, we run the effect again by reacting to the prop

Tested on a real device and it worked.

@sobrinho

FYI: @sobrinho's solution above worked for me until I upgraded to RN 0.77 and enabled the new architecture where I get mixed results as if there's a race condition. @haileyok's patch doesn't seem to work either 😞

@marcshilling

@marcshilling you probably need to port the fix for fabric. the patch there is unfortunately only for old architecture.

if i ever find time to play with it, i could give it a shot (i assume we will need to do this anyway ourselves if it isn't working for you 😢

@haileyok

@haileyok hmm good call. I'll look into myself and report back if I figure it out

Sweet! Some variation of the same patch but in this file should probably do the trick. I suspect probably around the updateProps method.

@haileyok

Ok sweet I figured it out. Here's the patch for the new architecture (this is a patch of RN 0.77.3 but it probably works for newer versions as well):

diff --git a/node_modules/react-native/React/Fabric/Mounting/ComponentViews/ScrollView/RCTPullToRefreshViewComponentView.mm b/node_modules/react-native/React/Fabric/Mounting/ComponentViews/ScrollView/RCTPullToRefreshViewComponentView.mm
index 3a5679e..a4e9ec5 100644
--- a/node_modules/react-native/React/Fabric/Mounting/ComponentViews/ScrollView/RCTPullToRefreshViewComponentView.mm
+++ b/node_modules/react-native/React/Fabric/Mounting/ComponentViews/ScrollView/RCTPullToRefreshViewComponentView.mm
@@ -26,6 +26,7 @@ @interface RCTPullToRefreshViewComponentView () <RCTPullToRefreshViewViewProtoco
 @implementation RCTPullToRefreshViewComponentView {
   UIRefreshControl *_refreshControl;
   RCTScrollViewComponentView *__weak _scrollViewComponentView;
+  UIColor *_customTintColor;
 }
 
 - (instancetype)initWithFrame:(CGRect)frame
@@ -52,7 +53,7 @@ - (void)_initializeUIRefreshControl
 
   const auto &concreteProps = static_cast<const PullToRefreshViewProps &>(*_props);
 
-  _refreshControl.tintColor = RCTUIColorFromSharedColor(concreteProps.tintColor);
+  _customTintColor = RCTUIColorFromSharedColor(concreteProps.tintColor);
   [self _updateProgressViewOffset:concreteProps.progressViewOffset];
 }
 
@@ -84,7 +85,8 @@ - (void)updateProps:(const Props::Shared &)props oldProps:(const Props::Shared &
   }
 
   if (newConcreteProps.tintColor != oldConcreteProps.tintColor) {
-    _refreshControl.tintColor = RCTUIColorFromSharedColor(newConcreteProps.tintColor);
+    _customTintColor = RCTUIColorFromSharedColor(newConcreteProps.tintColor);
+    [self _updateTintColor];
   }
 
   if (newConcreteProps.progressViewOffset != oldConcreteProps.progressViewOffset) {
@@ -142,6 +144,13 @@ - (void)_updateTitle
       [[NSAttributedString alloc] initWithString:RCTNSStringFromString(concreteProps.title) attributes:attributes];
 }
 
+- (void)_updateTintColor
+{
+  if (_scrollViewComponentView && _scrollViewComponentView.scrollView.refreshControl == _refreshControl) {
+    _refreshControl.tintColor = _customTintColor;
+  }
+}
+
 #pragma mark - Attaching & Detaching
 
 - (void)didMoveToWindow
@@ -168,6 +177,8 @@ - (void)_attach
   if (@available(macCatalyst 13.1, *)) {
     _scrollViewComponentView.scrollView.refreshControl = _refreshControl;
   }
+
+  [self _updateTintColor];
 }
 
 - (void)_detach

Thanks for the original fix and direction here @haileyok!

@cipolleschi

cc @cipolleschi

FYI - this patch here regressed again as I updated from RN 0.77 to RN 0.79. The source RCTPullToRefreshViewComponentView.mm changed some, but I was able to apply the same/similar patch. Unfortunately, it's not reliably making the haptics play (mixed results depending on which screen of the app I'm on...or it will work once but then stop working if I come back to the screen, etc).

On top of that, there's a few other RefreshControl issues biting me now that all seem kind of related.

@marcshilling

@marcshilling did you try my patch above? #43388 (comment)

@marcshilling did you try my patch above? #43388 (comment)

Yes, see my comment here: #43388 (comment). It fixes the tint color issue, but that haptics will still not play reliably (mixed results)

@marcshilling

@marcshilling I meant the pure react patch, not the .mm one.

@marcshilling

@marcshilling I meant the pure react patch, not the .mm one.

That's what I'm talking about too. It worked on old arch but not new.

@marcshilling

@marcshilling gotcha! I will give it a try this week and see if there's a workaround.

It seems it broke on "react-native": "0.83.2".

Navigation Menu

Repository navigation

No haptic feedback when using RefreshControl with a tintColor prop #43388

Description

Steps to reproduce

React Native Version

Affected Platforms

Output of `npx react-native info`

Stacktrace or Logs

Reproducer

Screenshots and Videos

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

No haptic feedback when using RefreshControl with a tintColor prop #43388

Description

Description

Steps to reproduce

React Native Version

Affected Platforms

Output of npx react-native info

Stacktrace or Logs

Reproducer

Screenshots and Videos

Activity

matiaswastaken commented on Apr 13, 2024

dus7 commented on Jun 12, 2024

haileyok commented on Oct 4, 2024

sobrinho commented on Nov 14, 2024

marcshilling commented on Sep 26, 2025

haileyok commented on Sep 26, 2025

marcshilling commented on Sep 26, 2025

haileyok commented on Sep 26, 2025

marcshilling commented on Sep 29, 2025

brentvatne commented on Oct 1, 2025

marcshilling commented on Dec 31, 2025

sobrinho commented on Jan 2, 2026

marcshilling commented on Jan 2, 2026

sobrinho commented on Jan 5, 2026

marcshilling commented on Jan 5, 2026

sobrinho commented on Jan 6, 2026

colaquecez commented on Apr 3, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

Output of `npx react-native info`