CODEWITHSUNDEEP
react-nativeexpo
Gene
Gene

Reputation: 2218

expo -base64 image not dynamically displaying after retrieving from camera

I'm trying to :

1) Press a button to access camera(Navigate to next screen)

2) Take a photo

3) Go back to main screen

4) Display the photo on the main screen

Currently I have the base64 image string retrieved from the 2nd screen to the main screen but I'm unable to show it in the main screen. Would appreciate some pointers on this. Thanks!

MainScreen:

constructor() {
    super()
    this.state = {
       base64Image: ''
    }
 }
 ...
<Button
 title="Camera"
 onPress={() => this.props.navigation.navigate('Camera', {
 onGoBack: this.refresh,
 })}
 />

 <Image
   style={{width: 100, height: 100}}
   source={{uri: 'data:image/png;base64,${this.state.base64Image}'}}
 />
 ...
refresh=(data)=> {
    console.log("Invoked from camera method");
    console.log(data);
    this.setState({base64Image: data});
 }

2nd Screen(camera screen)

 await this.camera.takePictureAsync(options).then(photo => {          
    this.props.navigation.state.params.onGoBack(photo.base64);   
    this.props.navigation.goBack();        
 });

Upvotes: 2

Views: 1746

Answers (1)

giotskhada
giotskhada

Reputation: 2452

You have to include {base64: true} in your options on this line

await this.camera.takePictureAsync(options).then(photo => {

I'm not sure if you have included that, since you didn't provide your options object in the question.

Also, this is basic, but make sure to use backticks (the one below the esc key) on this line, or the syntax won't work:

source={{uri: 'data:image/png;base64,${this.state.base64Image}'}}

Hope this helps.

Upvotes: 4

Related Questions