Browse Source

feat(toggle scroll bar): added new props showsVerticalScrollIndicator / showsHorizontalScrollIndicator (#250)

Jordan Sexton 5 years ago
parent
commit
92c20581ae

+ 10
- 0
android/src/main/java/com/reactnativecommunity/webview/RNCWebViewManager.java View File

@@ -503,6 +503,16 @@ public class RNCWebViewManager extends SimpleViewManager<WebView> {
503 503
     view.getSettings().setJavaScriptEnabled(enabled);
504 504
   }
505 505
 
506
+  @ReactProp(name = "showsHorizontalScrollIndicator")
507
+  public void setShowsHorizontalScrollIndicator(WebView view, boolean enabled) {
508
+    view.setHorizontalScrollBarEnabled(enabled);
509
+  }
510
+
511
+  @ReactProp(name = "showsVerticalScrollIndicator")
512
+  public void setShowsVerticalScrollIndicator(WebView view, boolean enabled) {
513
+    view.setVerticalScrollBarEnabled(enabled);
514
+  }
515
+  
506 516
   @ReactProp(name = "cacheEnabled")
507 517
   public void setCacheEnabled(WebView view, boolean enabled) {
508 518
     if (enabled) {

+ 20
- 0
docs/Reference.md View File

@@ -454,6 +454,26 @@ Boolean value that determines whether scrolling is enabled in the `WebView`. The
454 454
 
455 455
 ---
456 456
 
457
+### `showsHorizontalScrollIndicator`
458
+
459
+Boolean value that determines whether a horizontal scroll indicator is shown in the `WebView`. The default value is `true`.
460
+
461
+| Type | Required |
462
+| ---- | -------- |
463
+| bool | No       |
464
+
465
+---
466
+
467
+### `showsVerticalScrollIndicator`
468
+
469
+Boolean value that determines whether a vertical scroll indicator is shown in the `WebView`. The default value is `true`.
470
+
471
+| Type | Required |
472
+| ---- | -------- |
473
+| bool | No       |
474
+
475
+---
476
+
457 477
 ### `geolocationEnabled`
458 478
 
459 479
 Set whether Geolocation is enabled in the `WebView`. The default value is `false`. Used only in Android.

+ 2
- 0
ios/RNCUIWebViewManager.m View File

@@ -41,6 +41,8 @@ RCT_EXPORT_VIEW_PROPERTY(onShouldStartLoadWithRequest, RCTDirectEventBlock)
41 41
 RCT_REMAP_VIEW_PROPERTY(allowsInlineMediaPlayback, _webView.allowsInlineMediaPlayback, BOOL)
42 42
 RCT_REMAP_VIEW_PROPERTY(mediaPlaybackRequiresUserAction, _webView.mediaPlaybackRequiresUserAction, BOOL)
43 43
 RCT_REMAP_VIEW_PROPERTY(dataDetectorTypes, _webView.dataDetectorTypes, UIDataDetectorTypes)
44
+RCT_REMAP_VIEW_PROPERTY(showsHorizontalScrollIndicator, _webView.scrollView.showsHorizontalScrollIndicator, BOOL)
45
+RCT_REMAP_VIEW_PROPERTY(showsVerticalScrollIndicator, _webView.scrollView.showsVerticalScrollIndicator, BOOL)
44 46
 
45 47
 RCT_EXPORT_METHOD(goBack:(nonnull NSNumber *)reactTag)
46 48
 {

+ 2
- 0
ios/RNCWKWebView.h View File

@@ -43,6 +43,8 @@
43 43
 @property (nonatomic, copy) NSString *userAgent;
44 44
 @property (nonatomic, assign) BOOL cacheEnabled;
45 45
 @property (nonatomic, assign) BOOL allowsLinkPreview;
46
+@property (nonatomic, assign) BOOL showsHorizontalScrollIndicator;
47
+@property (nonatomic, assign) BOOL showsVerticalScrollIndicator;
46 48
 
47 49
 + (void)setClientAuthenticationCredential:(nullable NSURLCredential*)credential;
48 50
 - (void)postMessage:(NSString *)message;

+ 16
- 0
ios/RNCWKWebView.m View File

@@ -69,6 +69,8 @@ static NSURLCredential* clientAuthenticationCredential;
69 69
     super.backgroundColor = [UIColor clearColor];
70 70
     _bounces = YES;
71 71
     _scrollEnabled = YES;
72
+    _showsHorizontalScrollIndicator = YES;
73
+    _showsVerticalScrollIndicator = YES;
72 74
     _automaticallyAdjustContentInsets = YES;
73 75
     _contentInset = UIEdgeInsetsZero;
74 76
   }
@@ -150,6 +152,8 @@ static NSURLCredential* clientAuthenticationCredential;
150 152
     _webView.scrollView.scrollEnabled = _scrollEnabled;
151 153
     _webView.scrollView.pagingEnabled = _pagingEnabled;
152 154
     _webView.scrollView.bounces = _bounces;
155
+    _webView.scrollView.showsHorizontalScrollIndicator = _showsHorizontalScrollIndicator;
156
+    _webView.scrollView.showsVerticalScrollIndicator = _showsVerticalScrollIndicator;
153 157
     _webView.allowsLinkPreview = _allowsLinkPreview;
154 158
     [_webView addObserver:self forKeyPath:@"estimatedProgress" options:NSKeyValueObservingOptionOld | NSKeyValueObservingOptionNew context:nil];
155 159
     _webView.allowsBackForwardNavigationGestures = _allowsBackForwardNavigationGestures;
@@ -357,6 +361,18 @@ static NSURLCredential* clientAuthenticationCredential;
357 361
   _webView.scrollView.scrollEnabled = scrollEnabled;
358 362
 }
359 363
 
364
+- (void)setShowsHorizontalScrollIndicator:(BOOL)showsHorizontalScrollIndicator
365
+{
366
+    _showsHorizontalScrollIndicator = showsHorizontalScrollIndicator;
367
+    _webView.scrollView.showsHorizontalScrollIndicator = showsHorizontalScrollIndicator;
368
+}
369
+
370
+- (void)setShowsVerticalScrollIndicator:(BOOL)showsVerticalScrollIndicator
371
+{
372
+    _showsVerticalScrollIndicator = showsVerticalScrollIndicator;
373
+    _webView.scrollView.showsVerticalScrollIndicator = showsVerticalScrollIndicator;
374
+}
375
+
360 376
 - (void)postMessage:(NSString *)message
361 377
 {
362 378
   NSDictionary *eventInitDict = @{@"data": message};

+ 8
- 0
ios/RNCWKWebViewManager.m View File

@@ -85,6 +85,14 @@ RCT_CUSTOM_VIEW_PROPERTY(decelerationRate, CGFloat, RNCWKWebView) {
85 85
   view.decelerationRate = json == nil ? UIScrollViewDecelerationRateNormal : [RCTConvert CGFloat: json];
86 86
 }
87 87
 
88
+RCT_CUSTOM_VIEW_PROPERTY(showsHorizontalScrollIndicator, BOOL, RNCWKWebView) {
89
+  view.showsHorizontalScrollIndicator = json == nil ? true : [RCTConvert BOOL: json];
90
+}
91
+
92
+RCT_CUSTOM_VIEW_PROPERTY(showsVerticalScrollIndicator, BOOL, RNCWKWebView) {
93
+  view.showsVerticalScrollIndicator = json == nil ? true : [RCTConvert BOOL: json];
94
+}
95
+
88 96
 RCT_EXPORT_METHOD(injectJavaScript:(nonnull NSNumber *)reactTag script:(NSString *)script)
89 97
 {
90 98
   [self.bridge.uiManager addUIBlock:^(__unused RCTUIManager *uiManager, NSDictionary<NSNumber *, RNCWKWebView *> *viewRegistry) {

+ 2
- 0
js/WebView.android.js View File

@@ -182,6 +182,8 @@ class WebView extends React.Component<WebViewSharedProps, State> {
182 182
         mixedContentMode={this.props.mixedContentMode}
183 183
         saveFormDataDisabled={this.props.saveFormDataDisabled}
184 184
         urlPrefixesForDefaultIntent={this.props.urlPrefixesForDefaultIntent}
185
+        showsHorizontalScrollIndicator={this.props.showsHorizontalScrollIndicator}
186
+        showsVerticalScrollIndicator={this.props.showsVerticalScrollIndicator}
185 187
         {...nativeConfig.props}
186 188
       />
187 189
     );

+ 2
- 0
js/WebView.ios.js View File

@@ -284,6 +284,8 @@ class WebView extends React.Component<WebViewSharedProps, State> {
284 284
         dataDetectorTypes={this.props.dataDetectorTypes}
285 285
         useSharedProcessPool={this.props.useSharedProcessPool}
286 286
         allowsLinkPreview={this.props.allowsLinkPreview}
287
+        showsHorizontalScrollIndicator={this.props.showsHorizontalScrollIndicator}
288
+        showsVerticalScrollIndicator={this.props.showsVerticalScrollIndicator}
287 289
         {...nativeConfig.props}
288 290
       />
289 291
     );

+ 12
- 0
js/WebViewTypes.js View File

@@ -449,6 +449,18 @@ export type WebViewSharedProps = $ReadOnly<{|
449 449
    */
450 450
   injectedJavaScript?: ?string,
451 451
 
452
+  /**
453
+   * Boolean value that determines whether a horizontal scroll indicator is
454
+   * shown in the `WebView`. The default value is `true`.
455
+   */
456
+  showsHorizontalScrollIndicator?: ?boolean,
457
+
458
+  /**
459
+   * Boolean value that determines whether a vertical scroll indicator is
460
+   * shown in the `WebView`. The default value is `true`.
461
+   */
462
+  showsVerticalScrollIndicator?: ?boolean,
463
+
452 464
   /**
453 465
    * Boolean that controls whether the web content is scaled to fit
454 466
    * the view and enables the user to change the scale. The default value