1

I’m trying to require an image downloaded with react-native-fetch-blob in my Image component, but when I give it the image path it keeps saying me « Unknow named module: ‘/Users/…/Library/…’

What is the right way to require images stored in a local directory ?

let imagePath = null

RNFetchBlob
  .config({
     fileCache : true
  })
  .fetch('GET', uri)
  // the image is now dowloaded to device's storage
  .then((resp) => {
     // the image path you can use it directly with Image component
     imagePath = resp.path()
     this.setState({ uri: require(imagePath) })

     try {
       AsyncStorage.setItem(`${this.props.uri}`, imagePath);
     } catch (error) {
       console.log(error)
     }
  })

My render method :

render() {
    return(
      <Image style={this.props.style} source={this.state.uri} />
    )
}

The problem is not because I set a variable as source because it's working when I put something like : this.setState({ uri: require('../images/test.jpg') }) after my download.

Nicolas Meienberger
  • 777
  • 2
  • 8
  • 18

1 Answers1

4

require(imagePath) exists to help packager to find local images and place them to application bundle.

When you need to show dynamically loaded image, you simple need to pass file location as URI, for ex:

render() {
  const imageAbsolutePath = this.state.imagePath;
  const imageUri = 'file://' + imageAbsolutePath;
  return <Image source={{uri: imageUri}}/>;
}

So, you shold not need any require statements in this case.

  • I need to show the images with absolute path in ListView item. When i do this in listviewItem, It throws error ExceptionsManager.js:73 The RCTURLRequestHandlers and both reported that they can handle the request { URL: /Users/apple/Library/Developer/CoreSimulator/Devices/0D5D7EF6-DD5E-4EB3-8B54-4E7970099F17/data/Containers/Data/Applicati ... rews.png }, and have equal priority (0). This could result in non-deterministic behavior. How can I resolve this. Please help. – Arun K Apr 10 '18 at 07:01