Nessuna descrizione

index.js 3.6KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134
  1. 'use strict';
  2. import React, { useState, useEffect, 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 { reduceData, getWidth, isSizeChanged, shouldUpdate } from './utils';
  7. const AutoHeightWebView = React.memo(
  8. forwardRef((props, ref) => {
  9. let webView = useRef();
  10. useImperativeHandle(ref, () => ({
  11. stopLoading: () => webView.current.stopLoading(),
  12. goForward: () => webView.current.goForward(),
  13. goBack: () => webView.current.goBack(),
  14. reload: () => webView.current.reload(),
  15. injectJavaScript: script => webView.current.injectJavaScript(script)
  16. }));
  17. const { style, onMessage, onSizeUpdated, source, baseUrl, files, customStyle, customScript, zoomable } = props;
  18. const [size, setSize] = useState(() => ({
  19. height: style && style.height ? style.height : 0,
  20. width: getWidth(style)
  21. }));
  22. const hanldeMessage = event => {
  23. onMessage && onMessage(event);
  24. if (!event.nativeEvent) {
  25. return;
  26. }
  27. let data = {};
  28. // Sometimes the message is invalid JSON, so we ignore that case
  29. try {
  30. data = JSON.parse(event.nativeEvent.data);
  31. } catch (error) {
  32. console.error(error);
  33. return;
  34. }
  35. const { height, width } = data;
  36. const { height: previousHeight, width: previousWidth } = size;
  37. isSizeChanged({ height, previousHeight, width, previousWidth }) &&
  38. setSize({
  39. height,
  40. width
  41. });
  42. };
  43. const { currentSource, script } = reduceData({ source, baseUrl, files, customStyle, customScript, zoomable });
  44. const { width, height } = size;
  45. useEffect(
  46. () =>
  47. onSizeUpdated &&
  48. onSizeUpdated({
  49. height,
  50. width
  51. }),
  52. [width, height, onSizeUpdated]
  53. );
  54. return (
  55. <WebView
  56. {...props}
  57. ref={webView}
  58. onMessage={hanldeMessage}
  59. style={[
  60. styles.webView,
  61. {
  62. width,
  63. height
  64. },
  65. style
  66. ]}
  67. injectedJavaScript={script}
  68. source={currentSource}
  69. />
  70. );
  71. }),
  72. (prevProps, nextProps) => !shouldUpdate({ prevProps, nextProps })
  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;