fetch(${imageUrl}) throw RCTDeviceEventEmitter:emit error when fetch image without Debug JS Remotely

[peichao01]

Description

when fetch(imgUrl), throw an error(and can not relation to fetch API after read the Error message),
works fine in Debug JS Remotely

Reproduction

componentDidMount() {
  var avatarUrl = 'https://avatars1.githubusercontent.com/u/844740?v=3&s=88';
  fetch(avatarUrl);
}

Solution

Additional Information

• React Native version: [0.39, 0.40]
• Platform: [Android6, not test Android7, not test iOS]
• Operating System: [MacOS]

[yinoneliraz]

Got the same error with componentWillReceiveProps.

  componentWillReceiveProps(nextProps){
    var temp;
    temp=this.state.profileInfo;
    temp.image='http://s3.amazonaws.com/cdn.roosterteeth.com/default/tb/user_profile_female.jpg';
    this.setState({
      profileInfo:temp,
    }, () => {
      console.log(this.props);
      console.log("Updated!!!");

      var api = 'https://graph.facebook.com/' + nextProps.owner_id +
        '/picture?type=normal&access_token=' + nextProps.credentials.token;
      fetch(api)
        .then((response) => {
          var temp;
          temp = this.state.profileInfo;
          temp.image = response.url;
          this.setState({
            profileInfo: temp,
          });
        })
        .done();
    });
  },

[eggytronixx]

I got the same issue. It only works in Debug JS Remotely using the fetch API. Idk if this is useful in your case, but I did the following. I created an AsyncImage Component to handle prefetching source, and using defaultSource in till Image prefetch completes.

class AsyncImage extends Component {

constructor(){
    super();

    this.state = {
        isLoadable: false
    };

}

componentWillMount(){

    const {source} = this.props;

    if(source && source.uri){

        this.fetchSource(source);

    }

}

async fetchSource(source){

    let res;

    try {

        await Image.prefetch(source.uri)

    } catch(e){

        return new Promise(resolve => this.setState({isLoadable: false}));

    }

    return new Promise(resolve => this.setState({isLoadable: true}));


}

render(){

    const {isLoadable} = this.state;
    const {round, size, defaultSource, source} = this.props;

    let imgStyles = {
        height: size,
        width: size,
        borderWidth: 0.5,
    }

    if (round){
        imgStyles.borderRadius = size / 2;
    }

    return <Image style={imgStyles} source={isLoadable ? source : defaultSource}/>

}
}

[arsenslyusarchuk]

Similar issue happens on Android (IOS works fine). Anybody resolved this?

[hbarylskyi]

Same issue while fetching images on react-native v0.44.1

[cbjs]

+1

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. If you think this issue should definitely remain open, please let us know why. Thank you for your contributions.