0

I followed the documentation it worked but using image data returned after capturing doesn't appear on the new screen. I have searched but not getting any solution for navigating image data.

this is the code for passing the image data to the next screen, alongside a test

the screen for receiving the captured image

receiving the captured image in an image component

passing image data to state(path and pathBase64)

Immanuel
  • 21
  • 1
  • 7

3 Answers3

1

navigate to the screen using this code, here imageFile is the state where you stored your image after capturing from the camera.

props.navigation.navigate("navigation_route",{image: imageFile})

then, use this code to fetch the image on the other screen.

let image = props.navigation.getParam('image')
Sardar Usama
  • 97
  • 1
  • 11
  • I get TypeError: navigation.getParam is not a function, navigation.getParam is undefined. – Immanuel Aug 26 '20 at 09:57
  • which react-navigation version you are using? – Sardar Usama Aug 26 '20 at 10:21
  • I am using react-navigation version 5.x https://reactnavigation.org/docs/params/ – Immanuel Aug 26 '20 at 10:33
  • use this code then, const { itemId } = props.route.params; – Sardar Usama Aug 26 '20 at 10:34
  • I did that it didn't work(appear on the next screen) for the image data being passed, but worked for a test which I passed alongside the image data. – Immanuel Aug 26 '20 at 10:51
  • you might be not passing image date properly, can you upload the code where you are storing the image in your state? – Sardar Usama Aug 26 '20 at 10:53
  • simply pass the uri to your next screen and in Image tag simply write that variable source={{uri: passedUri}} – Sardar Usama Aug 26 '20 at 11:26
  • Thanks, Sardar through your contribution I figured it out. passed the base64 of the image data onPressOut={()=> {navigation.navigate('EvidenceSubmission' , { transferredImage: camState.pathBase64, })}} received it on the next screen as source= { {uri: `data:image/jpeg;base64, ${transferredImage}`}} – Immanuel Aug 26 '20 at 12:55
  • but the image delays some seconds before appearing the next screen – Immanuel Aug 26 '20 at 13:02
0

to receive the image in the next screen use the below code

let image = props.route.params.image
Sourav Dey
  • 1,051
  • 1
  • 13
  • 21
0

screen to send the image function: navigation.navigate('RouteName', {imageTobeTransferred:
state.imageInBase64})

receiving Screen. const { imageTobeTransferred } = route.params; return( <Image style={{...}} source= { {uri: data:image/jpeg;base64, ${imageTobeTransferred}}}/> )

Immanuel
  • 21
  • 1
  • 7