Skip to content

Commit 1e57231

Browse files
tom-untom-un
authored
feat(macOS): macOS Support (react-native-webview#1164)
1 parent 31d015b commit 1e57231

34 files changed

+4376
-84
lines changed

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ _This project is maintained for free by these people using both their free time
2020

2121
- [x] iOS
2222
- [x] Android
23+
- [x] macOS
2324

2425
_Note: Expo support for React Native WebView started with [Expo SDK v33.0.0](https://blog.expo.io/expo-sdk-v33-0-0-is-now-available-52d1c99dfe4c)._
2526

‎docs/Contributing.md

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,44 @@ Secondly, we'd like the contribution experience to be as good as possible. While
88

99
After you fork the repo, clone it to your machine, and make your changes, you'll want to test them in an app.
1010

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+
1149
In a new `react-native init` project, do this:
1250

1351
```

‎docs/Getting-Started.md

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
Here's how to get started quickly with the React Native WebView.
44

5-
#### 1. Add react-native-webview to your dependencies
5+
## 1. Add react-native-webview to your dependencies
66

77
```
88
$ yarn add react-native-webview
@@ -14,7 +14,7 @@ $ yarn add react-native-webview
1414
$ npm install --save react-native-webview
1515
```
1616

17-
#### 2. Link native dependencies
17+
## 2. Link native dependencies
1818

1919
From react-native 0.60 autolinking will take care of the link step but don't forget to run `pod install`
2020

@@ -24,13 +24,20 @@ React Native modules that include native Objective-C, Swift, Java, or Kotlin cod
2424
$ react-native link react-native-webview
2525
```
2626

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:
2830

2931
If using cocoapods in the `ios/` directory run
3032
```
3133
$ pod install
3234
```
3335

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+
3441
Android - react-native-webview version <6:
3542
This module does not require any extra step after running the link command 🎉
3643

@@ -44,12 +51,13 @@ android.enableJetifier=true
4451

4552
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.
4653

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:
4955

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.
5159

52-
#### 3. Import the webview into your component
60+
## 3. Import the webview into your component
5361

5462
```js
5563
import React, { Component } from 'react';

‎docs/Reference.md

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -474,9 +474,9 @@ Note that this method will not be invoked on hash URL changes (e.g. from `https:
474474

475475
Function that is invoked when the `WebView` content process is terminated.
476476

477-
| Type | Required | Platform |
478-
| -------- | -------- | ------------- |
479-
| function | No | iOS WKWebView |
477+
| Type | Required | Platform |
478+
| -------- | -------- | ----------------------- |
479+
| function | No | iOS and macOS WKWebView |
480480

481481
Example:
482482

@@ -863,9 +863,9 @@ Possible values for `dataDetectorTypes` are:
863863

864864
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.
865865

866-
| Type | Required | Platform |
867-
| ---- | -------- | -------- |
868-
| bool | No | iOS |
866+
| Type | Required | Platform |
867+
| ---- | -------- | ------------- |
868+
| bool | No | iOS and macOS |
869869

870870
---
871871

@@ -934,9 +934,9 @@ Boolean that sets whether JavaScript running in the context of a file scheme URL
934934

935935
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.
936936

937-
| Type | Required | Platform |
938-
| ------ | -------- | -------- |
939-
| string | No | iOS |
937+
| Type | Required | Platform |
938+
| ------ | -------- | ------------- |
939+
| string | No | iOS and macOS |
940940

941941
---
942942

@@ -984,9 +984,9 @@ If true, this will hide the keyboard accessory view (< > and Done).
984984

985985
If true, this will be able horizontal swipe gestures. The default value is `false`.
986986

987-
| Type | Required | Platform |
988-
| ------- | -------- | -------- |
989-
| boolean | No | iOS |
987+
| Type | Required | Platform |
988+
| ------- | -------- | ----------------- |
989+
| boolean | No | iOS and macOS |
990990

991991
---
992992

@@ -1061,19 +1061,19 @@ If the value of this property is true, the scroll view stops on multiples of the
10611061

10621062
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.
10631063

1064-
| Type | Required | Platform |
1065-
| ------- | -------- | -------- |
1066-
| boolean | No | iOS |
1064+
| Type | Required | Platform |
1065+
| ------- | -------- | ----------------- |
1066+
| boolean | No | iOS and macOS |
10671067

10681068
---
10691069

10701070
### `sharedCookiesEnabled`
10711071

10721072
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)
10731073

1074-
| Type | Required | Platform |
1075-
| ------- | -------- | -------- |
1076-
| boolean | No | iOS |
1074+
| Type | Required | Platform |
1075+
| ------- | -------- | ----------------- |
1076+
| boolean | No | iOS and macOS |
10771077

10781078
---
10791079

‎example/.gitignore

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,10 @@ DerivedData
2020
*.hmap
2121
*.ipa
2222
*.xcuserstate
23-
project.xcworkspace
23+
# exclude project.xcworkspace except for xcshareddata/WorkspaceSettings.xcsettings
24+
project.xcworkspace/*
25+
**/project.xcworkspace/contents.xcworkspacedata
26+
**/project.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist
2427

2528
# Android/IntelliJ
2629
#

‎example/ios/Podfile.lock

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -182,7 +182,7 @@ PODS:
182182
- React-cxxreact (= 0.61.5)
183183
- React-jsi (= 0.61.5)
184184
- React-jsinspector (0.61.5)
185-
- react-native-webview (8.0.4):
185+
- react-native-webview (8.0.6):
186186
- React
187187
- React-RCTActionSheet (0.61.5):
188188
- React-Core/RCTActionSheetHeaders (= 0.61.5)
@@ -326,7 +326,7 @@ SPEC CHECKSUMS:
326326
React-jsi: cb2cd74d7ccf4cffb071a46833613edc79cdf8f7
327327
React-jsiexecutor: d5525f9ed5f782fdbacb64b9b01a43a9323d2386
328328
React-jsinspector: fa0ecc501688c3c4c34f28834a76302233e29dc0
329-
react-native-webview: 3f5aa91c3cb083ea4762e006b9653291a96a777a
329+
react-native-webview: 222d83c9c489e09b5d3541519110a637490ad4fa
330330
React-RCTActionSheet: 600b4d10e3aea0913b5a92256d2719c0cdd26d76
331331
React-RCTAnimation: 791a87558389c80908ed06cc5dfc5e7920dfa360
332332
React-RCTBlob: d89293cc0236d9cb0933d85e430b0bbe81ad1d72

‎example/macos/example-macOS/AppDelegate.h

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
/**
2+
* Copyright (c) Facebook, Inc. and its affiliates.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*/
7+
8+
#import <Cocoa/Cocoa.h>
9+
10+
@class RCTBridge;
11+
12+
@interface AppDelegate : NSObject <NSApplicationDelegate>
13+
14+
@property (nonatomic, readonly) RCTBridge *bridge;
15+
16+
@end

‎example/macos/example-macOS/AppDelegate.m

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
/**
2+
* Copyright (c) Facebook, Inc. and its affiliates.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*/
7+
8+
#import "AppDelegate.h"
9+
10+
#import <React/RCTBridge.h>
11+
#import <React/RCTBundleURLProvider.h>
12+
13+
@interface AppDelegate () <RCTBridgeDelegate>
14+
15+
@end
16+
17+
@implementation AppDelegate
18+
19+
- (void)awakeFromNib {
20+
[super awakeFromNib];
21+
22+
_bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:nil];
23+
}
24+
25+
- (void)applicationDidFinishLaunching:(NSNotification *)aNotification {
26+
// Insert code here to initialize your application
27+
}
28+
29+
- (void)applicationWillTerminate:(NSNotification *)aNotification {
30+
// Insert code here to tear down your application
31+
}
32+
33+
#pragma mark - RCTBridgeDelegate Methods
34+
35+
- (NSURL *)sourceURLForBridge:(__unused RCTBridge *)bridge {
36+
return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"example/index" fallbackResource:@"main"]; // .jsbundle;
37+
}
38+
39+
@end

‎example/macos/example-macOS/Info.plist

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<?xml version="1.0" encoding="UTF-8"?>
2+
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
3+
<plist version="1.0">
4+
<dict>
5+
<key>CFBundleDevelopmentRegion</key>
6+
<string>$(DEVELOPMENT_LANGUAGE)</string>
7+
<key>CFBundleExecutable</key>
8+
<string>$(EXECUTABLE_NAME)</string>
9+
<key>CFBundleIconFile</key>
10+
<string></string>
11+
<key>CFBundleIdentifier</key>
12+
<string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
13+
<key>CFBundleInfoDictionaryVersion</key>
14+
<string>6.0</string>
15+
<key>CFBundleName</key>
16+
<string>$(PRODUCT_NAME)</string>
17+
<key>CFBundlePackageType</key>
18+
<string>APPL</string>
19+
<key>CFBundleShortVersionString</key>
20+
<string>1.0</string>
21+
<key>CFBundleVersion</key>
22+
<string>1</string>
23+
<key>LSMinimumSystemVersion</key>
24+
<string>$(MACOSX_DEPLOYMENT_TARGET)</string>
25+
<key>NSAppTransportSecurity</key>
26+
<dict>
27+
<key>NSAllowsArbitraryLoads</key>
28+
<true/>
29+
<key>NSExceptionDomains</key>
30+
<dict>
31+
<key>localhost</key>
32+
<dict>
33+
<key>NSExceptionAllowsInsecureHTTPLoads</key>
34+
<true/>
35+
</dict>
36+
</dict>
37+
</dict>
38+
<key>NSHumanReadableCopyright</key>
39+
<string>Copyright © 2017 Facebook. All rights reserved.</string>
40+
<key>NSMainStoryboardFile</key>
41+
<string>Main</string>
42+
<key>NSPrincipalClass</key>
43+
<string>NSApplication</string>
44+
</dict>
45+
</plist>

0 commit comments

Comments
 (0)