manssorr
commented
4 months ago I have updated the ScalableImage component to use JavaScript default parameters instead of defaultProps. Below is the patch you can use to fix this issue:
Patch File
Create a file named react-native-scalable-image+1.1.0.patch in the patches directory of your project with the following content:
diff --git a/node_modules/react-native-scalable-image/index.js b/node_modules/react-native-scalable-image/index.js
index 655e3b3..44b65ff 100644
--- a/node_modules/react-native-scalable-image/index.js
+++ b/node_modules/react-native-scalable-image/index.js
@@ -1,123 +1,125 @@
-import React, {
- useState,
- useEffect,
- useRef
-} from 'react';
+import React, {useState, useEffect, useRef} from "react";
-import PropTypes from 'prop-types';
+import PropTypes from "prop-types";
-import {
- Image,
- TouchableOpacity,
- ImageBackground
-} from 'react-native';
+import {Image, TouchableOpacity, ImageBackground} from "react-native";
const resolveAssetSource = Image.resolveAssetSource;
-const ScalableImage = props => {
- const ImageComponent = props.component
- ? props.component
- : props.background
- ? ImageBackground
- : Image;
-
- const [scalableWidth, setScalableWidth] = useState(null);
- const [scalableHeight, setScalableHeight] = useState(null);
- const [image, setImage] = useState(null);
- const mounted = useRef(false);
-
- useEffect(() => {
- mounted.current = true;
-
- return () => {
- mounted.current = false;
- }
- }, []);
-
- useEffect(() => {
- onProps(props);
- });
-
- useEffect(() => {
- setImage(
- <ImageComponent
- {...props}
- style={[props.style, {
- width: scalableWidth,
- height: scalableHeight
- }]}
- />
- );
- }, [scalableHeight, scalableWidth]);
-
- const onProps = localProps => {
- const { source } = localProps;
- if (source.uri) {
- const sourceToUse = source.uri
- ? source.uri
- : source;
-
- Image.getSize(
- sourceToUse,
- (width, height) => adjustSize(width, height, props),
- console.err
- );
- }
- else {
- const sourceToUse = resolveAssetSource(source);
- adjustSize(sourceToUse.width, sourceToUse.height, props);
- }
- };
-
- const adjustSize = (sourceWidth, sourceHeight, localProps) => {
- const { width, height } = localProps;
-
- let ratio = 1;
-
- if (width && height) {
- ratio = Math.min(width / sourceWidth, height / sourceHeight);
- }
- else if (width) {
- ratio = width / sourceWidth;
- }
- else if (height) {
- ratio = height / sourceHeight;
- }
-
- if (mounted.current) {
- const computedWidth = sourceWidth * ratio;
- const computedHeight = sourceHeight * ratio;
-
- setScalableWidth(computedWidth);
- setScalableHeight(computedHeight);
-
- props.onSize({ width: computedWidth, height: computedHeight });
- }
- };
-
- if (!props.onPress) {
- return image;
- }
- else {
- return (
- <TouchableOpacity onPress={props.onPress}>
- {image}
- </TouchableOpacity>
- );
- }
+const ScalableImage = ({
+ component,
+ background = false,
+ onSize = (size) => {},
+ width,
+ height,
+ onPress,
+ style,
+ source,
+ ...props
+}) => {
+ const newCompinedProps = {
+ component,
+ background,
+ onSize,
+ width,
+ height,
+ onPress,
+ style,
+ source,
+ ...props,
+ };
+
+ const ImageComponent = component
+ ? component
+ : background
+ ? ImageBackground
+ : Image;
+
+ const [scalableWidth, setScalableWidth] = useState(null);
+ const [scalableHeight, setScalableHeight] = useState(null);
+ const [image, setImage] = useState(null);
+ const mounted = useRef(false);
+
+ useEffect(() => {
+ mounted.current = true;
+
+ return () => {
+ mounted.current = false;
+ };
+ }, []);
+
+ useEffect(() => {
+ onProps(newCompinedProps);
+ });
+
+ useEffect(() => {
+ setImage(
+ <ImageComponent
+ {...newCompinedProps}
+ style={[
+ style,
+ {
+ width: scalableWidth,
+ height: scalableHeight,
+ },
+ ]}
+ />
+ );
+ }, [scalableHeight, scalableWidth]);
+
+ const onProps = (localProps) => {
+ const {source} = localProps;
+ if (source.uri) {
+ const sourceToUse = source.uri ? source.uri : source;
+
+ Image.getSize(
+ sourceToUse,
+ (width, height) => adjustSize(width, height, newCompinedProps),
+ console.err
+ );
+ } else {
+ const sourceToUse = resolveAssetSource(source);
+ adjustSize(sourceToUse.width, sourceToUse.height, newCompinedProps);
+ }
+ };
+
+ const adjustSize = (sourceWidth, sourceHeight, localProps) => {
+ const {width, height} = localProps;
+
+ let ratio = 1;
+
+ if (width && height) {
+ ratio = Math.min(width / sourceWidth, height / sourceHeight);
+ } else if (width) {
+ ratio = width / sourceWidth;
+ } else if (height) {
+ ratio = height / sourceHeight;
+ }
+
+ if (mounted.current) {
+ const computedWidth = sourceWidth * ratio;
+ const computedHeight = sourceHeight * ratio;
+
+ setScalableWidth(computedWidth);
+ setScalableHeight(computedHeight);
+
+ onSize({width: computedWidth, height: computedHeight});
+ }
+ };
+
+ if (!onPress) {
+ return image;
+ } else {
+ return <TouchableOpacity onPress={onPress}>{image}</TouchableOpacity>;
+ }
};
ScalableImage.propTypes = {
- width: PropTypes.number,
- height: PropTypes.number,
- onPress: PropTypes.func,
- onSize: PropTypes.func,
- background: PropTypes.bool,
-};
-
-ScalableImage.defaultProps = {
- background: false,
- onSize: size => {}
+ width: PropTypes.number,
+ height: PropTypes.number,
+ onPress: PropTypes.func,
+ onSize: PropTypes.func,
+ background: PropTypes.bool,
};
export default ScalableImage;
How to Apply the Patch
- Install patch-package:
npm install patch-package- Add the postinstall script in your package.json to apply patches automatically after installing packages:
{
"scripts": {
"postinstall": "patch-package"
}
}- Create the Patch File:
Save the above patch file content in a file named react-native-scalable-image+1.1.0.patch in the patches directory of your project.
- Run
npm install:
This will automatically apply the patch.
By following these steps, you can resolve the deprecation warning while ensuring compatibility with future React releases.
And maybe I can make PR for this in the future.
bruce-mec
After updating to React Native 0.74, the following error/warning is produced.
RN 0.74 RNSI 1.1.0