You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
**React Native WebView** is a modern, well-supported, and cross-platform WebView for React Native. It is intended to be a replacement for the built-in WebView (which will be [removed from core](https://github.com/react-native-community/discussions-and-proposals/pull/3)).
10
11
@@ -19,6 +20,7 @@ _This project is maintained for free by these people using both their free time
19
20
20
21
-[x] iOS
21
22
-[x] Android
23
+
-[x] macOS
22
24
23
25
_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)._
Copy file name to clipboardExpand all lines: docs/Getting-Started.md
+15-7
Original file line number
Diff line number
Diff line change
@@ -2,7 +2,7 @@
2
2
3
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
8
$ yarn add react-native-webview
@@ -14,7 +14,7 @@ $ yarn add react-native-webview
14
14
$ npm install --save react-native-webview
15
15
```
16
16
17
-
####2. Link native dependencies
17
+
## 2. Link native dependencies
18
18
19
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,13 +24,20 @@ React Native modules that include native Objective-C, Swift, Java, or Kotlin cod
24
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
31
If using cocoapods in the `ios/` directory run
30
32
```
31
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
41
Android - react-native-webview version <6:
35
42
This module does not require any extra step after running the link command 🎉
36
43
@@ -44,12 +51,13 @@ android.enableJetifier=true
44
51
45
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.
Copy file name to clipboardExpand all lines: docs/Guide.md
+10-4
Original file line number
Diff line number
Diff line change
@@ -74,7 +74,7 @@ class MyWeb extends Component {
74
74
}
75
75
```
76
76
77
-
However on Android, you need to place the HTML file inside your android project's asset directory. For example, if `local-site.html` is your HTML file and you'd like to load it into the webview, you should move the file to your project's android asset directory which is `your-project/android/src/main/assets/`. Then you can load the html file as shown in the following code block
77
+
However on Android, you need to place the HTML file inside your android project's asset directory. For example, if `local-site.html` is your HTML file and you'd like to load it into the webview, you should move the file to your project's android asset directory which is `your-project/android/app/src/main/assets/`. Then you can load the html file as shown in the following code block
78
78
79
79
```js
80
80
importReact, { Component } from'react';
@@ -191,6 +191,12 @@ Add permission in AndroidManifest.xml:
191
191
</manifest>
192
192
```
193
193
194
+
###### Camera option availability in uploading for Android
195
+
196
+
If the file input indicates that images or video is desired with [`accept`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept), then the WebView will attempt to provide options to the user to use their camera to take a picture or video.
197
+
198
+
Normally, apps that do not have permission to use the camera can prompt the user to use an external app so that the requesting app has no need for permission. However, Android has made a special exception for this around the camera to reduce confusion for users. If an app *can* request the camera permission because it has been declared, and the user has not granted the permission, it may not fire an intent that would use the camera (`MediaStore.ACTION_IMAGE_CAPTURE` or `MediaStore.ACTION_VIDEO_CAPTURE`). In this scenario, it is up to the developer to request camera permission before a file upload directly using the camera is necessary.
199
+
194
200
##### Check for File Upload support, with `static isFileUploadSupported()`
195
201
196
202
File Upload using `<input type="file" />` is not supported for Android 4.4 KitKat (see [details](https://github.com/delight-im/Android-AdvancedWebView/issues/4#issuecomment-70372146)):
@@ -301,7 +307,7 @@ _Under the hood_
301
307
302
308
#### The `injectedJavaScriptBeforeContentLoaded` prop
303
309
304
-
This is a script that runs **before** the web page loads for the first time. It only runs once, even if the page is reloaded or navigated away. This is useful if you want to inject anything into the window, localstorage, or document prior to the web code executing.
310
+
This is a script that runs **before** the web page loads for the first time. It only runs once, even if the page is reloaded or navigated away. This is useful if you want to inject anything into the window, localstorage, or document prior to the web code executing.
This runs the JavaScript in the `runFirst` string before the page is loaded. In this case, the value of `window.isNativeApp` will be set to true before the web code executes.
338
+
This runs the JavaScript in the `runFirst` string before the page is loaded. In this case, the value of `window.isNativeApp` will be set to true before the web code executes.
You can set cookies on the React Native side using the [react-native-cookies](https://github.com/joeferraro/react-native-cookies) package.
484
+
You can set cookies on the React Native side using the [@react-native-community/cookies](https://github.com/react-native-community/cookies) package.
479
485
480
486
When you do, you'll likely want to enable the [sharedCookiesEnabled](Reference#sharedCookiesEnabled) prop as well.
-[6.0.**2**](https://github.com/react-native-community/react-native-webview/releases/tag/v6.0.2) - Update para AndroidX. Tenha certeza de habilitar no `android/gradle.properties` do seu projeto. Veja o [Getting Started Guide](docs/Getting-Started.md).
39
+
-[6.0.**2**](https://github.com/react-native-community/react-native-webview/releases/tag/v6.0.2) - Update para AndroidX. Tenha certeza de habilitar no `android/gradle.properties` do seu projeto. Veja o [Getting Started Guide](https://github.com/react-native-community/react-native-webview/blob/master/docs/Getting-Started.md).
40
40
41
41
-[5.0.**1**](https://github.com/react-native-community/react-native-webview/releases/tag/v5.0.0) - Refatorou a antiga implementação postMessage para comunicação da visualização da webview para nativa.
42
42
-[4.0.0](https://github.com/react-native-community/react-native-webview/releases/tag/v4.0.0) - Cache adicionada(habilitada por padrão).
Copy file name to clipboardExpand all lines: docs/Reference.md
+18-18
Original file line number
Diff line number
Diff line change
@@ -500,9 +500,9 @@ Note that this method will not be invoked on hash URL changes (e.g. from `https:
500
500
501
501
Function that is invoked when the `WebView` content process is terminated.
502
502
503
-
| Type | Required | Platform |
504
-
| -------- | -------- | ------------- |
505
-
| function | No | iOS WKWebView |
503
+
| Type | Required | Platform |
504
+
| -------- | -------- | -----------------------|
505
+
| function | No | iOS and macOS WKWebView |
506
506
507
507
Example:
508
508
@@ -889,9 +889,9 @@ Possible values for `dataDetectorTypes` are:
889
889
890
890
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.
891
891
892
-
| Type | Required | Platform |
893
-
| ---- | -------- | -------- |
894
-
| bool | No | iOS |
892
+
| Type | Required | Platform |
893
+
| ---- | -------- | -------------|
894
+
| bool | No | iOS and macOS|
895
895
896
896
---
897
897
@@ -960,9 +960,9 @@ Boolean that sets whether JavaScript running in the context of a file scheme URL
960
960
961
961
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.
962
962
963
-
| Type | Required | Platform |
964
-
| ------ | -------- | -------- |
965
-
| string | No | iOS |
963
+
| Type | Required | Platform |
964
+
| ------ | -------- | -------------|
965
+
| string | No | iOS and macOS|
966
966
967
967
---
968
968
@@ -1010,9 +1010,9 @@ If true, this will hide the keyboard accessory view (< > and Done).
1010
1010
1011
1011
If true, this will be able horizontal swipe gestures. The default value is `false`.
1012
1012
1013
-
| Type | Required | Platform |
1014
-
| ------- | -------- | -------- |
1015
-
| boolean | No | iOS |
1013
+
| Type | Required | Platform |
1014
+
| ------- | -------- | -----------------|
1015
+
| boolean | No | iOS and macOS|
1016
1016
1017
1017
---
1018
1018
@@ -1087,19 +1087,19 @@ If the value of this property is true, the scroll view stops on multiples of the
1087
1087
1088
1088
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.
1089
1089
1090
-
| Type | Required | Platform |
1091
-
| ------- | -------- | -------- |
1092
-
| boolean | No | iOS |
1090
+
| Type | Required | Platform |
1091
+
| ------- | -------- | -----------------|
1092
+
| boolean | No | iOS and macOS|
1093
1093
1094
1094
---
1095
1095
1096
1096
### `sharedCookiesEnabled`
1097
1097
1098
1098
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)
0 commit comments