Could not add resizeMode property to cacheable image

[shubhi15]

Hello

I get an error on adding resizeMode: 'contain' property to style object of cacheable image.

While the native Image object supports the resizeMode property on style object.

Regards Shubhi

[billmalarky]

Hi Shubhi,

Can you post sample code where you initialize CacheableImage and also how you use it in a render function?

Thanks

[shubhi15]

Hello I have created instance of cacheable image as follow

import imageCacheHoc from 'react-native-image-cache-hoc';
const CacheableImage = new imageCacheHoc(Image, {
    fileHostWhitelist: ['localhost', 'i.redd.it'],
    validProtocols: ['http', 'https'],
    defaultPlaceholder: defaultPlaceholderObject
});

Within render i am using cacheableimage as follow:

<CacheableImage

                            style={{
                                height: this.state.newHeight,
                                width: width * 0.85,
                                marginTop: 10,
                                resizeMode: 'contain'

                            }}
                            source={{ uri: this.props.imageRef.ImageLink }}
                            onLoad={(event) => this.onSourceLinkEnd(event)}
                            onError={(event) => this.onSourceLinkError(event)}
                            onLoadStart={(event) => this.onSourceLinkLoadStart(event)} />

Upon app startup it is giving me warning /error invalid property resizemode passed to _class. I am using react-native version 0.53. Although native Image object supports resizeMode style object property. Regards Shubhi

[billmalarky]

Have you done a "sanity check" and tried this code using the standard <Image> to see if it works? The CacheableImage logic simply passes CacheableImage props directly through to the underlying Image component, see here, so I wonder if your syntax is incorrect in some way?

Also during this "sanity check" testing, I suggest you simplify further and remove the defaultPlaceholder option so we can rule that out as not being the issue.

Tangentially related but could be useful: https://stackoverflow.com/questions/36436913/image-contain-resizemode-not-working-in-react-native

[cris-santos]

I'm also facing this issue :/ @shubhi15 did you manage to make it work? @billmalarky it works with RN <Image /> using resizeMode: Image.resizeMode.center

[Jbcampbe]

I think this error is stemming from the viewPropTypes check on the style object. It looks like in react-native 0.50 resizeMode was a prop passed directly to the image instead of being defined in the styles?