React-native-image-viewer: TypeError when a local file is set

[nekki-t]

Hi there,

I'm having a problem regarding with loading a local image.
I've been trying to do it by writing code as follows:

<ImageViewer
    imageUrls={[{ props: { source: require('../assets/images/Sample.png') } }]}
/>

Then, I'm receiving errors as in the image below.

Please kindly help me solve this problem.

[ascoders]

Maybe it's not a bug. See the warning line: This error is a performance optimization and not spec compliant.

[nekki-t]

Thanks!

I don't think it is a bug, either, but an optimization issue.
Besides, do you have any suggestions to clear this problem out?

[ascoders]

I want to clear it too~, anyone help?

[orestis-z]

Same here

[orestis-z]

This could help: https://github.com/erikras/redux-form/issues/3298#issuecomment-326271239

[ascoders]

Thanks @zamponotiropita ! I fixed it in 2.2.4.

[orestis-z]

@ascoders great, it works now!

[orestis-z]

@ascoders in 2.2.4 first image is not shown now (black)

[ascoders]

Hi, @zamponotiropita , can you give an example?
I can't reproduce in my environment.

[orestis-z]

@ascoders Sure, I tried to produce a minimum example.
Tested on Pixel Android emulator API 26.

the problem (not showing certain images) persists with local as well as remote images.

import React, { Component } from 'react';
import {
  View,
  Modal,
  TouchableNativeFeedback,
} from 'react-native';
import ImageViewer from 'react-native-image-zoom-viewer';


const images = [{
    url: 'https://avatars2.githubusercontent.com/u/7970947?v=3&s=460'
}, {
    url: 'https://avatars2.githubusercontent.com/u/7970947?v=3&s=460'
}, {
    url: 'https://avatars2.githubusercontent.com/u/7970947?v=3&s=460'
}]


export default class Main extends Component {
  state = {
    index: 0,
    modalVisible: false,
  }

  render() {
    return (
      <View
        style={ {
          padding: 10,
        } }
      >
        <Modal
          visible={ this.state.modalVisible }
          transparent={true}
          onRequestClose={ () =>
            this.setState({modalVisible: false})
          }
        >
          <ImageViewer
            imageUrls={ images }
            index={ this.state.index }
          />
        </Modal>
          <TouchableNativeFeedback
            onPress={ () => this.setState({
              index: 0,
              modalVisible: true,
            }) }
          >
            <View
              style={ {
                backgroundColor: 'red',
                width: 30,
                height: 30,
              } }
            />
          </TouchableNativeFeedback>
          <TouchableNativeFeedback
            onPress={ () => this.setState({
              index: 1,
              modalVisible: true,
            }) }
          >
            <View
              style={ {
                backgroundColor: 'green',
                width: 30,
                height: 30,
              } }
            />
          </TouchableNativeFeedback>
      </View>
    );
  }
}

package.json:

    "dependencies": {
        "react": "^16.3.2",
        "react-native": "^0.55.4",
        "react-native-image-zoom-viewer": "^2.2.4",
    }

[ascoders]

Sorry, it's my mistake, fixed in 2.2.5.

[orestis-z]

@ascoders great! thanks for your quick fixes :D