Custom style doesn't apply to ImageComponent

[rajtejani]

useEffect(() => {
        setImage(
            <ImageComponent
                {...props}
                style={[props.style, {
                    width: scalableWidth,
                    height: scalableHeight
                }]}
            />
        );
    }, [scalableHeight, scalableWidth]);

should be refactored to

useEffect(() => {
    const {style, ...restProps} = props;
    setImage(
        <ImageComponent
             {...restProps}
              style={[style, {
                width: scalableWidth,
                height: scalableHeight
            }]}
        />
    );
}, [scalableHeight, scalableWidth]);

[AlkanV]

any update on this? i need to apply customStyles to image component like borderRadius.

[rajtejani]

@AlkanV You can use this solution which I used in my project.

run npm install patch-package

Open /node_modules/react-native-scalable-image/index.js

Replace code at Line 41 with below one

useEffect(() => {
    const {style, ...restProps} = props;
    setImage(
        <ImageComponent
             {...restProps}
              style={[style, {
                width: scalableWidth,
                height: scalableHeight
            }]}
        />
    );
}, [scalableHeight, scalableWidth]);

Now run this on your terminal/cmd/powershell npx patch-package react-native-scalable-image

after that, you will see a patches foldee is created. Add files inside this folder to git.

Then Open package.json and add this postscript inside the script section.

"postinstall": "patch-package",

This is a permanent fix. You will not need to do these changes again whenever you add or remove any dependency.