How to use an interactive camera, how to access saved pictures?

Question

My goal is to use the built-in camera to respond and just show the picture on the same screen if the photo was taken. I am trying to save the image source as "imageURI". If it exists, I want to show it, if the photograph has not yet been taken, just show the text that says "No image." The camera works for me, since I can track the application, this is saving images to disk. You are having trouble with the following:

• How to assign data of capture functions to a variable when I take a snapshot that I can call later (imageURI).

• I don't know how to make an if statement in Javascript to check if a variable exists.

  import Camera from 'react-native-camera'; export default class camerahere extends Component { _takePicture () { this.camera.capture((err, data) => { if (err) return; imageURI = data; }); } render() { if ( typeof imageURI == undefined) { image = <Text> No Image Yet </Text> } else { image = <Image source={{uri: imageURI, isStatic:true}} style={{width: 100, height: 100}} /> } return ( <View style={styles.container}> <Camera captureTarget={Camera.constants.CaptureTarget.disk} ref={(cam) => { this.camera = cam; }} style={styles.preview} aspect={Camera.constants.Aspect.fill}> {button} <TouchableHighlight onPress={this._takePicture.bind(this)}> <View style={{height:50,width:50,backgroundColor:"pink"}}></View> </TouchableHighlight> </Camera> 

Answer 1

I found the answer to my question. This is an example of a camera using a reaction. https://github.com/spencercarli/react-native-snapchat-clone/blob/master/app/routes/Camera.js

Found this answer in another previously asked question answered by @vinayr. Thank you Get the last click on the camera image when viewing the image interactively

Here is the code from the first link:

 import React, { Component } from 'react'; import { View, StyleSheet, Dimensions, TouchableHighlight, Image, Text, } from 'react-native'; import Camera from 'react-native-camera'; const styles = StyleSheet.create({ container: { flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: '#000', }, preview: { flex: 1, justifyContent: 'flex-end', alignItems: 'center', height: Dimensions.get('window').height, width: Dimensions.get('window').width }, capture: { width: 70, height: 70, borderRadius: 35, borderWidth: 5, borderColor: '#FFF', marginBottom: 15, }, cancel: { position: 'absolute', right: 20, top: 20, backgroundColor: 'transparent', color: '#FFF', fontWeight: '600', fontSize: 17, } }); class CameraRoute extends Component { constructor(props) { super(props); this.state = { path: null, }; } takePicture() { this.camera.capture() .then((data) => { console.log(data); this.setState({ path: data.path }) }) .catch(err => console.error(err)); } renderCamera() { return ( <Camera ref={(cam) => { this.camera = cam; }} style={styles.preview} aspect={Camera.constants.Aspect.fill} captureTarget={Camera.constants.CaptureTarget.disk} > <TouchableHighlight style={styles.capture} onPress={this.takePicture.bind(this)} underlayColor="rgba(255, 255, 255, 0.5)" > <View /> </TouchableHighlight> </Camera> ); } renderImage() { return ( <View> <Image source={{ uri: this.state.path }} style={styles.preview} /> <Text style={styles.cancel} onPress={() => this.setState({ path: null })} >Cancel </Text> </View> ); } render() { return ( <View style={styles.container}> {this.state.path ? this.renderImage() : this.renderCamera()} </View> ); } }; export default CameraRoute;