5

I am implementing camera in my react native application. I want to show the recently captured image from that camera in a small image view on the same screen after click. But I am not getting how do I access the recently clicked image. Whenever any new image is clicked through phone it has been given a default random name, how do I refer it in image view's source?Please suggest me some way to do that. My code is 

 class Incident extends Component {
    constructor(props)
    {  super(props)

        this.state=  {path:"",show:false,video:Camera.constants.CaptureMode.video,camera:Camera.constants.CaptureMode.camera}    
      }
    render() {
      return (
              <View style={styles.container}>
             <View style={{flex:72}}>
             <Camera
              ref={(cam) => {
               this.camera = cam;
                }}
              style={styles.preview}
               aspect={Camera.constants.Aspect.fill}
              captureMode={this.state.camera}>

          </Camera>

  </View>
  <View style={{flex:8,opacity:0.5,backgroundColor:'black'}}>

    {()=>this.showClickedImage()}

  </View>


  <View style={{flex:10,flexDirection:'row',justifyContent:'space-between',backgroundColor:'#f3396b'}}>
  <TouchableOpacity style={{flex:33,flexDirection:'column', alignItems: 'center',paddingTop:10}}>
  <Image style={styles.icon} source={require('./Images/menu.png')}/>
  <Text>Home</Text>
  </TouchableOpacity>



  <TouchableOpacity style={{flex:34,flexDirection:'column', height:70,alignItems: 'center',borderColor:'#dd1e52',borderWidth:1,paddingTop:5}} 
                               onPress={()=>this.takePicture()}>
  <Image style={{width:50,height:50}} source={require('./Images/capture.png')}/>

  </TouchableOpacity>





  <TouchableOpacity style={{flex:33,flexDirection:'column', alignItems: 'center',paddingTop:10}}>
  <Image style={styles.icon} source={require('./Images/profile.png')}/>
  <Text>Profile</Text>
  </TouchableOpacity>


  </View>
  </View>
);
      }

      showClickedImage()
  { 
        return <View style={{flex:1,height:40,width:40, borderWidth:1,borderColor:'black'}}>
               <Image style={{width:40,height:40}} source= {{uri: this.state.path}}/>
               </View>
               }

       takePicture() 
     {

       this.camera.capture()
  .then((data) =>{console.log(data.path),this.setState({show:true}),this.setState({path:data.path})})
  .catch(err => console.error(err));
             }
            }
coderzzz18
  • 2,535
  • 5
  • 16
  • 23
  • When an image is stored on click it is given default random unique name, in my phone it is something like IMG_20161114_1233647, in others device it could be different. How do I write general code for its path? – coderzzz18 Nov 14 '16 at 06:52
  • you need to store previously-clicked image file names in some list to access them. – Vladyslav Matviienko Nov 14 '16 at 06:57

1 Answers1

7

camera.capture() returns path of the captured image. Use that to show in Image component.

<Image source={{uri: data.path}} style={{width: 100, height: 100}} />
vinayr
  • 11,026
  • 3
  • 46
  • 42
  • Thank you for your quick response. I am using the same , the path is showing on console but I am not getting why my image view is not getting the image. I am editing the post above by adding code @vinayr. – coderzzz18 Nov 14 '16 at 09:30
  • @Rashhh this example should help you https://github.com/spencercarli/react-native-snapchat-clone/blob/master/app/routes/Camera.js – vinayr Nov 14 '16 at 09:57