-
Notifications
You must be signed in to change notification settings - Fork 67
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
React 0.74 - Update defaultProps to JavaScript default parameters. #43
Comments
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 FileCreate 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
npm install patch-package
{
"scripts": {
"postinstall": "patch-package"
}
}
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.
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. |
After updating to React Native 0.74, the following error/warning is produced.
RN 0.74
RNSI 1.1.0
The text was updated successfully, but these errors were encountered: