feat(ios): Added support for scrollview indicatorStyle (#3743)

animaonline · Roman Alifanov · Titozzz · web-flow · commit 6af6a830aea5 · 2025-06-01T03:17:06.000+02:00
* added support for light scroll indicators on iOS

* rename prop, and cleaned

* Update RNCWebViewManager.java

---------

Co-authored-by: Roman Alifanov &lt;roman@bbc.no&gt;
Co-authored-by: Thibault Malbranche &lt;malbranche.thibault@gmail.com&gt;
Co-authored-by: Thibault Malbranche &lt;thibault@brigad.co&gt;
diff --git a/android/src/newarch/com/reactnativecommunity/webview/RNCWebViewManager.java b/android/src/newarch/com/reactnativecommunity/webview/RNCWebViewManager.java
@@ -395,6 +395,9 @@ public void setPullToRefreshEnabled(RNCWebViewWrapper view, boolean value) {}
     @Override
     public void setRefreshControlLightMode(RNCWebViewWrapper view, boolean value) {}
 
+    @Override
+    public void setIndicatorStyle(RNCWebViewWrapper view, @Nullable String value) {}
+
     @Override
     public void setScrollEnabled(RNCWebViewWrapper view, boolean value) {}
 
diff --git a/apple/RNCWebView.mm b/apple/RNCWebView.mm
@@ -71,9 +71,9 @@ - (instancetype)initWithFrame:(CGRect)frame
     if (self = [super initWithFrame:frame]) {
         static const auto defaultProps = std::make_shared<const RNCWebViewProps>();
         _props = defaultProps;
-        
+
         _view = [[RNCWebViewImpl alloc] init];
-        
+
         _view.onShouldStartLoadWithRequest = [self](NSDictionary* dictionary) {
             if (_eventEmitter) {
                 auto webViewEventEmitter = std::static_pointer_cast<RNCWebViewEventEmitter const>(_eventEmitter);
@@ -191,7 +191,7 @@ - (instancetype)initWithFrame:(CGRect)frame
                     .selectedText = std::string([[dictionary valueForKey:@"selectedText"] UTF8String]),
                     .key = std::string([[dictionary valueForKey:@"key"] UTF8String]),
                     .label = std::string([[dictionary valueForKey:@"label"] UTF8String])
-                    
+
                 };
                 webViewEventEmitter->onCustomMenuSelection(data);
             }
@@ -312,7 +312,7 @@ - (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &
     REMAP_WEBVIEW_PROP(showsHorizontalScrollIndicator)
     REMAP_WEBVIEW_PROP(showsVerticalScrollIndicator)
     REMAP_WEBVIEW_PROP(keyboardDisplayRequiresUserAction)
-    
+
 #if defined(__IPHONE_OS_VERSION_MAX_ALLOWED) && __IPHONE_OS_VERSION_MAX_ALLOWED >= 130000 /* __IPHONE_13_0 */
     REMAP_WEBVIEW_PROP(automaticallyAdjustContentInsets)
 #endif
@@ -398,7 +398,7 @@ - (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &
         for (const auto &menuItem: newViewProps.suppressMenuItems) {
             [suppressMenuItems addObject: RCTNSStringFromString(menuItem)];
         }
-        
+
         [_view setSuppressMenuItems:suppressMenuItems];
     }
     if (oldViewProps.hasOnFileDownload != newViewProps.hasOnFileDownload) {
@@ -410,10 +410,10 @@ - (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &
                         .downloadUrl = std::string([[dictionary valueForKey:@"downloadUrl"] UTF8String])
                     };
                     webViewEventEmitter->onFileDownload(data);
-                } 
+                }
             };
         } else {
-            _view.onFileDownload = nil;        
+            _view.onFileDownload = nil;
         }
     }
     if (oldViewProps.hasOnOpenWindowEvent != newViewProps.hasOnOpenWindowEvent) {
@@ -459,7 +459,16 @@ - (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &
         }
     }
 #endif
-    
+    if (oldViewProps.indicatorStyle != newViewProps.indicatorStyle) {
+        if (newViewProps.indicatorStyle == RNCWebViewIndicatorStyle::Black) {
+            [_view setIndicatorStyle:@"black"];
+        } else if (newViewProps.indicatorStyle == RNCWebViewIndicatorStyle::White) {
+            [_view setIndicatorStyle:@"white"];
+        } else {
+            [_view setIndicatorStyle:@"default"];
+        }
+    }
+
     NSMutableDictionary* source = [[NSMutableDictionary alloc] init];
     if (!newViewProps.newSource.uri.empty()) {
         [source setValue:RCTNSStringFromString(newViewProps.newSource.uri) forKey:@"uri"];
@@ -484,7 +493,7 @@ - (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &
         [source setValue:RCTNSStringFromString(newViewProps.newSource.method) forKey:@"method"];
     }
     [_view setSource:source];
-    
+
     [super updateProps:props oldProps:oldProps];
 }
 
diff --git a/apple/RNCWebViewImpl.h b/apple/RNCWebViewImpl.h
@@ -102,6 +102,7 @@ shouldStartLoadForRequest:(NSMutableDictionary<NSString *, id> *)request
 @property (nonatomic, assign) BOOL allowsLinkPreview;
 @property (nonatomic, assign) BOOL showsHorizontalScrollIndicator;
 @property (nonatomic, assign) BOOL showsVerticalScrollIndicator;
+@property (nonatomic, copy) NSString * _Nullable indicatorStyle;
 @property (nonatomic, assign) BOOL directionalLockEnabled;
 @property (nonatomic, assign) BOOL ignoreSilentHardwareSwitch;
 @property (nonatomic, copy) NSString * _Nullable allowingReadAccessToURL;
diff --git a/apple/RNCWebViewImpl.m b/apple/RNCWebViewImpl.m
@@ -74,7 +74,7 @@ - (NSString *)stringFromAction:(SEL) action {
       @"toggleUnderline:":   @"underline",
       @"_share:":            @"share",
   };
-    
+
   return map[sel] ?: sel;
 }
 
@@ -86,7 +86,7 @@ - (BOOL)canPerformAction:(SEL)action
           return NO;
       }
   }
-  
+
   if (!self.menuItems) {
       return [super canPerformAction:action withSender:sender];
   }
@@ -276,7 +276,7 @@ - (void)startLongPress:(UILongPressGestureRecognizer *)pressSender
 
       UIMenuController *menuController = [UIMenuController sharedMenuController];
       NSMutableArray *menuControllerItems = [NSMutableArray arrayWithCapacity:self.menuItems.count];
-      
+
       for(NSDictionary *menuItem in self.menuItems) {
         NSString *menuItemLabel = [RCTConvert NSString:menuItem[@"label"]];
         NSString *menuItemKey = [RCTConvert NSString:menuItem[@"key"]];
@@ -535,6 +535,15 @@ - (void)didMoveToWindow
     _webView.scrollView.bounces = _pullToRefreshEnabled || _bounces;
     _webView.scrollView.showsHorizontalScrollIndicator = _showsHorizontalScrollIndicator;
     _webView.scrollView.showsVerticalScrollIndicator = _showsVerticalScrollIndicator;
+
+    if ([_indicatorStyle isEqualToString:@"black"]) {
+        _webView.scrollView.indicatorStyle = UIScrollViewIndicatorStyleBlack;
+    } else if ([_indicatorStyle isEqualToString:@"white"]) {
+        _webView.scrollView.indicatorStyle = UIScrollViewIndicatorStyleWhite;
+    } else {
+        _webView.scrollView.indicatorStyle = UIScrollViewIndicatorStyleDefault;
+    }
+
     _webView.scrollView.directionalLockEnabled = _directionalLockEnabled;
 #endif // !TARGET_OS_OSX
     _webView.allowsLinkPreview = _allowsLinkPreview;
@@ -852,7 +861,7 @@ - (void)visitSource
   [self syncCookiesToWebView:^{
     // Add observer to sync cookies from webview to sharedHTTPCookieStorage
     [webView.configuration.websiteDataStore.httpCookieStore addObserver:self];
-    
+
     // Because of the way React works, as pages redirect, we actually end up
     // passing the redirect urls back here, so we ignore them if trying to load
     // the same url. We'll expose a call to 'reload' to allow a user to load
@@ -1084,6 +1093,19 @@ - (void)setShowsVerticalScrollIndicator:(BOOL)showsVerticalScrollIndicator
   _showsVerticalScrollIndicator = showsVerticalScrollIndicator;
   _webView.scrollView.showsVerticalScrollIndicator = showsVerticalScrollIndicator;
 }
+
+- (void)setIndicatorStyle:(NSString *)indicatorStyle
+{
+  _indicatorStyle = indicatorStyle;
+
+  if ([indicatorStyle isEqualToString:@"black"]) {
+    _webView.scrollView.indicatorStyle = UIScrollViewIndicatorStyleBlack;
+  } else if ([indicatorStyle isEqualToString:@"white"]) {
+    _webView.scrollView.indicatorStyle = UIScrollViewIndicatorStyleWhite;
+  } else {
+    _webView.scrollView.indicatorStyle = UIScrollViewIndicatorStyleDefault;
+  }
+}
 #endif // !TARGET_OS_OSX
 
 - (void)postMessage:(NSString *)message
@@ -1399,7 +1421,7 @@ - (void)                  webView:(WKWebView *)webView
 }
 
 /**
- * Called when the web view’s content process is terminated.
+ * Called when the web view's content process is terminated.
  * @see https://developer.apple.com/documentation/webkit/wknavigationdelegate/1455639-webviewwebcontentprocessdidtermi?language=objc
  */
 - (void)webViewWebContentProcessDidTerminate:(WKWebView *)webView
diff --git a/apple/RNCWebViewManager.mm b/apple/RNCWebViewManager.mm
@@ -167,6 +167,10 @@ - (RNCView *)view
   view.showsVerticalScrollIndicator = json == nil ? true : [RCTConvert BOOL: json];
 }
 
+RCT_CUSTOM_VIEW_PROPERTY(indicatorStyle, NSString, RNCWebViewImpl) {
+  view.indicatorStyle = [RCTConvert NSString: json];
+}
+
 RCT_CUSTOM_VIEW_PROPERTY(keyboardDisplayRequiresUserAction, BOOL, RNCWebViewImpl) {
   view.keyboardDisplayRequiresUserAction = json == nil ? true : [RCTConvert BOOL: json];
 }
diff --git a/docs/Reference.md b/docs/Reference.md
@@ -53,6 +53,7 @@ This document lays out the current public properties and methods for the React N
 - [`contentInsetAdjustmentBehavior`](Reference.md#contentInsetAdjustmentBehavior)
 - [`contentMode`](Reference.md#contentMode)
 - [`dataDetectorTypes`](Reference.md#datadetectortypes)
+- [`indicatorStyle`](Reference.md#indicatorStyle)
 - [`scrollEnabled`](Reference.md#scrollenabled)
 - [`nestedScrollEnabled`](Reference.md#nestedscrollenabled)
 - [`setBuiltInZoomControls`](Reference.md#setBuiltInZoomControls)
@@ -1149,6 +1150,16 @@ Boolean value that determines whether scrolling is enabled in the `WebView`. The
 
 ---
 
+### `indicatorStyle`[⬆](#props-index)
+
+The colorstyle of the scroll indicator. The default value is `default`.
+
+| Type   | Required | Platform |
+| ------ | -------- | -------- |
+| string | No       | iOS      |
+
+---
+
 ### `nestedScrollEnabled`[⬆](#props-index)
 
 Boolean value that determines whether scrolling is possible in the `WebView` when used inside a `ScrollView` on Android. The default value is `false`.
diff --git a/src/RNCWebViewNativeComponent.ts b/src/RNCWebViewNativeComponent.ts
@@ -281,6 +281,7 @@ export interface NativeProps extends ViewProps {
   onShouldStartLoadWithRequest: DirectEventHandler<ShouldStartLoadRequestEvent>;
   showsHorizontalScrollIndicator?: WithDefault<boolean, true>;
   showsVerticalScrollIndicator?: WithDefault<boolean, true>;
+  indicatorStyle?: WithDefault<'default' | 'black' | 'white', 'default'>;
   newSource: Readonly<{
     uri?: string;
     method?: string;
diff --git a/src/WebViewTypes.ts b/src/WebViewTypes.ts
@@ -182,6 +182,8 @@ export type CacheMode =
 
 export type AndroidLayerType = 'none' | 'software' | 'hardware';
 
+export type IndicatorStyleType = 'default' | 'black' | 'white';
+
 export interface WebViewSourceUri {
   /**
    * The URI to load in the `WebView`. Can be a local or remote file.
@@ -424,7 +426,7 @@ export interface IOSWebViewProps extends WebViewSharedProps {
 
   /**
    * If the value of this property is true, the scroll view stops on multiples
-   * of the scroll view’s bounds when the user scrolls.
+   * of the scroll view's bounds when the user scrolls.
    * The default value is false.
    * @platform ios
    */
@@ -660,14 +662,26 @@ export interface IOSWebViewProps extends WebViewSharedProps {
   pullToRefreshEnabled?: boolean;
 
   /**
-   * Boolean value that determines whether a pull to refresh gesture is
-   * available in the `WebView`. The default value is `false`.
-   * If `true`, sets `bounces` automatically to `true`
+   * Boolean value that determines whether the refresh control color is white or not.
+   * The default value is `false`, meaning the refresh control color will be the default.
    * @platform ios
    *
    */
   refreshControlLightMode?: boolean;
 
+  /**
+   * Determines the style of the scroll indicators. This property works the same
+   * as `indicatorStyle` on React Native's ScrollView.
+   * The default value is `'default'`.
+   *
+   * Possible values:
+   * - `'default'` - Default style (dark on light backgrounds, light on dark backgrounds)
+   * - `'black'` - Black scroll indicators
+   * - `'white'` - White scroll indicators
+   * @platform ios
+   */
+  indicatorStyle?: IndicatorStyleType;
+
   /**
    * Function that is invoked when the client needs to download a file.
    *
@@ -689,9 +703,9 @@ export interface IOSWebViewProps extends WebViewSharedProps {
   /**
    * A Boolean value which, when set to `true`, indicates to WebKit that a WKWebView
    * will only navigate to app-bound domains. Once set, any attempt to navigate away
-   * from an app-bound domain will fail with the error “App-bound domain failure.”
+   * from an app-bound domain will fail with the error "App-bound domain failure."
    *
-   * Applications can specify up to 10 “app-bound” domains using a new
+   * Applications can specify up to 10 "app-bound" domains using a new
    * Info.plist key `WKAppBoundDomains`.
    * @platform ios
    */
@@ -786,7 +800,7 @@ export interface MacOSWebViewProps extends WebViewSharedProps {
 
   /**
    * If the value of this property is true, the scroll view stops on multiples
-   * of the scroll view’s bounds when the user scrolls.
+   * of the scroll view's bounds when the user scrolls.
    * The default value is false.
    * @platform macos
    */

Original file line number	Diff line number	Diff line change
`@@ -167,6 +167,10 @@ - (RNCView *)view`
`167`	`167`	`view.showsVerticalScrollIndicator = json == nil ? true : [RCTConvert BOOL: json];`
`168`	`168`	`}`
`169`	`169`
	`170`	`+RCT_CUSTOM_VIEW_PROPERTY(indicatorStyle, NSString, RNCWebViewImpl) {`
	`171`	`+ view.indicatorStyle = [RCTConvert NSString: json];`
	`172`	`+}`
	`173`	`+`
`170`	`174`	`RCT_CUSTOM_VIEW_PROPERTY(keyboardDisplayRequiresUserAction, BOOL, RNCWebViewImpl) {`
`171`	`175`	`view.keyboardDisplayRequiresUserAction = json == nil ? true : [RCTConvert BOOL: json];`
`172`	`176`	`}`