Nessuna descrizione

index.js 3.4KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134
  1. 'use strict';
  2. import React, { useState, useEffect, useMemo, useRef, useImperativeHandle, forwardRef } from 'react';
  3. import { StyleSheet, Platform, ViewPropTypes } from 'react-native';
  4. import PropTypes from 'prop-types';
  5. import { WebView } from 'react-native-webview';
  6. import { getMemoResult, getWidth, isSizeChanged } from './utils';
  7. const AutoHeightWebView = forwardRef((props, ref) => {
  8. let webView = useRef();
  9. useImperativeHandle(ref, () => ({
  10. stopLoading: () => webView.current.stopLoading(),
  11. goForward: () => webView.current.goForward(),
  12. goBack: () => webView.current.goBack(),
  13. reload: () => webView.current.reload(),
  14. injectJavaScript: script => webView.current.injectJavaScript(script)
  15. }));
  16. const { style, onMessage, onSizeUpdated, source, baseUrl, files, customStyle, customScript, zoomable } = props;
  17. const [size, setSize] = useState(() => ({
  18. height: style && style.height ? style.height : 0,
  19. width: getWidth(style)
  20. }));
  21. const hanldeMessage = event => {
  22. if (!event.nativeEvent) {
  23. return;
  24. }
  25. let data = {};
  26. // Sometimes the message is invalid JSON, so we ignore that case
  27. try {
  28. data = JSON.parse(event.nativeEvent.data);
  29. } catch (error) {
  30. console.error(error);
  31. return;
  32. }
  33. const { height, width } = data;
  34. const { height: previousHeight, width: previousWidth } = size;
  35. isSizeChanged({ height, previousHeight, width, previousWidth }) &&
  36. setSize({
  37. height,
  38. width
  39. });
  40. onMessage && onMessage(event);
  41. };
  42. const { currentSource, script } = useMemo(
  43. () => getMemoResult({ source, baseUrl, files, customStyle, customScript, zoomable }),
  44. [source, baseUrl, files, customStyle, customScript, zoomable]
  45. );
  46. const { width, height } = size;
  47. useEffect(
  48. () =>
  49. onSizeUpdated &&
  50. onSizeUpdated({
  51. height,
  52. width
  53. }),
  54. [width, height, onSizeUpdated]
  55. );
  56. return (
  57. <WebView
  58. {...props}
  59. ref={webView}
  60. onMessage={hanldeMessage}
  61. style={[
  62. styles.webView,
  63. {
  64. width,
  65. height
  66. },
  67. style
  68. ]}
  69. injectedJavaScript={script}
  70. source={currentSource}
  71. />
  72. );
  73. });
  74. AutoHeightWebView.propTypes = {
  75. onSizeUpdated: PropTypes.func,
  76. // 'web/' by default on iOS
  77. // 'file:///android_asset/web/' by default on Android
  78. baseUrl: PropTypes.string,
  79. // add baseUrl/files... to android/app/src/assets/ on android
  80. // add baseUrl/files... to project root on iOS
  81. files: PropTypes.arrayOf(
  82. PropTypes.shape({
  83. href: PropTypes.string,
  84. type: PropTypes.string,
  85. rel: PropTypes.string
  86. })
  87. ),
  88. style: ViewPropTypes.style,
  89. customScript: PropTypes.string,
  90. customStyle: PropTypes.string,
  91. zoomable: PropTypes.bool,
  92. // webview props
  93. originWhitelist: PropTypes.arrayOf(PropTypes.string),
  94. onMessage: PropTypes.func,
  95. source: PropTypes.object
  96. };
  97. let defaultProps = {
  98. showsVerticalScrollIndicator: false,
  99. showsHorizontalScrollIndicator: false,
  100. originWhitelist: ['*'],
  101. baseUrl: 'web/',
  102. zoomable: true
  103. };
  104. Platform.OS === 'android' &&
  105. Object.assign(defaultProps, {
  106. baseUrl: 'file:///android_asset/web/',
  107. // if set to true may cause some layout issues (width of container will be than width of screen) on android
  108. scalesPageToFit: false
  109. });
  110. AutoHeightWebView.defaultProps = defaultProps;
  111. const styles = StyleSheet.create({
  112. webView: {
  113. backgroundColor: 'transparent'
  114. }
  115. });
  116. export default AutoHeightWebView;