No Description

index.d.ts 14KB

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