React Native Camera

[majordan04]

Hi Phamhieu,

First off awesome job on this project. For me it has been extremely helpful to learn from.

I have been trying to use the updated react-native-camera module in your code and am having some difficulty. Mostly with getting the picture to display on the new render. Would you mind giving me some direction on this? Or maybe it would be easier to input the new camera module into your code.

Any help on this would be awesome! Thanks so much for your time.

Matt

[phamhieu]

Hi Matt, can you let me take a look at your updated code? I will try to help.

Glad to hear that you find this project useful.

[majordan04]

Thanks so much for the quick response. I can't seem to get it to re render even after setState takenPhotoURI. Thanks so much for your feedback!

`
"use strict";

var React = require("react-native");
var SavePlace = require('./saveplace.ios');
var Feed = require('./feed.ios');

var Camera = require("react-native-camera");

var {
AppRegistry,
StyleSheet,
Text,
View,
TextInput,
TouchableHighlight,
} = React;

var Waay = React.createClass({

getInitialState: function() {
    return {
        cameraType: Camera.constants.Type.back,
        takenPhotoURI: null,
        cameraFlashMode: Camera.constants.FlashMode.off,
    }
},

render: function() {
if (this.state.takenPhotoURI){
return this.renderEditPhotoUI();
}

return this.renderTakePhotoUI();    

},

renderTakePhotoUI: function() {
    var cameraFn;
    cameraFn = function (cam) {
        this.camera = cam;
    }
return (
        <Camera
             ref={cameraFn.bind(this)}
            style={styles.container}
            captureTarget={Camera.constants.CaptureTarget.temp}
            type={this.state.cameraType}>

            <View style={styles.topToolBar}>

                    <TouchableHighlight style={styles.topbutton} onPress={this._switchCamera}>
                         <Text style={styles.buttonText}>Flip</Text>
                    </TouchableHighlight>
            </View>

            <View style={styles.bottomToolBar}>

                    <TouchableHighlight style={styles.bottombutton} onPress={this._takePicture}>
                         <Text style={styles.buttonText}>Take</Text>
                    </TouchableHighlight>
           </View> 
        </Camera>
    );

},

renderEditPhotoUI: function() {
var Photo = <Image source={{uri: this.state.takenPhotoURI}}

      />

return (
  {Photo}
);

},

_takePicture: function() {
    function updatestate(data){
        this.setState({takenPhotoURI:data.name})

    }


},

_switchCamera: function() {
    var state = this.state;
    state.cameraType = state.cameraType === Camera.constants.Type.back ? Camera.constants.Type.front : Camera.constants.Type.back;
    this.setState(state);
},

});
`

[majordan04]

Hi to Follow up here is what worked: To take the picture:

_takePicture() { var self = this; this.refs.cam.capture(function(err, data) { self.setState({takenPhotoURI: data}); }); },

and to rerender i used this value for the return:

renderEditPhotoUI: function() { return ( <Image source={{uri: this.state.takenPhotoURI}} style={styles.container}/> ); },

Hope this will help anyone looking!