Skip to content

macOS support #148

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 19 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -3,3 +3,6 @@

ios/RCTWKWebView.xcodeproj/xcuserdata/*
ios/RCTWKWebView.xcodeproj/project.xcworkspace/xcuserdata/*

macos/RCTWKWebView.xcodeproj/xcuserdata/*
macos/RCTWKWebView.xcodeproj/project.xcworkspace/xcuserdata/*
23 changes: 18 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,10 @@

[![npm version](https://badge.fury.io/js/react-native-wkwebview-reborn.svg)](https://badge.fury.io/js/react-native-wkwebview-reborn)

React Native comes with [WebView](http://facebook.github.io/react-native/docs/webview.html) component, which uses UIWebView on iOS. This component uses [WKWebView](http://nshipster.com/wkwebkit/) introduced in iOS 8 with all the performance boost.
React Native comes with [WebView](http://facebook.github.io/react-native/docs/webview.html) component, which uses UIWebView on iOS. This component uses [WKWebView](http://nshipster.com/wkwebkit/) introduced in iOS 8.0 and macOS 10.10 with all the performance boosts.

**Deployment Target >= iOS 8.0 is required** *(which is React Native's current minimum deployment target anyway).*
* **Deployment Target >= iOS 8.0 is required** *(which is React Native's current minimum deployment target anyway)* when deploying to iOS.
* **Deployment Target >= macOS 10.10 is required** when deploying to macOS.

### Install

Expand All @@ -15,10 +16,10 @@ React Native comes with [WebView](http://facebook.github.io/react-native/docs/we

1. Install from npm (note the postfix in the package name): `npm install react-native-wkwebview-reborn`
2. In the XCode's "Project navigator", right click on your project's Libraries folder ➜ Add Files to <...>
3. Go to node_modules ➜ react-native-wkwebview-reborn ➜ ios ➜ select `RCTWKWebView.xcodeproj`
4. Go your build target ➜ Build Phases ➜ Link Binary With Libraries, click "+" and select `libRCTWkWebView.a` (see the following screenshot for reference)
3. Go to node_modules ➜ react-native-wkwebview-reborn ➜ ios (or macos) ➜ select `RCTWKWebView.xcodeproj`
4. Go your build target ➜ Build Phases ➜ Link Binary With Libraries, click "+" and select `libRCTWkWebView.a` (or `libRCTWkWebView-macos.a`, when building for macOS) (see the following screenshot for reference)
![Linking](https://user-images.githubusercontent.com/608221/28060167-0650e3f4-6659-11e7-8085-7a8c2615f90f.png)
5. Compile and profit (Remember to set Minimum Deployment Target = 8.0)
5. Compile and profit (Remember to set `Minimum Deployment Target` to 8.0 for iOS, or 10.10 for macOS)


### Usage
Expand Down Expand Up @@ -127,6 +128,18 @@ Add JavaScript at document end. Since 1.20.0, the implementation has been change
- allowsInlineMediaPlayback
- decelerationRate

#### Incomplete APIs for macOS

Some iOS methods have not been fully implemented for macOS yet. This is because the macOS implementation of `WKWebView` has some differences, such as lacking a `scrollView`, and using `AppKit` instead of `UIKit`; and so I (@shirakaba) don't quite know what should be done in the macOS case. I therefore can't guarantee the success of the following methods for macOS:

- `setHideKeyboardAccessoryView`
- `setContentInset`
- `setBackgroundColor`
- `refreshContentInset`
- `scrollViewDidScroll`

`mailto` and `tel` schemes are also not supported yet because I don't know the macOS equivalent.

### Advanced Communication between React Native and WkWebView


Expand Down
Loading