ihor/react-native-scalable-image

React Native Image component which scales width or height automatically to keep the original aspect ratio

react-native-scalable-image's Issues

Image not updating when source changes

Had an issue where the image wasn't updating. I looked into the code and concluded that this was due to the image proportions being the same values, so the image wasn't rerendering though it was a different image source, so it should've changed.

I suggest the following change;
(Adding props.source to the dependency's)

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

App crashing due to maximum call stack size exceeded

Hi, updated today to expo-cli 6.14.4 and started to get this warnings, also application crashes. Using Expo 37. Any thoughts on this?

Warning: Please report: Excessive number of pending callbacks: 501. Some pending callbacks that might have leaked by never being called from native code: {"14222":{},"14280":{},"14288":{},"14310":{},"14311":{},"14312":{"module":"ImageViewManager","method":"getSize"},"14313":{"module":"ImageViewManager","method":"getSize"},"14314":{"module":"ImageViewManager","method":"getSize"},"14315":{"module":"ImageViewManager","method":"getSize"},"14316":{"module":"ImageViewManager","method":"getSize"},"14317":{"module":"ImageViewManager","method":"getSize"},"14318":{"module":"ImageViewManager","method":"getSize"},"14319":{"module":"ImageViewManager","method":"getSize"},"14320":{"module":"ImageViewManager","method":"getSize"},"14321":{"module":"ImageViewManager","method":"getSize"},"14322":{"module":"ImageViewManager","method":"getSize"},"14323":{"module":"ImageViewManager","method":"getSize"},"14324":{"module":"ImageViewManager","method":"getSize"},"14325":{"module":"ImageViewManager","method":"getSize"},"14326":{"module":"ImageViewManager","method":"getSize"},"14327":{"module":"ImageViewManager","method":"getSize"},"14328":{"module":"ImageViewManager","method":"getSize"},"14329":{"module":"ImageViewManager","method":"getSize"},"14330":{"module":"ImageViewManager","method":"getSize"},"14331":{"module":"ImageViewManager","method":"getSize"},"14332":{"module":"ImageViewManager","method":"getSize"},"14333":{"module":"ImageViewManager","method":"getSize"},"14334":{"module":"ImageViewManager","method":"getSize"},"14335":{"module":"ImageViewManager","method":"getSize"},"14336":{"module":"ImageViewManager","method":"getSize"},"14337":{"module":"ImageViewManager","method":"getSize"},"14338":{"module":"ImageViewManager","method":"getSize"},"14339":{"module":"ImageViewManager","method":"getSize"},"14340":{"module":"ImageViewManager","method":"getSize"},"14341":{"module":"ImageViewManager","method":"getSize"},"14342":{"module":"ImageViewManager","method":"getSize"},"14343":{"module":"ImageViewManager","method":"getSize"},"14566":{},"14567":{},"14568":{},"14569":{},"14570":{},"14571":{},"14572":{},"14573":{},"14574":{},"14575":{},"14576":{},"14577":{},"14578":{},"14579":{},"14580":{},"14581":{},"14582":{},"14583":{},"14584":{},"14585":{},"14586":{},"14587":{},"14588":{},"14589":{},"14590":{},"14591":{},"14592":{},"14593":{},"14594":{},"14595":{},"14596":{},"14597":{},"14598":{},"14599":{},"14600":{},"14601":{},"14602":{},"14603":{},"14604":{},"14605":{},"14606":{},"14607":{},"14608":{},"14609":{},"14610":{},"14611":{},"14612":{},"14613":{},"14614":{},"14615":{},"14616":{},"14617":{},"14618":{},"14619":{},"14620":{},"14621":{},"14622":{},"14623":{},"14624":{},"14625":{},"14626":{},"14627":{},"14628":{},"14629":{},"14630":{},"14631":{},"14632":{},"14633":{},"14634":{},"14635":{},"14636":{},"14637":{},"14638":{},"14639":{},"14640":{},"14641":{},"14642":{},"14643":{},"14644":{},"14645":{},"14646":{},"14647":{},"14648":{},"14649":{},"14650":{},"14651":{},"14652":{},"14653":{},"14654":{},"14655":{},"14656":{},"14657":{},"14658":{},"14659":{},"14660":{},"14661":{},"14662":{},"14663":{},"14664":{},"14665":{},"14666":{},"14667":{},"14668":{},"14669":{},"14670":{},"14671":{},"14672":{},"14673":{},"14674":{},"14675":{},"14676":{},"14677":{},"14678":{},"14679":{},"14680":{},"14681":{},"14682":{},"14683":{},"14684":{},"14685":{},"14686":{},"14687":{},"14688":{},"14689":{},"14690":{},"14691":{},"14692":{},"14693":{},"14694":{},"14695":{},"14696":{},"14697":{},"14698":{"module":"ImageViewManager","method":"getSize"},"14699":{"module":"ImageViewManager","method":"getSize"},"14700":{"module":"ImageViewManager","method":"getSize"},"14701":{"module":"ImageViewManager","method":"getSize"},"14702":{"module":"ImageViewManager","method":"getSize"},"14703":{"module":"ImageViewManager","method":"getSize"},"14704":{"module":"ImageViewManager","method":"getSize"},"14705":{"module":"ImageViewManager","method":"getSize"},"14706":{"module":"ImageViewManager","method":"getSize"},"14707":{"module":"ImageViewManager","method":"getSize"},"14708":{"module":"ImageViewManager","method":"getSize"},"14709":{"module":"ImageViewManager","method":"getSize"},"14710":{"module":"ImageViewManager","method":"getSize"},"14711":{"module":"ImageViewManager","method":"getSize"},"14712":{"module":"ImageViewManager","method":"getSize"},"14713":{"module":"ImageViewManager","method":"getSize"},"14714":{"module":"ImageViewManager","method":"getSize"},"14715":{"module":"ImageViewManager","method":"getSize"},"14716":{"module":"ImageViewManager","method":"getSize"},"14717":{"module":"ImageViewManager","method":"getSize"},"14718":{"module":"ImageViewManager","method":"getSize"},"14719":{"module":"ImageViewManager","method":"getSize"},"14720":{"module":"ImageViewManager","method":"getSize"},"14721":{"module":"ImageViewManager","method":"getSize"},"14722":{"module":"ImageViewManager","method":"getSize"},"14723":{"module":"ImageViewManager","method":"getSize"},"14724":{"module":"ImageViewManager","method":"getSize"},"14725":{"module":"ImageViewManager","method":"getSize"},"14726":{"module":"ImageViewManager","method":"getSize"},"14727":{"module":"ImageViewManager","method":"getSize"},"14728":{"module":"ImageViewManager","method":"getSize"},"14729":{"module":"ImageViewManager","method":"getSize"},"14955":{},"14956":{},"14957":{},"14958":{},"14959":{},"14960":{},"14961":{},"14962":{},"14963":{},"14964":{},"14965":{},"14966":{},"14967":{},"14968":{},"14969":{},"14970":{},"14971":{},"14972":{},"14973":{},"14974":{},"14975":{},"14976":{},"14977":{},"14978":{},"14979":{},"14980":{},"14981":{},"14982":{},"14983":{},"14984":{},"14985":{},"14986":{},"14987":{},"14988":{},"14989":{},"14990":{},"14991":{},"14992":{},"14993":{},"14994":{},"14995":{},"14996":{},"14997":{},"14998":{},"14999":{},"15000":{},"15001":{},"15002":{},"15003":{},"15004":{},"15005":{},"15006":{},"15007":{},"15008":{},"15009":{},"15010":{},"15011":{},"15012":{},"15013":{},"15014":{},"15015":{},"15016":{},"15017":{},"15018":{},"15019":{},"15020":{},"15021":{},"15022":{},"15023":{},"15024":{},"15025":{},"15026":{},"15027":{},"15028":{},"15029":{},"15030":{},"15031":{},"15032":{},"15033":{},"15034":{},"15035":{},"15036":{},"15037":{},"15038":{},"15039":{},"15040":{},"15041":{},"15042":{},"15043":{},"15044":{},"15045":{},"15046":{},"15047":{},"15048":{},"15049":{},"15050":{},"15051":{},"15052":{},"15053":{},"15054":{},"15055":{},"15056":{},"15057":{},"15058":{},"15059":{},"15060":{},"15061":{},"15062":{},"15063":{},"15064":{},"15065":{},"15066":{},"15067":{},"15068":{},"15069":{},"15070":{},"15071":{},"15072":{},"15073":{},"15074":{},"15075":{},"15076":{},"15077":{},"15078":{},"15079":{"module":"ImageViewManager","method":"getSize"},"15080":{"module":"ImageViewManager","method":"getSize"},"15081":{"module":"ImageViewManager","method":"getSize"},"15082":{"module":"ImageViewManager","method":"getSize"},"15083":{"module":"ImageViewManager","method":"getSize"},"15084":{"module":"ImageViewManager","method":"getSize"},"15085":{"module":"ImageViewManager","method":"getSize"},"15086":{"module":"ImageViewManager","method":"getSize"},"15087":{"module":"ImageViewManager","method":"getSize"},"15088":{"module":"ImageViewManager","method":"getSize"},"15089":{"module":"ImageViewManager","method":"getSize"},"15090":{"module":"ImageViewManager","method":"getSize"},"15091":{"module":"ImageViewManager","method":"getSize"},"15092":{"module":"ImageViewManager","method":"getSize"},"15093":{"module":"ImageViewManager","method":"getSize"},"15094":{"module":"ImageViewManager","method":"getSize"},"15095":{"module":"ImageViewManager","method":"getSize"},"15096":{"module":"ImageViewManager","method":"getSize"},"15097":{"module":"ImageViewManager","method":"getSize"},"15098":{"module":"ImageViewManager","method":"getSize"},"15099":{"module":"ImageViewManager","method":"getSize"},"15100":{"module":"ImageViewManager","method":"getSize"},"15101":{"module":"ImageViewManager","method":"getSize"},"15102":{"module":"ImageViewManager","method":"getSize"},"15103":{"module":"ImageViewManager","method":"getSize"},"15104":{"module":"ImageViewManager","method":"getSize"},"15105":{"module":"ImageViewManager","method":"getSize"},"15106":{"module":"ImageViewManager","method":"getSize"},"15107":{"module":"ImageViewManager","method":"getSize"},"15108":{"module":"ImageViewManager","method":"getSize"},"15109":{"module":"ImageViewManager","method":"getSize"},"15110":{"module":"ImageViewManager","method":"getSize"},"15329":{},"15330":{},"15331":{},"15332":{},"15333":{},"15334":{},"15335":{},"15336":{},"15337":{},"15338":{},"15339":{},"15340":{},"15341":{},"15342":{},"15343":{},"15344":{},"15345":{},"15346":{},"15347":{},"15348":{},"15349":{},"15350":{},"15351":{},"15352":{},"15353":{},"15354":{},"15355":{},"15356":{},"15357":{},"15358":{},"15359":{},"15360":{},"15361":{},"15362":{},"15363":{},"15364":{},"15365":{},"15366":{},"15367":{},"15368":{},"15369":{},"15370":{},"15371":{},"15372":{},"15373":{},"15374":{},"15375":{},"15376":{},"15377":{},"15378":{},"15379":{},"15380":{},"15381":{},"15382":{},"15383":{},"15384":{},"15385":{},"15386":{},"15387":{},"15388":{},"15389":{},"15390":{},"15391":{},"15392":{},"15393":{},"15394":{},"15395":{},"15396":{},"15397":{},"15398":{},"15399":{},"15400":{},"15401":{},"15402":{},"15403":{},"15404":{},"15405":{},"15406":{},"15407":{},"15408":{},"15409":{},"15410":{},"15411":{},"15412":{},"15413":{},"15414":{},"15415":{},"15416":{},"15417":{},"15418":{},"15419":{},"15420":{},"15421":{},"15422":{},"15423":{},"15424":{},"15425":{},"15426":{},"15427":{},"15428":{},"15429":{},"15430":{},"15431":{},"15432":{},"15433":{},"15434":{},"15435":{},"15436":{},"15437":{"module":"ImageViewManager","method":"getSize"},"15438":{"module":"ImageViewManager","method":"getSize"},"15439":{"module":"ImageViewManager","method":"getSize"},"15440":{"module":"ImageViewManager","method":"getSize"},"15441":{"module":"ImageViewManager","method":"getSize"},"15442":{"module":"ImageViewManager","method":"getSize"},"15443":{"module":"ImageViewManager","method":"getSize"},"15444":{"module":"ImageViewManager","method":"getSize"},"15445":{"module":"ImageViewManager","method":"getSize"},"15446":{"module":"ImageViewManager","method":"getSize"},"15447":{"module":"ImageViewManager","method":"getSize"},"15448":{"module":"ImageViewManager","method":"getSize"},"15449":{"module":"ImageViewManager","method":"getSize"},"15450":{"module":"ImageViewManager","method":"getSize"},"15451":{"module":"ImageViewManager","method":"getSize"},"15452":{"module":"ImageViewManager","method":"getSize"},"15453":{"module":"ImageViewManager","method":"getSize"},"15454":{"module":"ImageViewManager","method":"getSize"},"15455":{"module":"ImageViewManager","method":"getSize"},"15456":{"module":"ImageViewManager","method":"getSize"},"15457":{"module":"ImageViewManager","method":"getSize"},"15458":{"module":"ImageViewManager","method":"getSize"},"15459":{"module":"ImageViewManager","method":"getSize"},"15460":{"module":"ImageViewManager","method":"getSize"},"15461":{"module":"ImageViewManager","method":"getSize"},"15462":{"module":"ImageViewManager","method":"getSize"},"15463":{"module":"ImageViewManager","method":"getSize"},"15464":{"module":"ImageViewManager","method":"getSize"},"15465":{"module":"ImageViewManager","method":"getSize"},"15466":{"module":"ImageViewManager","method":"getSize"},"15467":{"module":"ImageViewManager","method":"getSize"},"15468":{"module":"ImageViewManager","method":"getSize"},"15674":{"module":"ImageViewManager","method":"getSize"},"15675":{"module":"ImageViewManager","method":"getSize"},"15676":{"module":"ImageViewManager","method":"getSize"},"15677":{"module":"ImageViewManager","method":"getSize"}}
- node_modules/expo/build/environment/muteWarnings.fx.js:27:24 in error
- node_modules/fbjs/lib/warning.js:30:18 in printWarning
- node_modules/fbjs/lib/warning.js:51:23 in <anonymous>
- node_modules/react-native/Libraries/Utilities/warnOnce.js:29:10 in warnOnce
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:230:12 in processCallbacks
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:266:26 in enqueueNativeCall
- node_modules/react-native/Libraries/BatchedBridge/NativeModules.js:137:10 in fn
- node_modules/react-native/Libraries/Image/Image.ios.js:36:4 in getSize
* http://192.168.1.108:19001/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&minify=false&hot=false:143589:35 in onProps
- node_modules/react-native-scalable-image/index.js:35:4 in ScalableImage
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:16921:31 in commitHookEffectList
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:16970:29 in commitPassiveHookEffects
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:307:15 in invokeGuardedCallbackImpl
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:531:36 in invokeGuardedCallback
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:20061:28 in flushPassiveEffectsImpl
* [native code]:null in flushPassiveEffectsImpl
- node_modules/scheduler/cjs/scheduler.development.js:643:23 in unstable_runWithPriority
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:19597:25 in scheduleCallback$argument_1
- node_modules/scheduler/cjs/scheduler.development.js:482:68 in flushTask
- node_modules/scheduler/cjs/scheduler.development.js:607:20 in flushWork
- node_modules/scheduler/cjs/scheduler.development.js:58:18 in _flushCallback
- node_modules/react-native/Libraries/Core/Timers/JSTimers.js:146:14 in _callTimer
- node_modules/react-native/Libraries/Core/Timers/JSTimers.js:399:17 in callTimers
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:436:47 in __callFunction
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:111:26 in __guard$argument_0
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:384:10 in __guard
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:110:17 in __guard$argument_0
* [native code]:null in callFunctionReturnFlushedQueuea

Custom style doesn't apply to ImageComponent

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]);

Support for this project

@ihor
Hi and thanks for your work.
I made a pull request some weeks ago. Please let me know what you think about it.
If you are not supporting this project anymore I will publish my fork as separate npm package but I prefer to enhance the origin one.
So please let me know if you want to continue your work on this project.
cheers, spoeck

Not able to install in RN64

Unknown Issue

I am not sure why this happened.
I think this is because of
width={Dimensions.get('window').width}

Is there any dependency changes?

Missing request Token for request

When reloading my app, it constantly gets this error

React.PropTypes.number is undefined

Need change to import PropTypes from 'prop-types';

add disabled prop

currently based on implementation, you only pass onPress prop to TouchableOpacity of ReactNative, if we want to disable that functionality for certain point of time, there is no way to do that. please pass disabled prop to that component as well.

i would like to open a pr for this, but i am not sure if it will get merged since there are also other pending pull requests.

Any reason why this component would not work inside a flatlist/scrollview?

I used this library to view a list of products images while maintaining their original aspect ratio. What I noticed was that, only first n products show up. The rest is not showing. I tried different ways to view the list of items, but same result nonetheless.

This my render body:

    <View style={[common.flex, styles.screen]}>
      <HomeHeader />
      <IsLoading />
      {products.length && (
        <FlatList
          data={products}
          horizontal={false}
          keyExtractor={(_, index) => index.toString()}
          style={styles.productsView}
          renderItem={({ item }) => <Product product={item} />}
        />
      )}
   </View>

error: Failed to get size for image

when I fetch an image in a flat list I get this error. the error does not show up in all photos, but when it appears the photo doesn't render.

---

Failed to get size for image: https://trackkid.uc.r.appspot.com/data/subject/5eed2b812008fb363d917844/postAttachment/2020-06-20T22:21:39.227Z-postAttachment.png

Stack trace:
node_modules/react-native/Libraries/YellowBox/YellowBox.js:71:8 in console.warn
node_modules/expo/build/environment/muteWarnings.fx.js:18:23 in warn
node_modules/react-native/Libraries/Image/Image.android.js:143:23 in
node_modules/promise/setimmediate/core.js:37:14 in tryCallOne
node_modules/promise/setimmediate/core.js:123:25 in setImmediate$argument_0
node_modules/react-native/Libraries/Core/Timers/JSTimers.js:146:14 in _callTimer
node_modules/react-native/Libraries/Core/Timers/JSTimers.js:194:17 in _callImmediatesPass
node_modules/react-native/Libraries/Core/Timers/JSTimers.js:458:30 in callImmediates
[native code]:null in callImmediates
node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:407:6 in __callImmediates
node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:143:6 in __guard$argument_0
node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:384:10 in __guard
node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:142:17 in __guard$argument_0
[native code]:null in flushedQueue
[native code]:null in invokeCallbackAndReturnFlushedQueue
...

code:

<Image
source={{
uri: props.attachmenUrl,
method: 'GET',
}}
width={Dimensions.get('window').width}
/>

---

does it work inside ScrollView? [not working]

literally copied the example and it's not working for an image where height>width. Only possible reason is that it's inside a ScrollView?

Is it possible for an image to fill the entire device height depending on the aspect ratio

hi, thanks for the awesome package, i am working on a flatlist newsfeed component the and am using this package to render images on my flatlist component, am worried if the image will cover the entire height of the device screen, please is it possible

Peer dependencies warning on install

Hello, thanks for this awesome library!
When I installed, I got these warnings that I don't know why they appeared since my project is up to date:

warning " > [email protected]" has unmet peer dependency "@types/react@^16.8.23".
warning " > [email protected]" has unmet peer dependency "@types/react-native@^0.60.2".
warning " > [email protected]" has incorrect peer dependency "react-native@^0.59.0".

react-naitve info:

System:
    OS: Linux 5.1 Arch Linux undefined
    CPU: (6) x64 Intel(R) Core(TM) i5-8400 CPU @ 2.80GHz
    Memory: 1.76 GB / 15.59 GB
    Shell: 5.7.1 - /usr/bin/zsh
  Binaries:
    Node: 11.15.0 - /usr/bin/node
    Yarn: 1.16.0 - /usr/bin/yarn
    npm: 6.10.0 - /usr/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    Android SDK:
      API Levels: 26, 28, 29
      Build Tools: 26.0.3, 28.0.3, 29.0.0
      System Images: android-28 | Google Play Intel x86 Atom, android-29 | Google APIs Intel x86 Atom
  npmPackages:
    react: 16.9.0 => 16.9.0
    react-native: 0.61.1 => 0.61.1
  npmGlobalPackages:
    react-native-cli: 2.0.1

I'd like to keep these warning as minimal as possible, any suggestion? Thanks

Running tests with jest generated from react native template

I am trying to run jest tests.
I am very new to all react-native environment so it is all quite problematic for me.

Somewhat I think this lib is breaking my test:

npm test

> [email protected] test /home/atais/Documents/lpuradio
> jest

 PASS  __tests__/App-test.js
  ✓ renders correctly (39ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        1.038s
Ran all test suites.

ReferenceError: You are trying to `import` a file after the Jest environment has been torn down.

      at Object.get Image [as Image] (node_modules/react-native/index.js:39:12)
      **at ScalableImage (node_modules/react-native-scalable-image/index.js:23:87)**
      at renderWithHooks (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:5552:18)
      at updateFunctionComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7499:20)
      at beginWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9033:16)
  console.error
    Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
    
    **Check the render method of `ScalableImage`.
        in ScalableImage**
        in View (created by View)
        in View (created by TabBarItem)
        in View (created by View)
        in View (created by TabBarItem)
        in View (created by View)
        in View (created by TabBarItem)
        in View (created by View)
        in View (created by AnimatedComponent)
        in AnimatedComponent (created by ForwardRef(AnimatedComponentWrapper))
        in ForwardRef(AnimatedComponentWrapper) (created by TouchableOpacity)
        in TouchableOpacity (created by ForwardRef)
        in ForwardRef (created by TouchableItem)
        in TouchableItem (created by TabBarItem)
        in TabBarItem (created by TabBar)
        in View (created by View)
        in View (created by ScrollView)
        in RCTScrollView (created by RCTScrollView)
        in RCTScrollView (created by ScrollView)
        in ScrollView (created by ForwardRef)
        in ForwardRef (created by AnimatedComponent)
        in AnimatedComponent (created by ForwardRef(AnimatedComponentWrapper))
        in ForwardRef(AnimatedComponentWrapper) (created by TabBar)
        in View (created by View)
        in View (created by TabBar)
        in View (created by View)
        in View (created by TabBar)
        in TabBar (created by Pager)
        in Pager (created by TabView)
        in View (created by View)
        in View (created by TabView)
        in TabView (created by App)
        in App

      at printWarning (node_modules/react/cjs/react.development.js:315:30)
      at error (node_modules/react/cjs/react.development.js:287:5)
      at Object.createElementWithValidation [as createElement] (node_modules/react/cjs/react.development.js:1788:7)
      at ScalableImage (node_modules/react-native-scalable-image/index.js:35:56)
      at renderWithHooks (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:5552:18)
      at updateFunctionComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7499:20)
      at beginWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9033:16)

  console.error
    Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
    
    ....

aaaand it's all the same couple of times.

I am quite stuck.

componentWillReceiveProps is deprecated

Hi. Just upgraded to React Native 0.60 (which uses React 16.8.6) and I get this warning:

componentWillReceiveProps is deprecated and will be removed in the next major version. Use static getDerivedStateFromProps instead.

Please update the follwing components: SafeView, ScalableImage, Transitioner

Learn more about this warning here: https://fb.me/react-async-component-lifecycle-hooks

Black background on Images when using borderRadius property in Styles

Hi, I have been using react-native-scalable-image for my images but there is a weird black background when I am providing both width and height to the ScaleableComponent.

Using react-native 0.64.2
"react-native-scalable-image": "^1.1.0",

 <ScalableImage
   source={{
             uri: item.ordered_items[0].image_url,
    }}
    width={widthScaleSub(64) / 2}
    height={heightScale(140)}
    style={[
      styles.listCardFirstImage,
     ]}
  resizeMode="contain"
    />

Styles

 listCardFirstImage: {
      width: widthScaleSub(64) / 2,
      height: heightScale(140),  
      backgroundColor: color.bgDark,
      borderRadius: heightScale(10),
   },
    

Note: When removing the borderRadius the black background is gone, what is happening in the background.

Some context or help would be awesome.

Use Animated.Image instead of Image?

I want to implement pinch-zoom to images, but it needs animated component. Would you consider this is a prop that is needed to add?

Suggestion: FastImage support

Hi @ihor
Awesome package. Can you please provide fastImage support? Image component doesn't caches images

Request Token crash

Request token crash is caused when componentWillReceiveProps is fired multiple times in quick succession. To fix, just change componentWillReceiveProps to:

 if (!_.isEqual(nextProps.source, this.props.source) || this.props.enableFastProps)
      this.onProps(nextProps);

and add lodash as a peer dependency. I also swapped Image for FastImage.

How to add an icon to top right or bottom?

Hi,

background prop is provided by you but how do I get the height so that I can place an icon on top of the ImageBackground component. could you please share an example? i tried to use the onSize prop, but it does not update the content inside the ImageBackground.

Not compatible with react-native-web

The lib is not compatible to be used in a monorepo with react-native-web. Here is the error:

ERROR in ./node_modules/react-native-scalable-image/index.js 43:12
Module parse failed: Unexpected token (43:12)
File was processed with these loaders:

• ./node_modules/source-map-loader/dist/cjs.js
  You may need an additional loader to handle the result of these loaders.
  | useEffect(() => {
  | setImage(
  |> <ImageComponent
  | {...props}
  | style={[props.style, {

react 17

I can't install the package because it breaks the dependency tree, since it only supports react ^16, can you update the dependency for this package?

Support for SVG

At the moment of writing this library does not support svg files. This would be very helpfull to me.

[Question] WebP Support

I am trying to use this library on iOS with WebP images, and I keep getting the same error as in #17.

What I tried:
Adding the WebP binary to the project. I was able to load a WebP image in the native <Image/> component from react-native with this, but It didn't help for <Image /> from react-native-scalable-image.

On Android it works fine.

Looking at the source code, it seems like the library is wrapping the native `' component from 'react-native', so I would have thought that it would work if it works with the native component.

Bump react verison to 17

Hello,
my pipeline processes fail due to conflict in React versions.
The latest release of React Native uses react@"17.0.1", but this library requires react@"^16.8.3". Could you please update this dependency?

Suggestion: Please add this as an option to RN Image

Hi @ihor ,
Thanks for this awesome, small & useful package. I think it's better to add this feature officially to RN Image component.
For example as a auto_scale: true / false option.
If you agree thinking about add this to RN core 🤔 😉

Image.getSize does not work for static images

Image.getSize does not work for static images and therefore the library will fail when you use static or local images.