Brak opisu

WebViewTypes.js 14KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509
  1. /**
  2. * Copyright (c) 2015-present, Facebook, Inc.
  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. * @format
  8. * @flow
  9. */
  10. 'use strict';
  11. import type { Node, Element, ComponentType } from 'react';
  12. import type { SyntheticEvent } from 'CoreEventTypes';
  13. import type { EdgeInsetsProp } from 'EdgeInsetsPropType';
  14. import type { ViewStyleProp } from 'StyleSheet';
  15. import type { ViewProps } from 'ViewPropTypes';
  16. export type WebViewNativeEvent = $ReadOnly<{|
  17. url: string,
  18. loading: boolean,
  19. title: string,
  20. canGoBack: boolean,
  21. canGoForward: boolean,
  22. lockIdentifier: number,
  23. |}>;
  24. export type WebViewProgressEvent = $ReadOnly<{|
  25. ...WebViewNativeEvent,
  26. progress: number,
  27. |}>;
  28. export type WebViewNavigation = $ReadOnly<{|
  29. ...WebViewNativeEvent,
  30. navigationType:
  31. | 'click'
  32. | 'formsubmit'
  33. | 'backforward'
  34. | 'reload'
  35. | 'formresubmit'
  36. | 'other',
  37. |}>;
  38. export type WebViewMessage = $ReadOnly<{|
  39. ...WebViewNativeEvent,
  40. data: string,
  41. |}>;
  42. export type WebViewError = $ReadOnly<{|
  43. ...WebViewNativeEvent,
  44. /**
  45. * `domain` is only used on iOS
  46. */
  47. domain: ?string,
  48. code: number,
  49. description: string,
  50. |}>;
  51. export type WebViewEvent = SyntheticEvent<WebViewNativeEvent>;
  52. export type WebViewNavigationEvent = SyntheticEvent<WebViewNavigation>;
  53. export type WebViewMessageEvent = SyntheticEvent<WebViewMessage>;
  54. export type WebViewErrorEvent = SyntheticEvent<WebViewError>;
  55. export type DataDetectorTypes =
  56. | 'phoneNumber'
  57. | 'link'
  58. | 'address'
  59. | 'calendarEvent'
  60. | 'trackingNumber'
  61. | 'flightNumber'
  62. | 'lookupSuggestion'
  63. | 'none'
  64. | 'all';
  65. export type OverScrollModeType = 'always' | 'content' | 'never';
  66. export type WebViewSourceUri = $ReadOnly<{|
  67. /**
  68. * The URI to load in the `WebView`. Can be a local or remote file.
  69. */
  70. uri?: ?string,
  71. /**
  72. * The HTTP Method to use. Defaults to GET if not specified.
  73. * NOTE: On Android, only GET and POST are supported.
  74. */
  75. method?: string,
  76. /**
  77. * Additional HTTP headers to send with the request.
  78. * NOTE: On Android, this can only be used with GET requests.
  79. */
  80. headers?: Object,
  81. /**
  82. * The HTTP body to send with the request. This must be a valid
  83. * UTF-8 string, and will be sent exactly as specified, with no
  84. * additional encoding (e.g. URL-escaping or base64) applied.
  85. * NOTE: On Android, this can only be used with POST requests.
  86. */
  87. body?: string,
  88. |}>;
  89. export type WebViewSourceHtml = $ReadOnly<{|
  90. /**
  91. * A static HTML page to display in the WebView.
  92. */
  93. html?: ?string,
  94. /**
  95. * The base URL to be used for any relative links in the HTML.
  96. */
  97. baseUrl?: ?string,
  98. |}>;
  99. export type WebViewSource = WebViewSourceUri | WebViewSourceHtml;
  100. export type WebViewNativeConfig = $ReadOnly<{|
  101. /**
  102. * The native component used to render the WebView.
  103. */
  104. component?: ComponentType<WebViewSharedProps>,
  105. /**
  106. * Set props directly on the native component WebView. Enables custom props which the
  107. * original WebView doesn't pass through.
  108. */
  109. props?: ?Object,
  110. /**
  111. * Set the ViewManager to use for communication with the native side.
  112. * @platform ios
  113. */
  114. viewManager?: ?Object,
  115. |}>;
  116. export type OnShouldStartLoadWithRequest = (
  117. event: WebViewNavigation,
  118. ) => boolean;
  119. export type IOSWebViewProps = $ReadOnly<{|
  120. /**
  121. * If true, use WKWebView instead of UIWebView.
  122. * @platform ios
  123. */
  124. useWebKit?: ?boolean,
  125. /**
  126. * Boolean value that determines whether the web view bounces
  127. * when it reaches the edge of the content. The default value is `true`.
  128. * @platform ios
  129. */
  130. bounces?: ?boolean,
  131. /**
  132. * A floating-point number that determines how quickly the scroll view
  133. * decelerates after the user lifts their finger. You may also use the
  134. * string shortcuts `"normal"` and `"fast"` which match the underlying iOS
  135. * settings for `UIScrollViewDecelerationRateNormal` and
  136. * `UIScrollViewDecelerationRateFast` respectively:
  137. *
  138. * - normal: 0.998
  139. * - fast: 0.99 (the default for iOS web view)
  140. * @platform ios
  141. */
  142. decelerationRate?: ?('fast' | 'normal' | number),
  143. /**
  144. * Boolean value that determines whether scrolling is enabled in the
  145. * `WebView`. The default value is `true`.
  146. * @platform ios
  147. */
  148. scrollEnabled?: ?boolean,
  149. /**
  150. * If the value of this property is true, the scroll view stops on multiples
  151. * of the scroll view’s bounds when the user scrolls.
  152. * The default value is false.
  153. * @platform ios
  154. */
  155. pagingEnabled?: ?boolean,
  156. /**
  157. * The amount by which the web view content is inset from the edges of
  158. * the scroll view. Defaults to {top: 0, left: 0, bottom: 0, right: 0}.
  159. * @platform ios
  160. */
  161. contentInset?: ?EdgeInsetsProp,
  162. /**
  163. * Determines the types of data converted to clickable URLs in the web view's content.
  164. * By default only phone numbers are detected.
  165. *
  166. * You can provide one type or an array of many types.
  167. *
  168. * Possible values for `dataDetectorTypes` are:
  169. *
  170. * - `'phoneNumber'`
  171. * - `'link'`
  172. * - `'address'`
  173. * - `'calendarEvent'`
  174. * - `'none'`
  175. * - `'all'`
  176. *
  177. * With the new WebKit implementation, we have three new values:
  178. * - `'trackingNumber'`,
  179. * - `'flightNumber'`,
  180. * - `'lookupSuggestion'`,
  181. *
  182. * @platform ios
  183. */
  184. dataDetectorTypes?: ?DataDetectorTypes | $ReadOnlyArray<DataDetectorTypes>,
  185. /**
  186. * Boolean that determines whether HTML5 videos play inline or use the
  187. * native full-screen controller. The default value is `false`.
  188. *
  189. * **NOTE** : In order for video to play inline, not only does this
  190. * property need to be set to `true`, but the video element in the HTML
  191. * document must also include the `webkit-playsinline` attribute.
  192. * @platform ios
  193. */
  194. allowsInlineMediaPlayback?: ?boolean,
  195. /**
  196. * Hide the accessory view when the keyboard is open. Default is false to be
  197. * backward compatible.
  198. */
  199. hideKeyboardAccessoryView?: ?boolean,
  200. /**
  201. * A Boolean value indicating whether horizontal swipe gestures will trigger
  202. * back-forward list navigations.
  203. */
  204. allowsBackForwardNavigationGestures?: ?boolean,
  205. /**
  206. * A Boolean value indicating whether WebKit WebView should be created using a shared
  207. * process pool, enabling WebViews to share cookies and localStorage between each other.
  208. * Default is true but can be set to false for backwards compatibility.
  209. * @platform ios
  210. */
  211. useSharedProcessPool?: ?boolean,
  212. /**
  213. * The custom user agent string.
  214. */
  215. userAgent?: ?string,
  216. /**
  217. * A Boolean value that determines whether pressing on a link
  218. * displays a preview of the destination for the link.
  219. *
  220. * This property is available on devices that support 3D Touch.
  221. * In iOS 10 and later, the default value is `true`; before that, the default value is `false`.
  222. * @platform ios
  223. */
  224. allowsLinkPreview?: ?boolean,
  225. |}>;
  226. export type AndroidWebViewProps = $ReadOnly<{|
  227. onNavigationStateChange?: (event: WebViewNavigation) => mixed,
  228. onContentSizeChange?: (event: WebViewEvent) => mixed,
  229. /**
  230. * https://developer.android.com/reference/android/view/View#OVER_SCROLL_NEVER
  231. * Sets the overScrollMode. Possible values are:
  232. *
  233. * - `'always'` (default)
  234. * - `'content'`
  235. * - `'never'`
  236. *
  237. * @platform android
  238. */
  239. overScrollMode?: ?OverScrollModeType,
  240. /**
  241. * Sets whether Geolocation is enabled. The default is false.
  242. * @platform android
  243. */
  244. geolocationEnabled?: ?boolean,
  245. /**
  246. * Boolean that sets whether JavaScript running in the context of a file
  247. * scheme URL should be allowed to access content from any origin.
  248. * Including accessing content from other file scheme URLs
  249. * @platform android
  250. */
  251. allowUniversalAccessFromFileURLs?: ?boolean,
  252. /**
  253. * Sets whether the webview allow access to file system.
  254. * @platform android
  255. */
  256. allowFileAccess?: ?boolean,
  257. /**
  258. * Used on Android only, controls whether form autocomplete data should be saved
  259. * @platform android
  260. */
  261. saveFormDataDisabled?: ?boolean,
  262. /**
  263. * Used on Android only, controls whether the given list of URL prefixes should
  264. * make {@link com.facebook.react.views.webview.ReactWebViewClient} to launch a
  265. * default activity intent for those URL instead of loading it within the webview.
  266. * Use this to list URLs that WebView cannot handle, e.g. a PDF url.
  267. * @platform android
  268. */
  269. urlPrefixesForDefaultIntent?: $ReadOnlyArray<string>,
  270. /**
  271. * Boolean value to enable JavaScript in the `WebView`. Used on Android only
  272. * as JavaScript is enabled by default on iOS. The default value is `true`.
  273. * @platform android
  274. */
  275. javaScriptEnabled?: ?boolean,
  276. /**
  277. * Boolean value to disable Hardware Acceleration in the `WebView`. Used on Android only
  278. * as Hardware Acceleration is a feature only for Android. The default value is `false`.
  279. * @platform android
  280. */
  281. androidHardwareAccelerationDisabled?: ?boolean,
  282. /**
  283. * Boolean value to enable third party cookies in the `WebView`. Used on
  284. * Android Lollipop and above only as third party cookies are enabled by
  285. * default on Android Kitkat and below and on iOS. The default value is `true`.
  286. * @platform android
  287. */
  288. thirdPartyCookiesEnabled?: ?boolean,
  289. /**
  290. * Boolean value to control whether DOM Storage is enabled. Used only in
  291. * Android.
  292. * @platform android
  293. */
  294. domStorageEnabled?: ?boolean,
  295. /**
  296. * Sets the user-agent for the `WebView`.
  297. * @platform android
  298. */
  299. userAgent?: ?string,
  300. /**
  301. * Specifies the mixed content mode. i.e WebView will allow a secure origin to load content from any other origin.
  302. *
  303. * Possible values for `mixedContentMode` are:
  304. *
  305. * - `'never'` (default) - WebView will not allow a secure origin to load content from an insecure origin.
  306. * - `'always'` - WebView will allow a secure origin to load content from any other origin, even if that origin is insecure.
  307. * - `'compatibility'` - WebView will attempt to be compatible with the approach of a modern web browser with regard to mixed content.
  308. * @platform android
  309. */
  310. mixedContentMode?: ?('never' | 'always' | 'compatibility'),
  311. |}>;
  312. export type WebViewSharedProps = $ReadOnly<{|
  313. ...ViewProps,
  314. ...IOSWebViewProps,
  315. ...AndroidWebViewProps,
  316. /**
  317. * Deprecated. Use `source` instead.
  318. */
  319. url?: ?string,
  320. /**
  321. * Deprecated. Use `source` instead.
  322. */
  323. html?: ?string,
  324. /**
  325. * Loads static html or a uri (with optional headers) in the WebView.
  326. */
  327. source?: ?WebViewSource,
  328. /**
  329. * Does not store any data within the lifetime of the WebView.
  330. */
  331. incognito?: ?boolean,
  332. /**
  333. * Function that returns a view to show if there's an error.
  334. */
  335. renderError: (
  336. errorDomain: ?string,
  337. errorCode: number,
  338. errorDesc: string,
  339. ) => Element<any>, // view to show if there's an error
  340. /**
  341. * Function that returns a loading indicator.
  342. */
  343. renderLoading: () => Element<any>,
  344. /**
  345. * Function that is invoked when the `WebView` has finished loading.
  346. */
  347. onLoad: (event: WebViewNavigationEvent) => mixed,
  348. /**
  349. * Function that is invoked when the `WebView` load succeeds or fails.
  350. */
  351. onLoadEnd: (event: WebViewNavigationEvent | WebViewErrorEvent) => mixed,
  352. /**
  353. * Function that is invoked when the `WebView` starts loading.
  354. */
  355. onLoadStart: (event: WebViewNavigationEvent) => mixed,
  356. /**
  357. * Function that is invoked when the `WebView` load fails.
  358. */
  359. onError: (event: WebViewErrorEvent) => mixed,
  360. /**
  361. * Controls whether to adjust the content inset for web views that are
  362. * placed behind a navigation bar, tab bar, or toolbar. The default value
  363. * is `true`.
  364. */
  365. automaticallyAdjustContentInsets?: ?boolean,
  366. /**
  367. * Function that is invoked when the `WebView` loading starts or ends.
  368. */
  369. onNavigationStateChange?: (event: WebViewNavigation) => mixed,
  370. /**
  371. * Function that is invoked when the webview calls `window.ReactNativeWebView.postMessage`.
  372. * Setting this property will inject this global into your webview.
  373. *
  374. * `window.ReactNativeWebView.postMessage` accepts one argument, `data`, which will be
  375. * available on the event object, `event.nativeEvent.data`. `data` must be a string.
  376. */
  377. onMessage?: (event: WebViewMessageEvent) => mixed,
  378. /**
  379. * Function that is invoked when the `WebView` is loading.
  380. */
  381. onLoadProgress?: (event: WebViewProgressEvent) => mixed,
  382. /**
  383. * Boolean value that forces the `WebView` to show the loading view
  384. * on the first load.
  385. */
  386. startInLoadingState?: ?boolean,
  387. /**
  388. * Set this to provide JavaScript that will be injected into the web page
  389. * when the view loads.
  390. */
  391. injectedJavaScript?: ?string,
  392. /**
  393. * Boolean value that determines whether a horizontal scroll indicator is
  394. * shown in the `WebView`. The default value is `true`.
  395. */
  396. showsHorizontalScrollIndicator?: ?boolean,
  397. /**
  398. * Boolean value that determines whether a vertical scroll indicator is
  399. * shown in the `WebView`. The default value is `true`.
  400. */
  401. showsVerticalScrollIndicator?: ?boolean,
  402. /**
  403. * Boolean that controls whether the web content is scaled to fit
  404. * the view and enables the user to change the scale. The default value
  405. * is `true`.
  406. *
  407. * On iOS, when `useWebKit=true`, this prop will not work.
  408. */
  409. scalesPageToFit?: ?boolean,
  410. /**
  411. * Boolean that determines whether HTML5 audio and video requires the user
  412. * to tap them before they start playing. The default value is `true`.
  413. */
  414. mediaPlaybackRequiresUserAction?: ?boolean,
  415. /**
  416. * List of origin strings to allow being navigated to. The strings allow
  417. * wildcards and get matched against *just* the origin (not the full URL).
  418. * If the user taps to navigate to a new page but the new page is not in
  419. * this whitelist, we will open the URL in Safari.
  420. * The default whitelisted origins are "http://*" and "https://*".
  421. */
  422. originWhitelist?: $ReadOnlyArray<string>,
  423. /**
  424. * Function that allows custom handling of any web view requests. Return
  425. * `true` from the function to continue loading the request and `false`
  426. * to stop loading. The `navigationType` is always `other` on android.
  427. */
  428. onShouldStartLoadWithRequest?: OnShouldStartLoadWithRequest,
  429. /**
  430. * Override the native component used to render the WebView. Enables a custom native
  431. * WebView which uses the same JavaScript as the original WebView.
  432. */
  433. nativeConfig?: ?WebViewNativeConfig,
  434. /**
  435. * Should caching be enabled. Default is true.
  436. */
  437. cacheEnabled?: ?boolean,
  438. style?: ViewStyleProp,
  439. children: Node,
  440. |}>;