Warning: Support for defaultProps will be removed from function components

[kashmiry]

Describe the bug
After upgrading to RN 0.74 Now I receive these warnings, in screens where the component is present.

 ERROR  Warning: AnimatableImage: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.
    in AnimatableImage (created by ImagePolyfill)
    in ImagePolyfill (created by AutoHeightImage)
    in AutoHeightImage (created by ErrorableImage)

Dependencies versions (please complete the following information):

• react: 18.2.0
• react-native: 0.74.6

[sbaiahmed1]

I have submitted a pr hoping it will be merged soon #127

[sbaiahmed1]

@vivaxy can you please see the PR when you got time :D thank you

[DiguinhoLNS]

Same error here, some fix?

[George3d6]

@vivaxy any updates on merging this?
Would become a library-breaking issue quite soon.

[k-angama]

You can add a patch file directly to your project: patches/react-native-auto-height-image+3.2.4.patch

Then add the following content inside your patch file:

diff --git a/node_modules/react-native-auto-height-image/AutoHeightImage.js b/node_modules/react-native-auto-height-image/AutoHeightImage.js
index 9a0e45a..8767d49 100644
--- a/node_modules/react-native-auto-height-image/AutoHeightImage.js
+++ b/node_modules/react-native-auto-height-image/AutoHeightImage.js
@@ -15,14 +15,15 @@ const { resizeMode, ...ImagePropTypes } = AnimatableImage.propTypes;
 
 function AutoHeightImage(props) {
   const {
-    onHeightChange,
+    onHeightChange = NOOP,
     source,
     width,
     style,
-    maxHeight,
+    maxHeight = Infinity,
     onError,
     ...rest
   } = props;
+  const { animated = false, ...otherProps } = rest;
   const [height, setHeight] = useState(
     getImageSizeFitWidthFromCache(source, width, maxHeight).height ||
       DEFAULT_HEIGHT
@@ -69,7 +70,8 @@ function AutoHeightImage(props) {
       source={source}
       style={[imageStyles, style]}
       onError={onError}
-      {...rest}
+      animated={animated}
+      {...otherProps}
     />
   );
 }
@@ -82,10 +84,4 @@ AutoHeightImage.propTypes = {
   animated: PropTypes.bool
 };
 
-AutoHeightImage.defaultProps = {
-  maxHeight: Infinity,
-  onHeightChange: NOOP,
-  animated: false
-};
-
 export default AutoHeightImage;
diff --git a/node_modules/react-native-auto-height-image/AnimatableImage.js b/node_modules/react-native-auto-height-image/AnimatableImage.js
index d38d539..ac3850d 100644
--- a/node_modules/react-native-auto-height-image/AnimatableImage.js
+++ b/node_modules/react-native-auto-height-image/AnimatableImage.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { Animated, Image, ImageBackground } from 'react-native';
 
 function AnimatableImage(props) {
-  const { animated, children, ...rest } = props;
+  const { animated = false, children, ...rest } = props;
 
   const ImageComponent = children
     ? ImageBackground
@@ -16,8 +16,4 @@ function AnimatableImage(props) {
 
 AnimatableImage.propTypes = Image.propTypes | Animated.Image.propTypes;
 
-AnimatableImage.defaultProps = {
-  animated: false
-};
-
 export default AnimatableImage;
diff --git a/node_modules/react-native-auto-height-image/ImagePolyfill.js b/node_modules/react-native-auto-height-image/ImagePolyfill.js
index f0018f4..2b89916 100644
--- a/node_modules/react-native-auto-height-image/ImagePolyfill.js
+++ b/node_modules/react-native-auto-height-image/ImagePolyfill.js
@@ -11,7 +11,7 @@ const isAndroid = () => Platform.OS === 'android';
  * This component should only be used for loading remote images, not local resources.
  */
 function ImagePolyfill(props) {
-  const { source, onError, ...rest } = props;
+  const { source, onError, animated = false, ...rest } = props;
 
   const verifyImage = () => {
     const { uri } = source;
@@ -24,10 +24,9 @@ function ImagePolyfill(props) {
     }
   }, [source, onError]);
 
-  return <AnimatableImage source={source} {...rest} />;
+  return <AnimatableImage source={source} animated={animated} {...rest} />;
 }
 
 ImagePolyfill.propTypes = AnimatableImage.propTypes;
-ImagePolyfill.defaultProps = AnimatableImage.defaultProps;
 
 export default ImagePolyfill;

To use this patch, install patch-package in your project:

npm install patch-package --save-dev

Then add the following script to your package.json:

"scripts": {
    ...
    "postinstall": "patch-package"
}

Finally, start your React Native project:

npx react-native start

It works for me.

[sbaiahmed1]

I ditched the library already @k-angama