ERROR Warning: ForwardRef: Support for defaultProps will be removed from memo components in a future major release. Use JavaScript default parameters instead.

[oshilaRightS]

Bug description:

`import { Dimensions } from 'react-native'; import AutoHeightWebView from 'react-native-autoheight-webview';

import { SafeHTMLTypes } from '../../types/CommonTypes';

const SafeHTMLComponent = ({ htmlContent = '', customStyles = '' }: SafeHTMLTypes) => { if (!htmlContent && !Dimensions?.get('window')?.width) { return null; }

return (
    <AutoHeightWebView
        style={{ width: Dimensions.get('window').width }}
        customStyle={
            customStyles ||
            `
            body {
                font-size: 16px;
                line-height: 1.5;
                color: #333;
            }
            p {
                margin: 0 0 10px 0;
            }
            ul {
                padding-left: 20px;
            }
            li {
                margin-bottom: 10px;
            }
            img {
                max-width: 100%;
                height: auto;
            }
        `
        }
        files={[
            {
                href: 'cssfileaddress',
                type: 'text/css',
                rel: 'stylesheet',
            },
        ]}
        source={{ html: htmlContent }}
        viewportContent="width=device-width, user-scalable=no"
    />
);

};

export default SafeHTMLComponent;`

The above is my code, and it returns this error, ERROR Warning: ForwardRef: Support for defaultProps will be removed from memo components in a future major release. Use JavaScript default parameters instead.

and I checked by returning just a text and then there is no error displays and I logged the params before returning the null and I can clearly see values in props even before reaching the return null, which means the component is only rendering with correct props values.

Which clears that the issue is only with the package.

To Reproduce:

Source (static HTML or url):

Expected behavior:

Screenshots/Videos:

Environment:

• OS: Android/iOS
• OS version: 15
• react-native version: 0.76.5,
• react-native-webview version: 13.13.1,
• react-native-autoheight-webview version: 1.6.5,

[7dp]

Experiencing this as well ✋

[vasanshettiTharun]

same here

[7dp]

Hey! I managed to fix this warning (at least for me). Below is the fixed version of index.js file inside node_modules/react-native-autoheight-webview/autoHeightWebView/. To fix the warning you can simply replace that index.js file contents with this:

import React, {useState, useEffect, forwardRef} from 'react';

import {StyleSheet, Platform} from 'react-native';

import {ViewPropTypes} from 'deprecated-react-native-prop-types';
import PropTypes from 'prop-types';

import {WebView} from 'react-native-webview';

import {
  topic,
  reduceData,
  getWidth,
  isSizeChanged,
  shouldUpdate,
} from './utils';

const AutoHeightWebView = React.memo(
  forwardRef(({
      style,
      onMessage,
      onSizeUpdated,
      scrollEnabledWithZoomedin,
      scrollEnabled,
      showsVerticalScrollIndicator = false,
      showsHorizontalScrollIndicator = false,
      originWhitelist = ['*'],
      viewportContent = Platform.OS === 'ios' ? 'width=device-width' : undefined,
      scalesPageToFit = Platform.OS === 'android' ? false : undefined,
      ...restProps
    }, ref) => {

    const [size, setSize] = useState({
      height: style && style.height ? style.height : 0,
      width: getWidth(style),
    });

    const [scrollable, setScrollable] = useState(false);
    const handleMessage = (event) => {
      if (event.nativeEvent) {
        try {
          const data = JSON.parse(event.nativeEvent.data);
          if (data.topic !== topic) {
            onMessage && onMessage(event);
            return;
          }
          const {height, width, zoomedin} = data;
          !scrollEnabled &&
            scrollEnabledWithZoomedin &&
            setScrollable(!!zoomedin);
          const {height: previousHeight, width: previousWidth} = size;
          isSizeChanged({height, previousHeight, width, previousWidth}) &&
            setSize({
              height,
              width,
            });
        } catch (error) {
          onMessage && onMessage(event);
        }
      } else {
        onMessage && onMessage(event);
      }
    };

    const currentScrollEnabled =
      scrollEnabled === false && scrollEnabledWithZoomedin
        ? scrollable
        : scrollEnabled;

    const {currentSource, script} = reduceData({...restProps, style, viewportContent});

    const {width, height} = size;
    useEffect(() => {
      onSizeUpdated &&
        onSizeUpdated({
          height,
          width,
        });
    }, [width, height, onSizeUpdated]);

    return React.createElement(WebView, {
      ...restProps,
      ref,
      onMessage: handleMessage,
      style: [
        styles.webView,
        {
          width,
          height,
        },
        style,
      ],
      injectedJavaScript: script,
      source: currentSource,
      scrollEnabled: currentScrollEnabled,
      showsHorizontalScrollIndicator,
      showsVerticalScrollIndicator,
      originWhitelist,
      scalesPageToFit,
      viewportContent,
    });
  }),
  (prevProps, nextProps) => !shouldUpdate({prevProps, nextProps}),
);

AutoHeightWebView.propTypes = {
  onSizeUpdated: PropTypes.func,
  files: PropTypes.arrayOf(
    PropTypes.shape({
      href: PropTypes.string,
      type: PropTypes.string,
      rel: PropTypes.string,
    }),
  ),
  style: ViewPropTypes.style,
  customScript: PropTypes.string,
  customStyle: PropTypes.string,
  viewportContent: PropTypes.string,
  scrollEnabledWithZoomedin: PropTypes.bool,
  // webview props
  originWhitelist: PropTypes.arrayOf(PropTypes.string),
  onMessage: PropTypes.func,
  scalesPageToFit: PropTypes.bool,
  source: PropTypes.object,
};

const styles = StyleSheet.create({
  webView: {
    backgroundColor: 'transparent',
  },
});

export default AutoHeightWebView;

And for persistent patch across yarn install you can use patch-package. Have a nice day! 🌤️

[quuentinho]

Do you know an alternative ?

[7dp]

@QuentinBoulay Maybe just use react-native-webview and with fixed height.. 🧐 Or you can try that fix of mine above by patching the node_modules

[GowthamResbee]

same issue

[aliceni81]

Here is the solution. https://github.com/iou90/react-native-autoheight-webview/pull/264