Browse Source

Updated documentation for macOS.

Tom Underhill 5 years ago
parent
commit
43ce1c9357
5 changed files with 76 additions and 44 deletions
  1. 38
    0
      docs/Contributing.md
  2. 15
    7
      docs/Getting-Started.md
  3. 18
    18
      docs/Reference.md
  4. 2
    2
      example/ios/Podfile.lock
  5. 3
    17
      ios/RNCWebView.m

+ 38
- 0
docs/Contributing.md View File

8
 
8
 
9
 After you fork the repo, clone it to your machine, and make your changes, you'll want to test them in an app.
9
 After you fork the repo, clone it to your machine, and make your changes, you'll want to test them in an app.
10
 
10
 
11
+There are two methods of testing:
12
+1) Testing within a clone of react-native-webview
13
+2) Testing in a new `react-native init` project
14
+
15
+### Testing within react-native-webview
16
+
17
+#### For all platforms:
18
+```
19
+$ yarn install
20
+```
21
+
22
+#### For Android:
23
+```
24
+$ yarn start:android
25
+```
26
+
27
+The Android example app will built, the Metro Bundler will launch, and the example app will be installed and started in the Android emulator.
28
+
29
+#### For iOS:
30
+```
31
+$ cd example/ios
32
+$ pod install
33
+$ cd ../..
34
+$ yarn start:ios
35
+```
36
+
37
+The iOS example app will be built, the Metro bundler will launch, and the example app will be install and started in the Simulator.
38
+
39
+#### for macOS:
40
+```
41
+$ open example/macos/example.xcodeproj
42
+$ yarn start:macos
43
+```
44
+
45
+The Metro Bundler will now be running in the Terminal for react-native-macos.  In XCode select the `example-macos` target and Run.
46
+
47
+### Testing in a new `react-native init` project
48
+
11
 In a new `react-native init` project, do this:
49
 In a new `react-native init` project, do this:
12
 
50
 
13
 ```
51
 ```

+ 15
- 7
docs/Getting-Started.md View File

2
 
2
 
3
 Here's how to get started quickly with the React Native WebView.
3
 Here's how to get started quickly with the React Native WebView.
4
 
4
 
5
-#### 1. Add react-native-webview to your dependencies
5
+## 1. Add react-native-webview to your dependencies
6
 
6
 
7
 ```
7
 ```
8
 $ yarn add react-native-webview
8
 $ yarn add react-native-webview
14
 $ npm install --save react-native-webview
14
 $ npm install --save react-native-webview
15
 ```
15
 ```
16
 
16
 
17
-#### 2. Link native dependencies
17
+## 2. Link native dependencies
18
 
18
 
19
 From react-native 0.60 autolinking will take care of the link step but don't forget to run `pod install`
19
 From react-native 0.60 autolinking will take care of the link step but don't forget to run `pod install`
20
 
20
 
24
 $ react-native link react-native-webview
24
 $ react-native link react-native-webview
25
 ```
25
 ```
26
 
26
 
27
-iOS:
27
+_NOTE: If you ever need to uninstall React Native WebView, run `react-native unlink react-native-webview` to unlink it._
28
+
29
+### iOS:
28
 
30
 
29
 If using cocoapods in the `ios/` directory run
31
 If using cocoapods in the `ios/` directory run
30
 ```
32
 ```
31
 $ pod install
33
 $ pod install
32
 ```
34
 ```
33
 
35
 
36
+For iOS, while you can manually link the old way using [react-native own tutorial](https://facebook.github.io/react-native/docs/linking-libraries-ios), we find it easier to use cocoapods.
37
+If you wish to use cocoapods and haven't set it up yet, please instead refer to [that article](https://engineering.brigad.co/demystifying-react-native-modules-linking-ae6c017a6b4a).
38
+
39
+### Android:
40
+
34
 Android - react-native-webview version <6:
41
 Android - react-native-webview version <6:
35
 This module does not require any extra step after running the link command 🎉
42
 This module does not require any extra step after running the link command 🎉
36
 
43
 
44
 
51
 
45
 For Android manual installation, please refer to [this article](https://engineering.brigad.co/demystifying-react-native-modules-linking-964399ec731b) where you can find detailed step on how to link any react-native project.
52
 For Android manual installation, please refer to [this article](https://engineering.brigad.co/demystifying-react-native-modules-linking-964399ec731b) where you can find detailed step on how to link any react-native project.
46
 
53
 
47
-For iOS, while you can manually link the old way using [react-native own tutorial](https://facebook.github.io/react-native/docs/linking-libraries-ios), we find it easier to use cocoapods.
48
-If you wish to use cocoapods and haven't set it up yet, please instead refer to [that article](https://engineering.brigad.co/demystifying-react-native-modules-linking-ae6c017a6b4a).
54
+### macOS:
49
 
55
 
50
-_NOTE: If you ever need to uninstall React Native WebView, run `react-native unlink react-native-webview` to unlink it._
56
+Cocoapod and autolinking is not yet support for react-native macOS but is coming soon.  In the meantime you must manually link.
57
+
58
+The method is nearly identical to the [manual linking method for iOS](https://facebook.github.io/react-native/docs/linking-libraries-ios#manual-linking) except that you will include the `node_modules/react-native-webview/macos/RNCWebView.xcodeproj` project in your main project and link the `RNCWebView-macOS.a` library. 
51
 
59
 
52
-#### 3. Import the webview into your component
60
+## 3. Import the webview into your component
53
 
61
 
54
 ```js
62
 ```js
55
 import React, { Component } from 'react';
63
 import React, { Component } from 'react';

+ 18
- 18
docs/Reference.md View File

474
 
474
 
475
 Function that is invoked when the `WebView` content process is terminated.
475
 Function that is invoked when the `WebView` content process is terminated.
476
 
476
 
477
-| Type     | Required | Platform      |
478
-| -------- | -------- | ------------- |
479
-| function | No       | iOS WKWebView |
477
+| Type     | Required | Platform                |
478
+| -------- | -------- | ----------------------- |
479
+| function | No       | iOS and macOS WKWebView |
480
 
480
 
481
 Example:
481
 Example:
482
 
482
 
863
 
863
 
864
 Boolean value that determines whether scrolling is enabled in the `WebView`. The default value is `true`. Setting this to `false` will prevent the webview from moving the document body when the keyboard appears over an input.
864
 Boolean value that determines whether scrolling is enabled in the `WebView`. The default value is `true`. Setting this to `false` will prevent the webview from moving the document body when the keyboard appears over an input.
865
 
865
 
866
-| Type | Required | Platform |
867
-| ---- | -------- | -------- |
868
-| bool | No       | iOS      |
866
+| Type | Required | Platform      |
867
+| ---- | -------- | ------------- |
868
+| bool | No       | iOS and macOS |
869
 
869
 
870
 ---
870
 ---
871
 
871
 
934
 
934
 
935
 A String value that indicates which URLs the WebView's file can then reference in scripts, AJAX requests, and CSS imports. This is only used in for WebViews that are loaded with a source.uri set to a `'file://'` URL. If not provided, the default is to only allow read access to the URL provided in source.uri itself.
935
 A String value that indicates which URLs the WebView's file can then reference in scripts, AJAX requests, and CSS imports. This is only used in for WebViews that are loaded with a source.uri set to a `'file://'` URL. If not provided, the default is to only allow read access to the URL provided in source.uri itself.
936
 
936
 
937
-| Type   | Required | Platform |
938
-| ------ | -------- | -------- |
939
-| string | No       | iOS      |
937
+| Type   | Required | Platform      |
938
+| ------ | -------- | ------------- |
939
+| string | No       | iOS and macOS |
940
 
940
 
941
 ---
941
 ---
942
 
942
 
984
 
984
 
985
 If true, this will be able horizontal swipe gestures. The default value is `false`.
985
 If true, this will be able horizontal swipe gestures. The default value is `false`.
986
 
986
 
987
-| Type    | Required | Platform |
988
-| ------- | -------- | -------- |
989
-| boolean | No       | iOS      |
987
+| Type    | Required | Platform          |
988
+| ------- | -------- | ----------------- |
989
+| boolean | No       | iOS and macOS     |
990
 
990
 
991
 ---
991
 ---
992
 
992
 
1061
 
1061
 
1062
 A Boolean value that determines whether pressing on a link displays a preview of the destination for the link. In iOS this property is available on devices that support 3D Touch. In iOS 10 and later, the default value is true; before that, the default value is false.
1062
 A Boolean value that determines whether pressing on a link displays a preview of the destination for the link. In iOS this property is available on devices that support 3D Touch. In iOS 10 and later, the default value is true; before that, the default value is false.
1063
 
1063
 
1064
-| Type    | Required | Platform |
1065
-| ------- | -------- | -------- |
1066
-| boolean | No       | iOS      |
1064
+| Type    | Required | Platform          |
1065
+| ------- | -------- | ----------------- |
1066
+| boolean | No       | iOS and macOS     |
1067
 
1067
 
1068
 ---
1068
 ---
1069
 
1069
 
1071
 
1071
 
1072
 Set `true` if shared cookies from `[NSHTTPCookieStorage sharedHTTPCookieStorage]` should used for every load request in the WebView. The default value is `false`. For more on cookies, read the [Guide](Guide.md#Managing-Cookies)
1072
 Set `true` if shared cookies from `[NSHTTPCookieStorage sharedHTTPCookieStorage]` should used for every load request in the WebView. The default value is `false`. For more on cookies, read the [Guide](Guide.md#Managing-Cookies)
1073
 
1073
 
1074
-| Type    | Required | Platform |
1075
-| ------- | -------- | -------- |
1076
-| boolean | No       | iOS      |
1074
+| Type    | Required | Platform          |
1075
+| ------- | -------- | ----------------- |
1076
+| boolean | No       | iOS and macOS     |
1077
 
1077
 
1078
 ---
1078
 ---
1079
 
1079
 

+ 2
- 2
example/ios/Podfile.lock View File

182
     - React-cxxreact (= 0.61.5)
182
     - React-cxxreact (= 0.61.5)
183
     - React-jsi (= 0.61.5)
183
     - React-jsi (= 0.61.5)
184
   - React-jsinspector (0.61.5)
184
   - React-jsinspector (0.61.5)
185
-  - react-native-webview (8.0.4):
185
+  - react-native-webview (8.0.6):
186
     - React
186
     - React
187
   - React-RCTActionSheet (0.61.5):
187
   - React-RCTActionSheet (0.61.5):
188
     - React-Core/RCTActionSheetHeaders (= 0.61.5)
188
     - React-Core/RCTActionSheetHeaders (= 0.61.5)
326
   React-jsi: cb2cd74d7ccf4cffb071a46833613edc79cdf8f7
326
   React-jsi: cb2cd74d7ccf4cffb071a46833613edc79cdf8f7
327
   React-jsiexecutor: d5525f9ed5f782fdbacb64b9b01a43a9323d2386
327
   React-jsiexecutor: d5525f9ed5f782fdbacb64b9b01a43a9323d2386
328
   React-jsinspector: fa0ecc501688c3c4c34f28834a76302233e29dc0
328
   React-jsinspector: fa0ecc501688c3c4c34f28834a76302233e29dc0
329
-  react-native-webview: 3f5aa91c3cb083ea4762e006b9653291a96a777a
329
+  react-native-webview: 222d83c9c489e09b5d3541519110a637490ad4fa
330
   React-RCTActionSheet: 600b4d10e3aea0913b5a92256d2719c0cdd26d76
330
   React-RCTActionSheet: 600b4d10e3aea0913b5a92256d2719c0cdd26d76
331
   React-RCTAnimation: 791a87558389c80908ed06cc5dfc5e7920dfa360
331
   React-RCTAnimation: 791a87558389c80908ed06cc5dfc5e7920dfa360
332
   React-RCTBlob: d89293cc0236d9cb0933d85e430b0bbe81ad1d72
332
   React-RCTBlob: d89293cc0236d9cb0933d85e430b0bbe81ad1d72

+ 3
- 17
ios/RNCWebView.m View File

548
   }
548
   }
549
 }
549
 }
550
 
550
 
551
+#if !TARGET_OS_OSX
551
 - (void)setContentInset:(UIEdgeInsets)contentInset
552
 - (void)setContentInset:(UIEdgeInsets)contentInset
552
 {
553
 {
553
   _contentInset = contentInset;
554
   _contentInset = contentInset;
554
   [RCTView autoAdjustInsetsForView:self
555
   [RCTView autoAdjustInsetsForView:self
555
-#if !TARGET_OS_OSX
556
                     withScrollView:_webView.scrollView
556
                     withScrollView:_webView.scrollView
557
-#else
558
-                    withScrollView:nil
559
-#endif // !TARGET_OS_OSX
560
                       updateOffset:NO];
557
                       updateOffset:NO];
561
 }
558
 }
562
 
559
 
563
 - (void)refreshContentInset
560
 - (void)refreshContentInset
564
 {
561
 {
565
   [RCTView autoAdjustInsetsForView:self
562
   [RCTView autoAdjustInsetsForView:self
566
-#if !TARGET_OS_OSX
567
                     withScrollView:_webView.scrollView
563
                     withScrollView:_webView.scrollView
568
-#else
569
-                    withScrollView:nil
570
-#endif // !TARGET_OS_OSX
571
                       updateOffset:YES];
564
                       updateOffset:YES];
572
 }
565
 }
566
+#endif // !TARGET_OS_OSX
573
 
567
 
574
 - (void)visitSource
568
 - (void)visitSource
575
 {
569
 {
711
 
705
 
712
     object_setClass(subview, newClass);
706
     object_setClass(subview, newClass);
713
 }
707
 }
714
-#endif // !TARGET_OS_OSX
715
 
708
 
716
-#if !TARGET_OS_OSX
717
 // UIScrollViewDelegate method
709
 // UIScrollViewDelegate method
718
 - (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
710
 - (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
719
 {
711
 {
762
     _onScroll(event);
754
     _onScroll(event);
763
   }
755
   }
764
 }
756
 }
765
-#endif // !TARGET_OS_OSX
766
 
757
 
767
 - (void)setDirectionalLockEnabled:(BOOL)directionalLockEnabled
758
 - (void)setDirectionalLockEnabled:(BOOL)directionalLockEnabled
768
 {
759
 {
769
     _directionalLockEnabled = directionalLockEnabled;
760
     _directionalLockEnabled = directionalLockEnabled;
770
-#if !TARGET_OS_OSX
771
     _webView.scrollView.directionalLockEnabled = directionalLockEnabled;
761
     _webView.scrollView.directionalLockEnabled = directionalLockEnabled;
772
-#endif // !TARGET_OS_OSX
773
 }
762
 }
774
 
763
 
775
 - (void)setShowsHorizontalScrollIndicator:(BOOL)showsHorizontalScrollIndicator
764
 - (void)setShowsHorizontalScrollIndicator:(BOOL)showsHorizontalScrollIndicator
776
 {
765
 {
777
     _showsHorizontalScrollIndicator = showsHorizontalScrollIndicator;
766
     _showsHorizontalScrollIndicator = showsHorizontalScrollIndicator;
778
-#if !TARGET_OS_OSX
779
     _webView.scrollView.showsHorizontalScrollIndicator = showsHorizontalScrollIndicator;
767
     _webView.scrollView.showsHorizontalScrollIndicator = showsHorizontalScrollIndicator;
780
-#endif // !TARGET_OS_OSX
781
 }
768
 }
782
 
769
 
783
 - (void)setShowsVerticalScrollIndicator:(BOOL)showsVerticalScrollIndicator
770
 - (void)setShowsVerticalScrollIndicator:(BOOL)showsVerticalScrollIndicator
784
 {
771
 {
785
     _showsVerticalScrollIndicator = showsVerticalScrollIndicator;
772
     _showsVerticalScrollIndicator = showsVerticalScrollIndicator;
786
-#if !TARGET_OS_OSX
787
     _webView.scrollView.showsVerticalScrollIndicator = showsVerticalScrollIndicator;
773
     _webView.scrollView.showsVerticalScrollIndicator = showsVerticalScrollIndicator;
788
-#endif // !TARGET_OS_OSX
789
 }
774
 }
775
+#endif // !TARGET_OS_OSX
790
 
776
 
791
 - (void)postMessage:(NSString *)message
777
 - (void)postMessage:(NSString *)message
792
 {
778
 {