React-native-image-viewer: How do I use image URI for local images instead of source ?

[akhan118]

Hi all,

I'm using react native camera and the takePicture function returns a promise.

the promise has the usual data of an image object , {uri://file}

I would like to take that 'uri' and set it as state so I can pass it to react-native- viewer .

The problem is that I can't set it .

because the require() function gives an error.

example

    props: {
        // Or you can set source directory.
        source: require(data.uri)
    }

it gives an error because the image has to be available when compile.
and data.uri is not available when compile.

Here is a full example of the promise and image

  takePicture = async function() {
    if (this.camera) {
      const data = await this.camera.takePictureAsync()
      .then((data) => {
        this.setState(prevState => {
          return {
            ...prevState,
            Image:[
              ...prevState.Image,
              {
                url: '',
                  props: {
             /// it seems that I can't do that and it causes and error
             ///  how can I pass a local image to the viewer without using require() ?
                      source: require(data.uri),  

                  },
              },
             ]
          };
        })

});
    }
  };

causes this error

Failed to load bundle(http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false) with error:(src/screens/CameraModalScreen.js: src/screens/CameraModalScreen.js:Invalid call at line 140: require(data.uri) (null))

__38-[RCTCxxBridge loadSource:onProgress:]_block_invoke.213
RCTCxxBridge.mm:414
___ZL36attemptAsynchronousLoadOfBundleAtURLP5NSURLU13block_pointerFvP18RCTLoadingProgressEU13block_pointerFvP7NSErrorP9RCTSourceE_block_invoke.118
__80-[RCTMultipartDataTask URLSession:streamTask:didBecomeInputStream:outputStream:]_block_invoke
-[RCTMultipartStreamReader emitChunk:headers:callback:done:]
-[RCTMultipartStreamReader readAllPartsWithCompletionCallback:progressCallback:]
-[RCTMultipartDataTask URLSession:streamTask:didBecomeInputStream:outputStream:]
__88-[NSURLSession delegate_streamTask:didBecomeInputStream:outputStream:completionHandler:]_block_invoke
__NSBLOCKOPERATION_IS_CALLING_OUT_TO_A_BLOCK__
-[NSBlockOperation main]
-[__NSOperationInternal _start:]
__NSOQSchedule_f
_dispatch_call_block_and_release
_dispatch_client_callout
_dispatch_continuation_pop
_dispatch_async_redirect_invoke
_dispatch_root_queue_drain
_dispatch_worker_thread2
_pthread_wqthread
start_wqthread

              <ImageViewer
                loadingRender={() => (
                  <ActivityIndicator
                    color={'white'}
                    size="large"
                    style={{
                      height: Dimensions.get("window").height,
                      alignItems: "center",
                      justifyContent: "center"
                    }}
                  />
                )}
                imageUrls={this.state.Image}
                index={this.state.index}
                saveToLocalByLongPress={false}
                onSwipeDown={() => {
                  console.log("onSwipeDown");
                  this.setModalVisible(!this.state.modalVisible);
                }}
                enableSwipeDown={true}
              />

How can I pass a local image that I captured from camera to the viewer ?

Thanks in advance.

[enri90]

UP similar condition

[akhan118]

I ended up putting the viewer in a component of it's own and pass the images as a state. it worked for me with no issues.

[Nayan014]

Hi,

Image data has uri key not url
You have to add url key in your image data.

Update your image data as bellow.

var url = { url: data.uri }
var newImageData = { ...data, ...url }

[jzyds]

<ImageViewer imageUrls={[ { url: '', props: { source: { uri: data.uri, }, }, }, ]} />

[akhan118]

Thanks !